Corso completo

Corso React

Impara componenti, props, state, hook, Context e routing costruendo Fetch User, una Todo App e un Ecommerce con TypeScript.

  • 17 moduli
  • 150 lezioni
  • 3 progetti
Anteprima di Corso React

Dalla teoria a competenze che sai usare.

Segui un percorso ordinato, fai pratica e impari a portare a termine ciò che inizi.

Prima del corso

Il progetto React sembra frammentato. Componenti, stato ed effetti non hanno ancora un ordine.

Riesci a seguire esempi isolati ma fatichi a collegarli in un'applicazione completa.
Dopo il corso

Ogni parte ha una responsabilità. Costruisci applicazioni React che sai spiegare.

Gestisci componenti, stato, Context, routing, form e dati esterni in progetti completi.

Competenze che lavorano insieme.

Componenti, JSX e rendering

Crei il progetto e capisci come componenti e JSX diventano interfaccia, distinguendo rendering e re-render.

Props, state e hook

Gestisci eventi e ciclo di vita, poi estrai la logica in custom hook e ne osservi il comportamento.

Richieste e caricamento

Con Fetch User passi da dati remoti a contenuto visibile e costruisci un hook riutilizzabile per le richieste.

Todo App, form e persistenza

Scomponi la UI, gestisci liste, input e ref, poi salvi i dati nel localStorage.

Context e memoizzazione

Affronti prop drilling, dipendenze e re-render, valutando quando usare la memoizzazione.

Routing e pubblicazione

Organizzi route, layout e navigazione. Nella Todo App arrivi alla build e a un esempio di deploy.

Ecommerce frontend

Colleghi prodotti, categorie e carrello a Context, API e persistenza locale, senza pagamenti reali.

Il corso, modulo dopo modulo.

Ogni modulo aggiunge conoscenze e pratica a ciò che hai già costruito.

01 Fondamenti, JSX e rendering Crei il progetto con Vite e TypeScript, esplori JSX e styling e ricostruisci il percorso da componente a rendering, Virtual DOM e re-render.
  1. Introduzione a React
  2. Esploriamo la documentazione
  3. Creiamo un progetto React con Vite
  4. Cos'è e come funziona JSX
  5. Lo styling in React
  6. Cos'è un componente React
  7. Il Rendering
  8. Il Virtual DOM
  9. Recap Rendering e Virutal DOM
  10. Il Re-rendering
02 Props, state e ciclo di vita Distingui props e state, gestisci gli eventi e segui mount, update e unmount con esempi su setState e useEffect.
  1. Le props
  2. Lo state
  3. Approfondiamo il setState
  4. Differenze tra Props e State
  5. Gestire gli evendi del DOM con React
  6. Il Ciclo di vita dei Componenti P1
  7. Il Ciclo di vita dei Componenti P2
  8. Come eseguire operazioni al Mount (useEffect)
  9. Come eseguire operazioni all'update (useEffect)
  10. Come eseguire operazioni all'unmount (useEffect)
  11. Recap useEffect
  12. Recap basi React
03 Hook e custom hook Parti da useState e useEffect per estrarre la logica in custom hook, riutilizzarla e capire perché ogni utilizzo mantiene il proprio stato.
  1. Cosa sono gli hook
  2. useState Hook
  3. useEffect hook con esempi reali
  4. Creiamo un custom hook
  5. Riutilizziamo il custom hook
  6. Chiarimenti sul funzionamento dei Custom hook
04 Fetch User - richieste e custom hook Richiedi dati a JSONPlaceholder, affronti i problemi del primo fetch e mostri il caricamento. Esercizi e soluzioni portano a un hook generico riutilizzabile per richieste diverse.
  1. Progetto Fetch User
  2. Scopriamo il primo problema
  3. Risolviamo il problema insieme
  4. Gestiamo la fase di loading
  5. Secondo esercizio per voi
  6. Soluzione Esercizio
  7. Terzo Esercizio
  8. Soluzione esercizio 3
  9. Quarto esercizio per voi
  10. Soluzione Esercizio 4
  11. Quinto esercizio per voi
  12. Soluzione: Creiamo un custom hook generico
  13. Creiamo un nuovo componente e utilizziamo il nostro hook
05 Todo App - componenti e props Scomponi la Todo App in Title, Button e Input. Lavori con props, children e proprietà opzionali, riutilizzando i tipi degli elementi React.
  1. Presentazione progetto Todo
  2. Analizziamo il progetto Todo
  3. Creiamo il componente Title
  4. Costruiamo il componente Button con props e children
  5. Creiamo il componente Input con props opzionali
  6. Utilizziamo i tipi già presenti per React
  7. Altri trick con i tipi e le props
06 Todo App - liste e gestione dello stato Aggiungi, completi e rimuovi attività. Usi liste, key e rendering condizionale, scegli dove tenere lo stato e separi logica e componenti per rendere il codice leggibile.
  1. Cominciamo a far funzionare l'applicativo
  2. Sviluppiamo la funzione addTodo
  3. Come renderizzare componenti in modo dinamico
  4. Renderizzare le liste
  5. La props "key"
  6. Condizionare il rendering (Conditional Rendering)
  7. Chiarimenti e esercizio per voi
  8. Creiamo il componente TodoList e ragioniamo sullo state
  9. Completiamo la funzione remove e toggle todo
  10. Modifichiamo il ListItem con toggle e remove todo
  11. Generalizziamo il componente ListItem
  12. Creiamo il TodoListItem
  13. Analizziamo i componenti e esercizio per voi
  14. Risolviamo l'esercizio e parliamo di clean code
07 Todo App - effetti e persistenza Rivedi gli effetti della Todo App, rimuovi quelli superflui e crei utility per il localStorage. Verifichi come i custom hook influenzano i re-render senza condividere automaticamente lo stato.
  1. Meno useEffect ci sono meglio è
  2. Risolviamo l'errore
  3. Rimuoviamo anche l'altro useEffect
  4. Creiamo le utility per il localStorage
  5. Il Rerendering scatenato dal custom hook
  6. I Custom Hook non condividono le informazioni tra componenti
  7. Analizziamo quanto fatto nella TodoApp
08 Higher-order components Esplori gli higher-order components con esempi di visualizzazione condizionale e passaggio di informazioni, fino alla tipizzazione delle props con generics e Omit.
  1. Gli High Order Component (HOC)
  2. Esempio di HOC realmente molto utile
  3. Altro modo di creare e utilizzare gli HOC
  4. HOC con Tipi corretti per le props
09 Form, input e ref Costruisci il form di inserimento e confronti input controlled e uncontrolled. Usi useRef e forwardRef per lavorare con i riferimenti nei tuoi componenti.
  1. Creiamo il componente Insert
  2. Creiamo un form
  3. Componenti controlled e uncontrolled
  4. I componenti Controlled
  5. Trasformiamo il componente in UNcontrolled
  6. Lo useRef
  7. Esperimento con il ref
  8. Recap useRef
  9. Recap componenti Uncontrolled
  10. Torniamo ad utilizzare il nostro componente input
  11. forwardRef
10 Prop drilling e Context Analizzi il prop drilling e le alternative, crei il Context della Todo App e un hook per leggerlo. Valuti anche accoppiamento, re-render e limiti del Context.
  1. Il prop drilling
  2. I problemi causati dal prop drilling
  3. Prima soluzione al Prop drilling
  4. La seconda Soluzione al prop drilling
  5. Creiamo il Context
  6. Leggiamo il valore del context
  7. Aggiorniamo il valore del context
  8. Creiamo il context per la nostra todo app
  9. Creiamo l'hook per accedere al context
  10. I lati negativi di utilizzare il Context
  11. Quando conviene utilizzare il context
11 Re-render e memoizzazione Osservi i componenti con React Developer Tools e sperimenti React.memo, useMemo e useCallback. Ragioni su riferimenti, dipendenze e costi della memoizzazione.
  1. Ragionamiamo sui re-renders
  2. React Developer Tools
  3. Esempio di Re-render inutile
  4. Memoizzazione e React memo
  5. Esempio con oggetto come props
  6. useMemo
  7. Le dipendenze dello useMemo
  8. Altri motivi per utilizzare lo useMemo
  9. Passiamo anche la funzione come props
  10. useCallback
  11. Recap e Considerazioni sulla Memoizzazione
12 Routing - fondamenti Introduci React Router con Home e About, route annidate, parametri dinamici, catch-all e Link. Costruisci la navigazione tra le viste della tua SPA.
  1. Introduzione al Routing
  2. Creiamo le routes Home e About
  3. Le Nested Routes
  4. Parametri dinamici
  5. Parametri dinamici Multipli
  6. Catch All Route
  7. Il componente Link
  8. Come passare il path corretto al to
  9. Piccola nota su React Router
13 Todo App - routing e deploy Dai alla Todo App pagine per attività completate e da completare, navbar e layout con Outlet. Crei la build e segui un esempio di pubblicazione su Cloudflare Pages.
  1. Creiamo le route per la nostra todoApp
  2. Creiamo la navbar
  3. Creiamo un Layout con Outlet
  4. Mostriamo i giusti todos
  5. Creiamo una build
  6. Deploy del progetto
14 Route guard e accesso Costruisci un esempio di navigazione con route guard, login, logout e controlli sui ruoli. Il lavoro riguarda il comportamento frontend, non un backend di autenticazione.
  1. Introduzione alle route guard
  2. Situazione attuale del progetto
  3. Applichiamo la guard
  4. Implementiamo login e logout
  5. Inseriamo una route guard con i ruoli
  6. Altro modo di scrivere la guard
15 Ecommerce - layout, prodotti e carrello Avvii il progetto Ecommerce e organizzi navbar, layout, componenti Product e List e carrello, ragionando su dove renderizzare gli elementi condivisi.
  1. Introduzione Progetto Ecommerce
  2. Inizializziamo il progetto ecommerce
  3. Creiamo la navbar
  4. Creiamo il base Layout
  5. Creiamo i componenti Product e List
  6. Renderizziamo la lista dei prodotti
  7. Creiamo il carrello
  8. Renderizziamo il carrello
16 Ecommerce - Context e pagine Porti la logica del carrello nel Context e la colleghi ai componenti. Organizzi homepage, route e pagina del singolo prodotto con parametro dinamico.
  1. Cominciamo ad aggiungere un po di logica
  2. Creiamo il context
  3. Accediamo al context
  4. Accediamo al context
  5. Analizziamo il context
  6. Creiamo la homepage e le route corrette
  7. Creiamo la pagina prodotto
  8. Recap di quanto fatto fino ad ora
17 Ecommerce - API e persistenza Colleghi prodotti e categorie a Fake Store API e salvi il carrello nel localStorage. Riordini il codice e distingui le funzionalità frontend realizzate da ciò che richiederebbe un backend.
  1. Fetchiamo i prodotti da api
  2. Fetchamo il singolo prodotto
  3. Info sulle chiamate
  4. Implementiamo le categorie
  5. Salviamo il carrello nel local storage
  6. Facciamo pulizia
  7. Recap Ecommerce

È il corso giusto se ti riconosci qui.

Risultato raggiunto dopo il corso Corso React
Il corso collega ogni concetto a un flusso di lavoro concreto.

Componenti che puoi riutilizzare

Scomponi la Todo App in componenti piccoli, tipizzi le props e separi la logica con i custom hook. Così sai dove cercare quando devi modificare qualcosa.

Interfacce che rispondono all'utente

Gestisci il loading di una richiesta, gli input dei form, le attività da completare e il carrello. Colleghi quello che l'utente fa a quello che vede nella pagina.

Una SPA con pagine e dati

Passi dai singoli componenti a route, layout condivisi, Context e API. Nella Todo App arrivi anche alla build e alla pubblicazione del progetto.

Prerequisiti essenziali Un computer sul quale seguire le lezioni e svolgere gli esercizi

Continui a imparare anche fuori dalle lezioni.

Materiali e servizi che accompagnano lo studio e la pratica.

01

File Sorgenti inclusi

Avrai i file di progetto che vedrai all'interno del corso inclusi! Questo vuol dire che potrai andare a consultarli quando vuoi, anche dopo il corso!

02

Esercizi pratici

Tutte le lezioni sono molto pratiche ma a parte questo, ti verranno assegnati alcuni esercizi pratici che ti aiuteranno ad entrare in confidenza con il codice e le sue logiche.

03

Piattaforma dedicata

Potrai studiare all'interno di una piattaforma creata appositamente per massimizzare l'apprendimento. Al suo interno troverai tutto ciò di cui hai bisogno!

04

Accesso alla community

Con l'acquisto di questo percorso avrai accesso ad una community (sempre all'interno della piattaforma), che ti permetterà di crescere insieme a tanti altri studenti e supportarvi a vicenda!

05

Assistenza rapida

Non dovresti avere alcun tipo di problema, ma nell'eventualità sappi che potrai contattarci tramite la chat in tempo reale all'interno della piattaforma. Questo sistema ci permette di risolvere qualunque problema nel modo più veloce possibile

Esclusivo Coding Myke

Lifetime Access

Una volta dentro, resti dentro.

Al contrario delle accademie tradizionali, una volta effettuato l'accesso alla mia academy, potrai restarci fin quando lo vorrai, anche dopo che trovi lavoro! Questo ti permetterà di crescere senza fine, visto che potrai usufruire di tutti i bonus sopracitati!

Scegli il livello di supporto che vuoi.

I contenuti inclusi dipendono dall'opzione scelta. Prezzi e condizioni restano sempre chiari.

Percorso 01

Corso completo

Tutti i moduli del corso React, con accesso e aggiornamenti a vita.

Cosa comprende
  • 17 moduli inclusi
  • Accesso e aggiornamenti a vita

14 giorni soddisfatto o rimborsato*

799,00 €
Acquista

Si applicano termini e condizioni

Cosa racconta chi ha studiato con Michele.

Quando ho conosciuto Michele, verso di lui provavo il classico scetticismo, dovuto ad una recente esperienza formativa, ma poi durante la call, ho capito ben presto di avere a che fare con un vero e proprio professionista che quotidianamente, lavora sul campo: quello che insegna è quello che fa! Sto seguendo Frontend Generator e concordo con Michele quando dice che non è un corso, ma un percorso che potenzialmente potrebbe non finire mai. Le lezioni, sono brevi, ma molto chiare e ricchissime di informazioni, focalizzate a trasmettere il know how necessario al raggiungimento dell'obiettivo. Michele è un coach appassionato e appassionante, pronto sempre a spronarti e supportarti qualora ce ne sia bisogno. In questo mondo, persone come lui, sono merce rara

Foto di Alessandro Talamonti Alessandro Talamonti Operaio

Michele ha una grande passione per l'insegnamento, oltre che per la programmazione, che subito traspare attraverso la sua forte dedizione verso i suoi studenti, la sua assoluta disponibilità e la sua capacità di motivarti per dare sempre il massimo. La sua profonda competenza e professionalità nel suo ambito, insieme alla chiarezza con cui riesce a spiegare gli argomenti più complessi, hanno reso il mio periodo di formazione impegnativo ma estremamente stimolante e sfidante. In poche settimane sono riuscita ad imparare più di quanto credessi e le esercitazioni che ci assegnava Michele, basate su casi reali, mi sono tornate utilissime, rendendo la mia esperienza formativa preziosissima per la mia carriera di sviluppatrice. Il suo supporto, sia per quanto riguarda le competenze tecniche che per la sua capacità di incoraggiarti e motivarti, sono state fondamentali per acquisire maggiore sicurezza in me stessa. La sua passione per lo sviluppo frontend è contagiosa e mi ha sempre spinta a superare i miei limiti e ad andare avanti nonostante le difficoltà.

Foto di Federica Ferrante Federica Ferrante Front-end Developer

Prima di partecipare a questo corso, non avevo alcuna conoscenza in questo ambito. Ora, grazie alla qualità e alla struttura del corso, mi sento sicuro nelle mie nuove competenze che mi hanno aiutato molto a trovare subito un lavoro a tempo indeterminato e da remoto! Lo consiglio vivamente a chiunque voglia acquisire solide basi in breve tempo. Ogni lezione è organizzata in modo chiaro, con video suddivisi per argomento, perfetti per ripassare o approfondire concetti. L'insegnante è estremamente chiaro, conciso, disponibile e dimostra una grande competenza. Assolutamente soddisfatto!

Foto di Peppe Libro Peppe Libro Technical Analyst at Anima Sgr

Aver avuto la possibilità di poter far parte a questo corso è stata una sorta di manna dal cielo. Il corso è ben strutturato, con una dizione ben comprensibile a tutti, è pieno di esercizi che ti aiutano molto a capire bene il funzionamento e soprattutto ad esercitarti per far tue tutte le nozioni necessarie per questo fantastico mestiere. L'insegnante si è visto sin dal primo colloquio conoscitivo, che è una persona molto competente e sa bene cosa deve far trasmettere e spiegare. Ma non si limita solo a questo, mi è stato anche d'aiuto quando c'erano argomenti che non avevo compreso, offrendo continuo supporto anche post corso. In poche parole, questo corso è davvero un esperienza unica e imperdibile.

Foto di Domenico Nicolosi Domenico Nicolosi Aspiring Front-End Developer

Michele mi ha davvero aiutato a fare un salto di qualità nel campo dello sviluppo web. Grazie a lui, ho imparato moltissimo sulle principali tecnologie dello sviluppo Frontend. Quello che ho apprezzato di più è il modo in cui riesce a spiegare concetti anche complessi in modo chiaro e comprensibile, chiarendomi diversi aspetti dello sviluppo che prima mi creavano confusione. Dopo i suoi insegnamenti ho notato un grande miglioramento nelle mie competenze tecniche che mi hanno aiutato a fare un salto di qualità nel mio lavoro. Per quella che è la mia esperienza, consiglio il suo percorso a chiunque ne stia cercando uno che, non solo vi insegni le basi, ma vi aiuti anche a costruire una solida comprensione dello sviluppo web moderno.

Foto di Matteo Luzzi Matteo Luzzi Front-End Developer at BcSoft

Ho avuto l'onore ed il privilegio di poter lavorare con Michele. Michele è un'eccellente collega di lavoro che si impegna costantemente per il raggiungimento dell'obiettivo. Un collega molto disponibile e soprattutto un ottimo web developer al passo con le tecnologie più moderne.

Foto di Marco Concas Marco Concas Backend Developer

Prima di iniziare, chiariamo gli ultimi dubbi.

01 Posso seguire il corso se non ho mai usato React?
Sì, React viene introdotto dalle basi: progetto con Vite, JSX, componenti e rendering. Servono però conoscenze di JavaScript e TypeScript, oltre alle basi di HTML e CSS. Devi saper lavorare con funzioni, array, oggetti, Promise e fetch; useremo anche interfacce e generics.
02 Il codice è scritto in JavaScript o in TypeScript?
Il percorso usa React con TypeScript fin dalla creazione del progetto con Vite. Applichiamo i tipi a props, eventi, componenti, hook e HOC, riutilizzando anche quelli forniti da React.
03 Quali progetti realizziamo?
Fetch User per richieste e custom hook, Todo App per componenti, stato, form, Context, routing e deploy, ed Ecommerce per prodotti, categorie, carrello, API e persistenza locale. Il programma comprende esercizi e lezioni con le relative soluzioni.
04 L'Ecommerce comprende pagamenti e autenticazione completa?
Il progetto realizza le funzionalità frontend usando Fake Store API e localStorage. Non include un backend, un database o pagamenti reali. C'è un modulo separato con esempi di route guard, login, logout e ruoli: non equivale a un sistema completo di autenticazione.
05 Che rapporto c’è con Frontend Generator?
È il programma React incluso anche in Frontend Generator. Puoi seguirlo come corso dedicato se hai già le basi di JavaScript e TypeScript; se possiedi il percorso completo, controlla i contenuti del tuo accesso prima di acquistarlo separatamente.
06 Per quanto tempo posso accedere al corso?
L'accesso al corso e ai suoi aggiornamenti non scade: puoi seguire le lezioni con i tuoi tempi e tornare sui contenuti quando vuoi.
07 Il corso è coperto da garanzia?
Sì. Hai 14 giorni per provare il corso e, se non fa per te, puoi richiedere il rimborso secondo i termini e le condizioni.