codequick-darkmode-logo
AccediIscriviti
Corso di React

Programma:

Corso di React

20 Lezioni 125 Domande di Programmazione Online


Quali argomenti saranno trattati nel corso?

Introduzione alle Basi di React

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. Conclusione