Quali argomenti saranno trattati nel corso?
Introduzione alle Basi di React
Introduzione al Corso di React:
Parole di apertura.
Cos'è React e un po' sulla storia della libreria.
Enfasi sul lavoro con un sistema di codebase.
Componente React di Base:
Imparare cos'è JSX in React.
Come scrivere un primo componente di base.
Costruire un componente con dati statici e comprendere le basi.
Costruire un Elenco con Dati Dinamici:
Costruire elementi dinamicamente.
Utilizzare le capacità di Array.prototype.map per la costruzione dinamica.
Importare ed esportare componenti da un file.
Costruire una Tabella con Dati Dinamici:
Struttura della tabella e dei suoi componenti in HTML.
Utilizzo di un loop annidato per costruire una tabella.
Utilizzo della funzione map in modo annidato.
Utilizzo di dati dinamici provenienti da un file importato.
Stilizzare con l'oggetto Style:
Comprendere la differenza tra HTML e JSX.
Imparare a stilizzare gli elementi sulla pagina.
Praticare la costruzione dinamica di elementi in modo sfidante con gli stili appresi.
Componenti con State ed Eventi
Integrazione di file CSS in React:
Incorporare il mondo degli stili come parte integrante della costruzione dei componenti.
Comprendere cosa sia className e la differenza tra HTML e JSX.
Incorporare un esercizio comprensivo di tutto il materiale appreso fino a questo punto nel corso.
Enfatizzare le regole CSS e come si integrano nel nostro sistema costruito.
Integrazione delle Props nei Componenti:
Cosa sono le props in React e quando utilizzarle.
Costruire componenti con props e metodi comuni di scrittura.
Utilizzo dei componenti che abbiamo scritto nella costruzione dinamica.
Costruzione di una tabella con le Props:
Costruire una tabella utilizzando le props.
Creare un componente intelligente nella costruzione di una tabella.
Combinare la costruzione dinamica con più componenti utilizzando le props e lo styling con CSS.
Utilizzo di Eventi e useState:
Come collegare eventi di tipo onClick agli elementi.
Cosa sono i componenti smart e perché ne abbiamo bisogno.
Cos'è l'hook react di tipo useState e come usarlo.
Creare condizioni booleane all'interno del JSX di un componente.
Collegare la creazione di eventi e la memorizzazione dello stato per la costruzione di componenti React smart.
Utilizzo dell'evento onChange:
Come aggiungere un input alla pagina e usare useState per memorizzare i valori degli input.
Costruire una lista dinamica con dati inseriti dall'utente.
Spiegazione approfondita degli array e la differenza tra valore e riferimento.
Comprensione di come lavorare con gli array memorizzati nello stato del componente.
Argomenti avanzati e utilizzo delle API
Costruire una tabella dinamica con gli eventi:
Comprendere come integrare tutto ciò che è stato appreso fino ad ora per costruire una tabella in modo dinamico.
Utilizzo di useState per memorizzare un numero di input.
Esempio di utilizzo di uno stato complesso con un array di oggetti.
Utilizzo dell'Hook useEffect:
Cos'è l'hook react di tipo useEffect e come e quando usarlo.
Eseguire la comunicazione con il server utilizzando fetch.
Mostrare metodi per proteggere il nostro codice per evitare errori non necessari.
Costruire un componente intelligente che combina sia gli hook useState che useEffect.
Esempio di utilizzo di useEffect nella ricerca lato server:
Esplorazione di utilizzi aggiuntivi per useEffect.
Comprensione di come il ciclo di vita del componente influenzi la nostra implementazione del codice.
Presentazione di un esempio complesso di utilizzo di useEffect.
Utilizzo di Input Aggiuntivi:
Cos'è un input checkbox e come utilizzarlo.
Cos'è un input radio e come utilizzarlo.
Cosa sono gli input datetime e datetime-local e quando utilizzarli.
Costruire una Tabella da API con Filtraggio dei Risultati:
Effettuare una richiesta API per ottenere dati riguardo a una tabella.
Costruire dinamicamente la tabella.
Imparare come eseguire ricerche attraverso un'intelligente filtraggio dei risultati.
Discutere l'architettura del codice.
Argomenti avanzati e architettura del codice
Utilizzo di Filtri Avanzati:
Costruzione di una tabella che mostra informazioni sui voli.
Espansione dell'uso della tabella con un componente di riga intelligente.
Utilizzo di input per costruire filtri per la tabella, usando checkbox, datetime e input di testo.
Libreria Bulma per Stili Avanzati:
Imparare ad incorporare stili predefiniti.
Utilizzare il pacchetto bulma per aggiungere colore e stili ai progetti React costruiti insieme.
Incorporare stili in un componente esistente e analizzare la documentazione della libreria che utilizzeremo.
Ordinamento in JavaScript:
Miglioramento di un componente tabella esistente e aggiunta di capacità di ordinamento.
Comprensione approfondita di come funzionano gli ordinamenti su array con numeri, stringhe e oggetti.
Vedere come gestire un ordinamento speciale quando il nostro campo non è un confronto diretto.
Canali di comunicazione tra componenti:
Apprendimento di come un componente figlio può comunicare con un componente genitore.
Implementazione dello stile bulma su diversi componenti.
Costruzione di un componente versatile che ci permette di incorporare schede nell'applicazione.
Visione di esempi di utilizzo di props di tipo funzione.
Conclusione