Corso React per principianti

In questa lezione verranno analizzati i componenti React e verrà spiegato come funzionano, quali sono i loro elementi costitutivi e come vengono utilizzati per creare interfacce utente complesse.

In questa lezione verranno esplorate le ragioni per cui React è stato scelto come framework per lo sviluppo di molte applicazioni web, quali sono i suoi punti di forza e come questi si traducono in vantaggi concreti per gli sviluppatori.

In questa lezione verrà introdotto il concetto di JSX, la sintassi utilizzata in React per descrivere l'interfaccia utente. Verranno spiegate le basi della sintassi e come viene tradotta in JavaScript.

In questa lezione verrà spiegato come installare e configurare React per iniziare a scrivere il nostro primo componente. Verrà anche mostrato come creare un semplice "Hello World" utilizzando React.

In questa lezione verrà mostrato come creare il nostro primo componente React utilizzando il metodo render. Verranno spiegate le basi della struttura di un componente e come utilizzare JSX per descrivere l'interfaccia utente.

Qui allegati i file relativi a questa sezione

In questa lezione verranno introdotte le Props, uno dei concetti fondamentali di React per la condivisione di dati tra componenti. Verrà spiegato come utilizzarle e come passare dati da un componente all'altro.

In questa lezione verrà spiegata la differenza tra i componenti funzionali e i componenti di classe in React. Verrà mostrato come utilizzare uno o l'altro tipo di componente.

In questa lezione verrà introdotto il concetto di State in React, un altro concetto fondamentale per la comunicazione tra componenti. Verrà spiegato come utilizzare il State per gestire lo stato dell'applicazione e come si differenzia dalle Props.

Come aggiungere condizioni if/else in React? In questa lezione verrà introdotta la sintassi JSX per il rendering condizionale, ovvero come renderizzare componenti in base alle condizioni. Verrà mostrato come utilizzare la sintassi JSX per creare un rendering dinamico e reattivo alle interazioni dell'utente.

In questa lezione verrà introdotto il concetto di State in React. Verranno spiegati i dettagli del suo funzionamento, come crearlo e come modificarlo, oltre a come questo sia differente dalle Props.

In questa lezione verrà mostrato come iniziare il progetto di una galleria di immagini utilizzando Create React App un tool popolarissimo che ci permette di creare progetti rapidamente per studio, sperimentazione o prototipi.

In questa lezione verrà spiegato il concetto di Component Life Cycle in React, ovvero il ciclo di vita dei componenti e come React li gestisce internamente. Verranno mostrati gli eventi che si verificano durante il ciclo di vita di un componente.

In questa lezione verrà spiegato come aggiornare lo State in React utilizzando il metodo setState(). Verranno mostrati esempi pratici su come utilizzarlo per rendere dinamica l'applicazione.

Continuando lo sviluppo della nostra galleria di immagini verrà introdotto il concetto di eventi in React. Verrà mostrato come gestire gli eventi generati dall'utente e come utilizzarli per modificare lo State dell'applicazione.

Organizziamo meglio la struttura della nostra applicazione. In questa lezione verrà mostrato come creare componenti modulari in file separati e come condividere dati tra di essi

In questa lezione verrà completata la galleria di immagini e ci soffermeremo sul debug di alcuni comuni errori.

In questa lezione verrà mostrato come utilizzare il metodo setState() all'interno del Component Life Cycle di un componente React. Verranno spiegati i dettagli della sua implementazione e quando è opportuno utilizzarlo.

In questa lezione verranno introdotti gli hooks, una delle feature più recenti di React usata per semplificare la gestione dello State e degli eventi nei componenti funzionali e che approfondiremo nelle prossime sezioni

Qui allegati i file relativi a questa sezione

In questa lezione, verrà introdotta la concezione di Single Page Application (SPA) e come questa differisce dalle applicazioni tradizionali. Verranno anche discusse le ragioni per cui le SPA sono diventate così popolari negli ultimi anni.

In questa lezione, gli studenti apprenderanno come creare rotte in React utilizzando il pacchetto React Router. Verranno spiegati i concetti di rotte e di storia e come questi possono essere gestiti in una SPA.

In questa lezione, verrà introdotto il componente Link del React Router e gli studenti impareranno come utilizzarlo per creare link tra le diverse pagine della SPA. Verrà anche discusso il concetto di passaggio di parametri attraverso i link.

In questa lezione, gli studenti apprenderanno come utilizzare il framework CSS Materialize per creare una barra di navigazione reattiva e facile da utilizzare nella loro SPA.

Utilizziamo le funzionalità di React Router come le rotte dinamiche per creare un blog

In questa lezione, verranno discusse le differenze tra le SPA e le applicazioni a renderizzazione lato server (SSR) o applicazioni universali. Gli studenti apprenderanno quando è opportuno utilizzare una soluzione rispetto all'altra e come implementarle.

Qui allegati i file relativi a questa sezione

In questa lezione verrà introdotto il concetto di richieste HTTP in React. Verranno spiegate le diverse opzioni per effettuare richieste HTTP in un'applicazione React.

In questa lezione verrà introdotta la libreria Axios, una delle librerie più popolari per effettuare richieste HTTP in JavaScript. Verranno mostrati i dettagli dell'utilizzo di Axios in un'applicazione React.

In questa lezione verrà mostrato come creare un componente React che effettua una richiesta API utilizzando Axios. Verranno mostrati esempi pratici di come configurare e utilizzare Axios all'interno di un componente.

In questa lezione verrà spiegato come utilizzare la risposta della richiesta API all'interno di un componente React.

In questa lezione verrà mostrato come gestire gli errori nelle richieste HTTP all'interno di un'applicazione React. Verranno spiegati i dettagli della gestione degli errori e come visualizzare messaggi di errore all'utente.

In questa lezione verrà introdotto il concetto di asincronismo in JavaScript e come utilizzarlo in React utilizzando Async/Await. Verranno mostrati esempi di come utilizzare Async/Await per effettuare richieste HTTP e gestire la loro risposta.

In questa lezione verrà introdotto il concetto di Side Effects in React. Verranno mostrati esempi di come utilizzare Side Effects per effettuare azioni collaterali all'interno di un componente, come ad esempio effettuare una richiesta HTTP.

In questa lezione verrà mostrato come effettuare il refactoring di un componente React. Verranno spiegati i dettagli del refactoring e come migliorare la struttura del codice per renderlo più leggibile e manutenibile.

Qui allegati i file relativi a questa sezione

In questa lezione verrà introdotto il progetto Todo, un'applicazione React per la gestione delle attività da svolgere. Verrà mostrato l'obiettivo del progetto e come sarà strutturato.

In questa lezione verrà mostrato come creare il componente TodoList dell'applicazione Todo. Verranno spiegati i dettagli della struttura del componente e come utilizzare gli elementi della lista.

In questa lezione verrà mostrato come creare il componente Todo dell'applicazione Todo. Verranno spiegati i dettagli della struttura del componente e come gestire le interazioni dell'utente. Saranno inoltre introdotti i concetti di aggiunta, eliminazione e modifica delle attività.

In questa lezione verrà introdotto il concetto di form in React e come gestire i dati inseriti dall'utente. Verrà mostrato come creare un form e come accedere ai dati inseriti.

In questa lezione verrà spiegato come creare un campo controllato in React, ovvero un campo di input la cui value viene gestita dallo state del componente.

In questa lezione verrà mostrato come inviare i dati del form con l'evento onSubmit e come gestire la sua azione.

In questa lezione verrà mostrato come creare una nuova attività da svolgere nell'applicazione Todo utilizzando un form e come aggiornare lo state dell'applicazione.

In questa lezione verrà mostrato come eliminare un'attività dall'applicazione Todo e come aggiornare lo state dell'applicazione.

In questa lezione verrà mostrato come segnalare un'attività come completata nell'applicazione Todo e come aggiornare lo state dell'applicazione.

In questa lezione verranno suggerite alcune funzionalità aggiuntive con cui sperimentare nell'applicazione Todo, come ad esempio la modifica di un'attività o l'ordinamento delle attività in base alla loro priorità.

Qui allegati i file relativi a questa sezione

Qui allegati i file relativi a questa sezione

Qui allegati i file relativi a questa sezione