Reagire al corso online. Sviluppo di applicazioni client complesse - corso gratuito di HTML Academy, formazione 9 settimane, data 15 ottobre 2023.

Sezione 1 Introduzione a TypeScript
Consideriamo lo schema di lavoro del corso. Scopriamo cos'è TypeScript e quali problemi risolve. Facciamo conoscenza con il sistema di tipi e comprendiamo come avviene il processo di digitazione. Impariamo come configurare il compilatore e guardiamo le impostazioni di base. Passiamo quindi alla pratica e alla comprensione delle funzionalità della scrittura del codice digitato: tuple, interfacce, generici e così via.

Questioni organizzative.

Revisione dei progetti.
Schema di lavoro sul corso.

Introduzione a TypeScript.

Cos'è TypeScript e quali problemi risolve?
Sistema di tipi.
Come il codice TypeScript si trasforma in JavaScript.
Infrastruttura: impostazioni del compilatore.
Annotazioni e inferenza automatica del tipo.

Esercitati con TypeScript.

Digitazione di oggetti, array, funzioni.
Generici.
Tuple.
Interfacce, tipo alias.

Sezione 2 Reagire
Introduzione alla libreria React. Scopriamo quali problemi risolve e come può semplificare lo sviluppo front-end. Prepariamo le basi del progetto utilizzando lo strumento Create React App (CRA). Impariamo come utilizzare i modelli per CRA. Successivamente conosceremo le principali funzionalità della libreria React (JSX, componenti, trasferimento dati tra componenti).

Reagire.

Cos'è React.
Come funziona React?
Quali problemi risolve efficacemente?
DOM virtuale.

Infrastruttura.

Crea l'app React.
Dattiloscritto.

JSX

In cosa differisce dall'HTML?
Metodi di lavoro di base.

Approccio per componenti.

Componenti della reazione.
Oggetti di scena. Passaggio dei dati attraverso le proprietà.
Composizione.

Componenti di rendering.

Elenchi di rendering.
Rendering condizionale.

Sezione 3 Routing (React Router)
Scopriamo come è organizzato il routing in SPA. Aggiungiamo React Router al progetto e osserviamo le funzionalità del pacchetto: percorsi, reindirizzamenti, percorsi privati ​​e così via.

Itinerario nella SPA.
API della cronologia.
Componenti di instradamento, collegamento e reindirizzamento.
Gestione del percorso.

Sezione 4 Componenti della reazione. Ganci
Ampliamo la nostra conoscenza di React e dei suoi componenti. Impariamo come gestire lo stato, utilizzare gli eventi e i metodi del ciclo di vita dei componenti. Facciamo conoscenza con React Hooks e impariamo come sostituire con essi i componenti della classe. Impariamo come lavorare con i moduli.

Stato.
Flusso di dati unidirezionale.
Componenti funzionali, componenti di classe, PureComponent.
Introduzione ai React Hooks.

Metodi del ciclo di vita.

Reagire e formarsi.

Sezione 5 Reazioni e schemi
Diamo un'occhiata alla questione su cos'è l'architettura software e come progettarla. Facciamo conoscenza e impariamo ad applicare i design pattern nella pratica.

Progetto.

Qual è la differenza tra un buon programma e uno cattivo?
Perché progettare software. Obiettivi di progettazione.
Architettura del software.
Strumenti di progettazione.

Modelli di progettazione.

Quali problemi risolvono i modelli?
In cosa consiste il modello?
Tipi di modelli di progettazione.

Modelli in React.

Componenti senza stato.
Componenti proxy.
Componenti di ordine superiore.
Oggetti di scena per il rendering.
Fornitore.
React Hooks e pattern.

Sezione 6 Gestione dello Stato. Redux
Facciamo conoscenza con l'architettura di Flux: azioni, dispatcher, visualizzazioni e negozi. Ci colleghiamo al progetto Redux e aggiorniamo la codebase.

Architettura del flusso.
Archiviazione, dispatcher, azioni.

Redux.

Middleware.

Estensione della funzionalità Redux.

Sezione 7 Asincronia in Redux
Impariamo come implementare il codice asincrono nell'operazione sincrona di Redux utilizzando il Middleware. Impariamo come interagire con il server utilizzando il pacchetto Axios. Facciamo conoscenza con gli intercettori.

Redux-thunk.

Axios.

Sezione 8 Ottimizzazione delle prestazioni
Parliamo delle prestazioni delle applicazioni React: quali funzionalità sono presenti, a cosa dovresti prestare attenzione quando progetti i componenti in primo luogo. Quindi daremo un'occhiata al Redux Toolkit e impareremo come usarlo per eliminare il codice boilerplate quando lavoriamo con Redux.

Profilazione dei componenti.
Gestione aggiornamento componenti.
Memoizzazione.
Kit di strumenti Redux.

Sezione 9 Test di reazione
Facciamo conoscenza con gli strumenti e le tecniche per testare le applicazioni React. Configureremo l'infrastruttura di test e scriveremo i test per i componenti.

Scherzo.
Libreria di test di reazione.

Prima settimana di difesa
Completamento del lavoro sul progetto e preparazione per la difesa finale.

Seconda settimana di difesa
La prima valutazione del progetto da parte del mentore revisore secondo criteri di qualità.

Terza settimana di difesa
Migliorare il progetto sulla base dei commenti del mentore revisore e sottoporlo a una seconda valutazione.

Sezione 10 Finale
Riassumiamo il corso e determiniamo l'ulteriore vettore di studio di React e del suo ecosistema. Quindi discuteremo delle nuove funzionalità di React previste nelle versioni future.

Quarta settimana di difesa
Apportare le modifiche finali e ricevere un voto finale.