Imparare e capire React - il tutorial pratico

Qui verranno presentati gli argomenti che verranno successivamente trattati e si parlerà della motivazione dietro questo corso.

Esistono ormai innumerevoli framework UI per JavaScript - perché dovrebbe essere proprio React? Oltre alla indiscussa popolarità di questa libreria, ci sono anche alcune ragioni più profonde che parlano a favore di React.

Stiamo configurando l'ambiente di sviluppo in questa lezione e stiamo creando la nostra prima app React istantaneamente con npm create vite.

Dopo aver creato un'app React "fresca" nell'ultima lezione, l'obiettivo qui è capire la struttura di questa app e spiegare come React può essere incorporato in un sito web.

Un piccolo rinfrescante sull'argomento var vs. let/const.

La destructurazione consente di estrarre elementi da oggetti e array in modo mirato. Con un'osservazione attenta emergono molte possibilità di utilizzo che rendono il codice JS più elegante e compatto.

Le funzioni sono essenziali in JS e finora sono state dichiarate e definite solo tramite la parola chiave function. ES6 introduce una forma di scrittura elegante e breve che rende il codice più leggibile e fornisce una soluzione a un fastidioso problema con this.

In NodeJs i moduli sono stati utilizzati fin dall'inizio, ma all'inizio faceva affidamento esclusivamente sul formato dei moduli CommonJs con require. A partire da ES6 c'è una definizione dei moduli nello standard e quindi le nuove parole chiave import/export. Questo formato ora è supportato da quasi tutte le biblioteche (nuove) di JS e anche NodeJs può gestirlo nelle versioni più recenti.

Con JSX descrivete l'interfaccia utente di un componente e integrate espressioni JS al suo interno. Il file del progetto per il video contiene il codice completo di questa sezione tutorial.

È molto semplice scrivere i propri componenti React utilizzando funzioni che restituiscono JSX.

Questa lezione spiega come i dati e le espressioni JavaScript possono essere integrati in JSX.

Senza uno stato che può cambiare, è difficile implementare un'applicazione significativa. In React di solito si utilizza useState per questo. Questa lezione presenta questo hook e ne spiega l'utilizzo.

Le props sono utilizzate per passare i dati ai componenti figlio. Qui viene spiegato come avviene esattamente e a cosa prestare attenzione.

Quando le props cambiano dinamicamente, la funzione di renderizzazione corrispondente del componente verrà chiamata di nuovo.

Quando un componente figlio vuole comunicare qualcosa al componente genitore, lo fa tramite una prop di callback.

Le attività da fare dovrebbero essere completate prima o poi. Qui discutiamo di come ciò funziona nel codice.

L'aspetto di un'interfaccia utente è senza dubbio importante. Perciò spiego qui come funziona utilizzando la libreria Emotion e come utilizzare la prop className. Inoltre, si approfondirà l'attributo style, con cui è possibile stilizzare separatamente ogni singolo elemento nei dettagli.

Attraverso il filtraggio dell'array delle cose da fare, è possibile suddividere i compiti in due gruppi.

Naturalmente, è anche necessario poter eliminare le attività da svolgere. Qui verrà spiegato come funziona questo processo utilizzando i filtri degli array.

Fino ad ora abbiamo sempre "incapsulato" i componenti in DIV. Ma in determinati casi possiamo anche evitarlo.

Adesso diventa interessante: Le attività da fare possono essere facilmente memorizzate in modo persistente nella memoria del browser e naturalmente anche ricaricate, in modo che possano "sopravvivere" al ricaricamento della pagina.

Con useEffect è possibile integrare gli effetti collaterali. Anche il montaggio di un componente può essere gestito con questa funzione.

Breve riassunto sulla nostra app di promemoria e ultimi miglioramenti.

L'applicazione del lettore video viene creata con create vite e viene spiegato come dovrebbe essere strutturata l'app. Il file di progetto allegato al video contiene il codice completo per il lettore video.

Con l'attributo ref è possibile fare riferimento agli elementi del DOM e accedervi utilizzando useRef. Qui lo facciamo con l'elemento del video.

Stiamo creando il vero lettore video, che già ha pulsanti per Riproduzione, Pausa e Stop.

Dato che non si hanno mai bisogno contemporaneamente di Play e Pausa, combiniamo questi due in un unico pulsante.

Il controllo personalizzato degli elementi video controlla anche il video, il che però porta a un malfunzionamento del nostro stato nel pulsante Riproduci/Pausa. Risolviamo questo problema utilizzando gestori degli eventi sull'elemento video.

Possiamo anche regolare il volume tramite un apposito cursore.

Saltare in una posizione qualsiasi nel video (Seek) è sorprendentemente facile da fare impostando la proprietà currentTime.

La lunghezza del video sarà confermata solo dopo il caricamento dei metadati del video, quindi dobbiamo attendere l'evento corretto.

La playlist è realizzata attraverso una lista che può essere implementata con l'elemento HTML select.

Ora entriamo nella fase di modifica dell'elenco dei video: aggiungiamo l'inserimento di voci video.

Ciò che si aggiunge deve anche poter essere eliminato. Lo facciamo in modo simile all'app per fare liste filtrando.

La playlist non deve funzionare solo come un "elenco dei segnalibri", ma deve anche riprodurre automaticamente i video uno dopo l'altro. Questo viene realizzato in questa lezione.

Per gli impazienti: pulsanti per il video successivo e precedente.

Un trattamento speciale per il primo e l'ultimo video viene realizzato: i pulsanti Avanti e Indietro dovrebbero essere disattivati di conseguenza.

Adesso salviamo e caricchiamo ancora la nostra playlist. Questo avviene in modo analogo all'applicazione To-do nel local storage del browser.

I video utilizzati come esempi nell'applicazione del lettore video possono essere visualizzati qui nell'originale (tutte le licenze CC Attribution, vedere i rispettivi siti web):

Elephants dream: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

Prendendo ad esempio il useJsonFetch-hooks, qui viene spiegato come è possibile scrivere le proprie funzioni di hooks.

La modifica di stato con il Setter di useState può essere complicata. Con useImmer, però, non è più un problema.

La UI verrà costruita più velocemente e risponderà più prontamente agli input degli utenti, se non ci sono chiamate inutili alle funzioni di rendering. Con memo è possibile evitare che i componenti siano renderizzati se le loro props non cambiano.

Con useCallback è possibile evitare il rendering non necessario dei componenti figlio quando vengono utilizzate le prop Callback.

Calcoli complessi all'interno delle funzioni di renderizzazione dovrebbero essere eseguiti solo quando necessario. Con useMemo è possibile memorizzare nella cache i risultati di questi calcoli tenendo conto delle dipendenze.

Riassumo qui i risultati del corso e fornisco indicazioni su cosa i partecipanti dovrebbero guardare dopo il corso.