Imparare React: Corso Code
Imparare React: Corso Code — Impara a programmare in React scrivendo JSX ed eseguendolo sul tuo telefono
Imparare React: Corso Code è un’app gratuita con upgrade Pro per iOS e Android che insegna la programmazione in React ai principianti con una conoscenza di base di HTML, CSS o JavaScript e agli sviluppatori che passano da un altro framework. Scrivi JSX in un editor di codice, tocca Esegui e guarda il tuo componente visualizzato in un’anteprima interattiva direttamente nell’app. 88 corsi e 324 lezioni ti accompagnano dal primo componente fino agli hook e alla gestione dello stato, arrivando a Next.js, con 20 progetti guidati lungo il percorso.
- Prezzo
- Gratuita, upgrade Pro
- Piattaforme
- iOS e Android
- Lingue
- 22
- Classificazione per età
- 4+
- Versione
- 82.6.1
- Requisiti
- iOS 15.1 o versioni successive
- App Store
- 3.8 ★ (4)
Il tuo componente viene visualizzato sul telefono, non su un server.
Il runtime, ReactDOM e Babel sono inclusi nell’app, quindi lo JSX che scrivi viene compilato e visualizzato sul dispositivo. Puoi toccare il pulsante che hai appena creato, digitare nel modulo e vedere l’interfaccia reagire: è il ciclo di feedback che rende finalmente comprensibili gli hook.
Cos'è
Imparare React: Corso Code è un corso di React gratuito con upgrade Pro per iOS e Android, con 88 corsi e 324 lezioni interattive che vanno dalla prima riga di JSX agli hook, alla gestione dello stato, a React 19 e al Next.js App Router. L’editor integrato compila il codice sul dispositivo e visualizza il componente in un’anteprima interattiva, mentre 20 progetti guidati verificano ogni passaggio prima di farti proseguire. È un’app di apprendimento indipendente e non è affiliata a Meta o Vercel.
Dentro l'app
Come si presenta
Il corso
Cosa comprende il corso React
88 corsi tratti dall'elenco dell'app, ordinati nel modo in cui di solito si affronta React per la prima volta.
React Kickoff, JSX e Props & Composition
Componenti, UI dichiarativa e funzionamento degli aggiornamenti del DOM da parte di React, poi regole di JSX, rendering degli elenchi e passaggio dei dati verso il basso con le props.
State, Events, Forms e useRef
useState e gestione degli eventi, moduli controllati con validazione e useRef per i valori e l'accesso al DOM che non attivano un rendering.
useEffect, Data Fetching e Custom Hooks
Quando vengono eseguiti gli effects, gli array delle dipendenze, gli stati di caricamento ed errore per le chiamate API e l'estrazione della logica riutilizzabile nei propri hooks.
Context, Redux Toolkit e Zustand
Condivisione dello state senza prop drilling con Context e useReducer, poi Redux Toolkit con RTK Query, Zustand e Jotai per le app più grandi.
Routing, React Query e Forms at Scale
Routing lato client e pattern di React Router, stato del server con TanStack Query e SWR, React Hook Form e UI ottimistica.
Performance, Testing e TypeScript
Rendering e memoisation, code splitting, elenchi virtualizzati, testing con React Testing Library e tipizzazione di componenti e hooks.
React 19, Server Components e Next.js
Server Components e Actions, SSR e hydration, poi Next.js App Router con recupero dei dati, caching e autenticazione.
Come funziona
Come funziona una lezione
Una lezione presenta un concetto breve seguito subito dal codice che scrivi ed esegui, così l’idea e il risultato appaiono nella stessa schermata.
Leggi un concetto
Apri un corso dal percorso di apprendimento e leggi una breve lezione, ad esempio su come vengono aggiornati gli stati o sul perché una lista ha bisogno delle key. La panoramica del corso indica quali lezioni sono gratuite, così puoi vedere il formato prima di decidere.
Scrivi JSX e tocca Esegui
Scrivi il componente nell’editor di codice ed eseguilo. L’anteprima interattiva visualizza il tuo componente direttamente nell’app, così puoi fare clic sul pulsante, digitare nel campo e vedere che cosa fa il codice.
Verifica e poi costruisci sopra
Quiz, missioni di programmazione e progetti guidati verificano che il concetto sia stato assimilato, mentre il mentore IA spiega un hook o un errore che non riesci a interpretare. Bug Hunt e UI Match ti permettono di esercitarti una seconda volta sul concetto.
Cosa include
Che cosa include l’app
88
Corsi, 324 lezioni
Da JSX, props e stato fino a hook personalizzati, moduli, Context e Redux Toolkit, per arrivare a Server Components, SSR e al Next.js App Router, organizzati dal livello A1 al C1.
Live
Editor con anteprima interattiva
Un editor di codice pensato per JSX, con il componente visualizzato direttamente nell’app. I progetti con più file ti permettono di importare un componente in un altro, proprio come nelle app reali.
20
Progetti guidati
Crea un pulsante Mi piace, schede profilo, un calcolatore di mance, un gioco a quiz, un carrello e molto altro, un piccolo passaggio alla volta. Ogni passaggio verifica che il componente funzioni davvero.
Lab
Hooks Lab e manopole per le props
Guarda ogni cambiamento dello stato e ogni ri-rendering mentre avvengono, e modifica una prop con un cursore per vedere il componente aggiornarsi. Un profiler dei render e una timeline dello stato fanno parte di Pro.
30
Missioni di programmazione
Missioni di livello facile, medio e difficile su hook, rendering, moduli, Context e prestazioni, oltre a UI Match, Bug Hunt e Component Recall con ripetizione dilazionata.
IA
Mentore IA
Chiedi una spiegazione, lascia che l’IA esamini il tuo codice e suggerisca una correzione, oppure genera una lezione personalizzata su qualsiasi argomento. Il mentore e l’esame per il certificato fanno parte di Pro.
Contesto
Che cosa devi davvero capire per scrivere codice React e in quale ordine?
React è una libreria JavaScript per creare interfacce utente a partire da componenti piccoli e riutilizzabili, che si ridisegnano quando cambiano i dati. La maggior parte dei principianti non si blocca sulla sintassi, ma sul modello che c’è alla base: che cos’è un render, che cosa viene considerato stato e quando vengono eseguiti gli effetti. Imparare questi concetti nell’ordine giusto, con qualcosa sullo schermo da testare ogni volta, è più efficace che leggerli tutti insieme.
Componenti e propsl’unità riutilizzabile
Un componente è una funzione che restituisce una parte dell’interfaccia, mentre le props sono gli input che riceve dal componente padre. Poiché i dati fluiscono verso il basso attraverso le props, puoi leggere un componente e prevedere che cosa visualizzerà.
Statociò che cambia nel tempo
Lo stato è un dato che un componente conserva tra un render e l’altro, come il testo in un campo o l’indicazione che un menu è aperto. L’aggiornamento dello stato programma un nuovo render: è il meccanismo alla base di quasi tutte le schermate interattive.
Hook ed effettidove i principianti si bloccano
Hook come useState, useRef e useReducer permettono a un componente di mantenere lo stato e di accedere al DOM. useEffect esegue il codice dopo un render, e un array di dipendenze errato è la causa più comune di loop e valori obsoleti.
Rendering e ri-renderingperché l’app sembra lenta
Un componente esegue nuovamente il render quando cambiano il suo stato o le sue props, e lo stesso accade ai componenti al suo interno. Capire che cosa ha attivato un render è il punto di partenza per ogni intervento sulle prestazioni, dalla memoizzazione al code splitting.
Adatta
A chi è adatta — e a chi no
Fa al caso tuo se
- Conosci un po' di HTML, CSS o JavaScript e vuoi iniziare React nel modo giusto
- Sei uno sviluppatore che proviene da un altro framework e deve passare rapidamente a React
- Impari meglio quando il risultato appare sullo schermo nel momento stesso in cui esegui il codice
- Stai creando un portfolio di piccoli progetti e vuoi seguire passaggi guidati
- Ti stai preparando per un colloquio frontend e vuoi esercitarti con delle domande
Non è lo strumento giusto se
- Non hai mai visto JavaScript, perché il corso ne presuppone una conoscenza di base
- Vuoi creare e distribuire un progetto completo, un'attività per cui serve comunque un laptop
- Ti aspetti che tutto sia gratuito, mentre il primo corso è gratuito e Pro sblocca il resto
- Vuoi un corso ufficiale del team React, perché questa è un'app indipendente
Domande
Domande frequenti
Si può imparare a programmare in React su un telefono?
Le idee fondamentali, i componenti, le props, lo state e gli hooks si possono imparare su un telefono, se puoi eseguire ciò che scrivi. Imparare React: Corso Code include ReactDOM e Babel, così il tuo JSX viene renderizzato in un'anteprima live sul dispositivo. Un laptop diventa utile quando inizi a creare e distribuire un progetto più grande.
Devo conoscere JavaScript prima di imparare React?
Conoscerne un po' aiuta. Imparare React: Corso Code è pensato per chi conosce almeno un po' di HTML, CSS o JavaScript, ad esempio variabili, funzioni e array. Se non hai mai scritto JavaScript, imparalo prima, perché le lezioni di React presuppongono che tu sappia leggerlo.
Qual è la differenza tra props e state?
Le props sono input che un componente riceve dal proprio parent e non dovrebbe modificare, mentre lo state è un dato di proprietà del componente che viene aggiornato nel tempo. In Imparare React: Corso Code puoi vedere la differenza nell' Hooks Lab, che mostra ogni modifica dello state e ogni nuovo rendering, e nei props knobs, che ti permettono di modificare una prop con uno slider.
L'app insegna hooks come useEffect?
Sì. Imparare React: Corso Code tratta useState, useEffect, useRef, useReducer, custom hooks e useLayoutEffect. Le lezioni dedicate spiegano quando vengono eseguiti gli effects, gli array delle dipendenze e gli errori più comuni, con una modalità Bug Hunt per trovare i bug nei componenti non funzionanti.
React è uguale a React Native e l'app insegna entrambi?
No. React è la libreria per creare interfacce utente, mentre React Native usa le stesse idee per creare app mobili. Imparare React: Corso Code insegna prima React per il web, mentre un corso sui fondamenti di React Native aiuta gli sviluppatori web a trasferire queste competenze nel mobile.
Imparare React: Corso Code tratta Next.js e React 19?
Sì. I corsi trattano le funzionalità di React 19 e i Server Components, SSR e hydration, lo streaming e Next.js App Router con recupero dei dati, caching e autenticazione. È disponibile anche un corso sui fondamenti di React Native per gli sviluppatori web.
Che tipo di progetti posso creare?
Sono disponibili 20 progetti guidati, costruiti un piccolo passaggio alla volta: un pulsante Mi piace, schede profilo, un calcolatore di mance, un gioco a quiz, un cronometro, un modulo di iscrizione, un carrello, un carosello di immagini, un elenco paginato e un'app todo. Ogni passaggio verifica che il tuo componente funzioni prima di permetterti di continuare.
Imparare React: Corso Code è gratuito?
Il download è gratuito. La versione gratuita include il primo corso, un progetto guidato, due missioni di coding, l'editor di codice con anteprima live, Hooks Lab, props knobs, Bug Hunt e tre verifiche UI Match al giorno, oltre a mostrare annunci. Pro sblocca tutti i corsi, i progetti e le missioni, il mentore IA, il render profiler e l'esame per il certificato, oltre a rimuovere gli annunci.
È disponibile un certificato o una preparazione ai colloqui?
Superando l'esame finale ottieni un certificato condivisibile, incluso in Pro. Per i colloqui sono disponibili 50 domande da colloquio, un quiz di 50 domande e una cheat sheet per ripassare i concetti fondamentali.
Il codice viene eseguito su un server?
No. Il runtime è incluso nell'app, quindi il tuo codice viene compilato e renderizzato sul dispositivo. Per questo puoi toccare il pulsante che hai creato e vedere l'interfaccia reagire direttamente nell'anteprima.
Quali linguaggi e piattaforme supporta?
Imparare React: Corso Code funziona su iOS e Android ed è disponibile in 22 lingue. Ha una classificazione 4+ e richiede iOS 15.1 o versioni successive su iPhone.
Inizia
Esegui il rendering del tuo primo componente oggi
Gratis per iniziare su iOS e Android, in 22 lingue.
Altro da CoddyKit
Disponibile su iOS e Android.