Impara e pratica React

Impara React scrivendo codice. Questo tutorial su React JS ti porta dalla prima riga di JSX a Hooks, gestione dello stato e app complete; ogni componente che scrivi viene visualizzato direttamente sul tuo telefono in un’anteprima live.

88 corsi e 324 lezioni interattive, dai livelli A1 a C1. Leggi un breve concetto, scrivi codice reale, tocca Esegui e guarda il risultato. Non servono laptop né configurazioni.

SCRIVI CODICE SUL TUO TELEFONO

• Un editor di codice pensato per JSX, con un’anteprima live che visualizza il tuo componente nell’app

• Il runtime (ReactDOM e Babel) è incluso nell’app, quindi il tuo codice viene eseguito sul dispositivo, non su un server

• Progetti con più file: importa un componente in un altro, come nelle app reali

• Tocca il pulsante visualizzato, scrivi nel modulo e osserva la UI reagire

IL LABORATORIO

• Hooks Lab: osserva ogni cambiamento di stato e ogni nuovo rendering mentre avviene

• Manopole per le props: modifica una prop con un cursore e osserva l’aggiornamento del componente

• Profiler del rendering e timeline dello stato (Pro): scopri quale componente è stato nuovamente renderizzato e perché, poi torna indietro nella cronologia dello stato

PASSO DOPO PASSO, DA PRINCIPIANTE A ESPERTO

• Basi: JSX, componenti, props, stato, eventi, liste e chiavi, rendering condizionale

• Hooks: useState, useEffect, useRef, useReducer, Hooks personalizzati, useLayoutEffect e altro

• Moduli e convalida, React Hook Form, input controllati e non controllati

• Gestione dello stato: Context, Redux Toolkit e RTK Query, Zustand e Jotai

• React Router, recupero dati, TanStack Query, SWR e UI ottimistica

• TypeScript, testing, Storybook, accessibilità e sicurezza

• Prestazioni: memoizzazione, suddivisione del codice, Suspense, transizioni, liste virtualizzate

• React 19 e Server Components, SSR e hydration, streaming

• Next.js App Router, recupero dati e autenticazione

• Fondamenti di React Native per sviluppatori web

• Deployment, micro-frontend e federazione di moduli

COSTRUISCI PROGETTI REALI

20 progetti guidati, un piccolo passo alla volta: un pulsante Mi piace, schede profilo, un calcolatore di mance, un gioco a quiz, un cronometro, un modulo di registrazione, un carrello, un carosello di immagini, una lista paginata, un’app di cose da fare e altro. Ogni passaggio verifica che il tuo componente funzioni davvero prima di procedere.

ESERCITATI FINCHÉ NON TI RESTA

• 30 missioni di coding (facili, medie e difficili) su Hooks, rendering, moduli, Context e prestazioni

• UI Match: ricostruisci un componente obiettivo e ottieni un punteggio per struttura, stile e testo

• Bug Hunt: trova e correggi il bug in un componente non funzionante

• Component Recall: riscrivi la parte mancante nel codice che hai già fatto funzionare, con ripetizione dilazionata

• Quiz con 50 domande, 50 domande da colloquio e un foglio riassuntivo

• Sfida quotidiana, serie consecutive, XP e classifica

MENTOR AI (PRO)

Bloccato su un Hook o un errore? Chiedi al mentor AI una spiegazione chiara, lascia che AI esamini il tuo codice e suggerisca una correzione, oppure genera una lezione personalizzata su qualsiasi argomento.

CERTIFICATO (PRO)

Supera l’esame finale e ottieni un certificato da condividere.

GRATUITO E PRO

Gratis: il primo corso, un progetto guidato, 2 missioni di coding, l’editor di codice con anteprima live, Hooks Lab, le manopole per le props, Bug Hunt e 3 controlli UI Match al giorno. La versione gratuita mostra annunci.

Pro: tutti gli 88 corsi, tutti i progetti e le missioni, il mentor AI, il profiler del rendering e la timeline dello stato, l’esame per il certificato e niente annunci.

L’app è disponibile in 22 lingue.

React è un marchio di Meta Platforms, Inc. Next.js è un marchio di Vercel, Inc. Questa è un’app indipendente per l’apprendimento, non affiliata né approvata da Meta o Vercel.

Informativa sulla privacy: https://www.coddykit.com/terms/privacy-policy