0Pricing
React Academy icon

React Academy

JSXFrontendWebMobileBeginner

Padroneggia ReactJS per costruire interfacce utente dinamiche con ReactJS Academy.

🤖 Alimentato da IA📚 88 corsi👥 100.000+ studenti⭐ Valutazione 4,9
Panoramica del Corso

Costruisci Interfacce Reali con React

React è la libreria JavaScript che definisce come la maggior parte delle UI di produzione viene costruita oggi — da app a pagina singola e siti Next.js fino ad applicazioni cross-platform mobile e desktop. Questo percorso copre la disciplina completa: architettura dei componenti, gestione dello stato, data fetching, performance, testing e deployment. Si basa su come React funziona realmente — il reconciler, il fiber model, la semantica degli hooks — non solo sulla sua API di superficie.

Cosa Imparerai

Inizierai con JSX, props, state e controlled components, poi passerai a useEffect, useRef e useReducer. I corsi pratici coprono il routing con React Router v6, la gestione dei form con React Hook Form, lo state del server con React Query e SWR, lo state globale con Redux Toolkit, Zustand e Jotai. Lavorerai con TypeScript in React, scriverai test di integrazione e E2E, costruirai design system con Storybook, gestirai UI real-time su WebSocket e distribuirai API type-safe con tRPC. Il percorso include anche Next.js App Router, server component, server action e autenticazione con NextAuth.js.

Il Percorso di Apprendimento

Novantacinque corsi vanno da A1 a C1. I corsi A1 e A2 stabiliscono i fondamenti di React, il rendering JSX, le animazioni CSS, la persistenza local storage e la dark mode. I corsi B1 costruiscono sicurezza con pattern context, i18n, React Spring, Framer Motion, drag-and-drop con dnd-kit e tabelle dati complesse con TanStack Table. I corsi B2 affrontano rendering e memoization, Suspense, code splitting, React Native per sviluppatori React, deployment su Vercel e AWS e Electron per app desktop. Il livello C1 conclude con argomenti avanzati: Architettura Micro-Frontend, SSR e Hydration Deep Dive, Module Federation, Islands Architecture con Astro, integrazione WebAssembly, Edge Rendering con Cloudflare Workers e OpenTelemetry per l'osservabilità frontend.

Come Funziona

Ogni corso è diviso in lezioni brevi e focalizzate che completi nell'editor di codice integrato con feedback in tempo reale. Un tutor AI è disponibile ogni volta che rimani bloccato su un concetto o un test non passa. Puoi affrontare il percorso sequenzialmente o saltare al livello che corrisponde alla tua esperienza attuale.

Inizia a Imparare →

Come Imparerai

🎯
Lezioni Interattive
Esercizi di codifica pratici con feedback in tempo reale
🤖
Tutor IA
Ricevi aiuto istantaneo dalla nostra IA quando sei bloccato
💻
Editor Integrato
Scrivi ed esegui il codice direttamente nel tuo browser
🏆
Certificato
Guadagna un certificato al completamento del corso
Curriculum

88 Corsi

Ogni corso nel percorso di apprendimento React Academy.

01

Avvio a React: concetti e configurazione

A13 lezioni

Inizi con i fondamenti di React: componenti, UI dichiarativa e aggiornamento efficiente del DOM tramite diffing. Configuri poi un progetto…

02

Basi di JSX e rendering

A13 lezioniPRO

Impari le regole di JSX: espressioni e attributi, restituzione di fragment, rendering di liste con key, condizionali semplici e opzioni di…

03

React DevTools e debugging

A24 lezioniPRO

Padroneggi l'estensione del browser React DevTools per ispezionare gli alberi dei componenti, analizzare il rendering ed eseguire efficacem…

04

Animazioni e transizioni CSS in React

A24 lezioniPRO

Crei animazioni fluide di entrata, uscita e cambiamento di stato in React usando transizioni CSS e keyframe, senza bisogno di librerie di a…

05

Sollevamento dello stato e soluzioni al prop drilling

A24 lezioniPRO

Condivida lo stato tra componenti fratelli sollevandolo al componente comune e comprenda quando il prop drilling diventa un problema da ris…

06

localStorage e persistenza dello stato

A24 lezioniPRO

Conservi lo stato di React tra i ricaricamenti della pagina usando localStorage, gestisca la sincronizzazione tra schede e scelga l’API di…

07

Modalità scura con React

A24 lezioniPRO

Costruisca un sistema robusto per la modalità scura usando proprietà CSS personalizzate, React context e la media query prefers-color-schem…

08

Props e composizione

A23 lezioniPRO

Passi i dati con le props , imposti semplici defaults tramite destructuring, componga le UI con children e preferisca la composizione all'e…

09

Nozioni essenziali su stato ed eventi

A23 lezioniPRO

Padroneggi useState e la gestione degli eventi: aggiorni correttamente lo stato, gestisca onClick/onChange e si prepari a usare input contr…

10

Moduli e validazione (introduzione)

A23 lezioniPRO

Impari a creare moduli controllati con più input, ad applicare una validazione di base e a gestire gli invii in modo fluido in React.

11

Fondamenti del routing

A23 lezioniPRO

Comprenda il routing lato client: come le SPA cambiano vista senza ricaricare completamente la pagina, i percorsi e i parametri di base e g…

12

useRef e il DOM

A23 lezioniPRO

Padroneggi useRef : conservi i valori tra i render senza causare nuovi render, acceda ai nodi DOM e gestisca i timer in sicurezza.

13

Linting e convenzioni

A23 lezioniPRO

Mantenga pulito il codice con ESLint e le regole per React e lo formattti automaticamente con Prettier . Aggiunga gli script e risolva rapi…

14

Componenti controllati e non controllati

A22 lezioniPRO

Padroneggi gli input controllati e non controllati: sappia quando scegliere ciascun approccio, usi semplici pattern con ref e imposti valor…

15

Strict Mode e buone pratiche in React

B14 lezioniPRO

Scopra cosa fa StrictMode, quali avvisi segnala e quali convenzioni di codifica rendono più semplici da mantenere le applicazioni React.

16

Portals e modali in React

B14 lezioniPRO

Esegua il rendering dei contenuti al di fuori della gerarchia DOM principale usando i React Portals per creare modali, tooltip e overlay.

17

API React Children e pattern degli slot

B14 lezioniPRO

Lavori con props.children e le utilità React.Children e implementi API flessibili per componenti basate sugli slot.

18

Componenti non controllati e caricamento di file

B14 lezioniPRO

Utilizzi input non controllati con useRef, legga i valori degli input file e gestisca i flussi di caricamento dei file in React.

19

Pattern e prestazioni di React Context

B14 lezioniPRO

Progetti provider Context che riducano al minimo i re-rendering usando memoizzazione, suddivisione dei context e pattern basati sui seletto…

20

Internazionalizzazione (i18n) in React

B14 lezioniPRO

Aggiunga il supporto multilingue alle applicazioni React usando react-i18next, gestisca i file di traduzione e implementi il cambio di loca…

21

API del browser in React

B14 lezioniPRO

Integri potenti API del browser — Clipboard, Geolocation, Notifications e IntersectionObserver — nei componenti React, gestendo correttamen…

22

Debouncing e throttling in React

B14 lezioniPRO

Prevenga rendering ripetuti eccessivi e chiamate API implementando pattern di debounce e throttle come hook React riutilizzabili per eventi…

23

Autocomplete dei form e ricerca type-ahead

B14 lezioniPRO

Costruisca da zero componenti autocomplete accessibili e navigabili da tastiera usando stato e ref di React, senza bisogno di librerie.

24

Gestione dei moduli con React Hook Form

B14 lezioniPRO

Crei moduli React flessibili e performanti usando React Hook Form: registrazione, convalida, visualizzazione degli errori e integrazione co…

25

Gestione dello stato con Zustand

B14 lezioniPRO

Utilizzi Zustand per gestire lo stato globale nelle applicazioni React: store, action, selettori, persistenza e integrazione con i devtools.

26

Pattern avanzati di React Router v6

B14 lezioniPRO

Vada oltre le route di base con layout annidati, loader, action, route protette e gestione dello stato nei parametri di ricerca.

27

TypeScript con React: tipizzazione di componenti e hook

B14 lezioniPRO

Aggiunga TypeScript ai progetti React: tipizzi props, eventi, hook, context e componenti generici con sicurezza.

28

TanStack Table: tabelle di dati complesse

B14 lezioniPRO

Costruisca tabelle di dati pronte per la produzione con ordinamento, filtraggio, paginazione e selezione delle righe usando la potente arch…

29

Jotai: gestione atomica dello stato

B14 lezioniPRO

Gestisca lo stato di React con il modello atomico essenziale di Jotai: atomi componibili che derivano valori, gestiscono operazioni asincro…

30

SWR: recupero dati di Vercel

B14 lezioniPRO

Usi la strategia stale-while-revalidate di SWR per recuperare dati in modo rapido e affidabile, con revalidazione automatica, mutazioni e s…

31

dnd-kit: drag and drop accessibile

B14 lezioniPRO

Costruisca interfacce React accessibili e adatte al touch per il drag and drop con dnd-kit: liste ordinabili, bacheche kanban e interazioni…

32

React Spring: animazioni basate sulla fisica

B14 lezioniPRO

Crei animazioni fluide basate sulla fisica delle molle in React usando react-spring, dalle semplici transizioni di valori alle interazioni…

33

Server-Sent Events e polling in React

B14 lezioniPRO

Implementi flussi di dati in tempo reale in React usando Server-Sent Events e strategie di polling, comprendendo i compromessi rispetto ai…

34

Approfondimento su useEffect

B13 lezioniPRO

Comprenda useEffect : quando viene eseguito rispetto al render, come gli array delle dipendenze ne controllano l'esecuzione e come scrivere…

35

Pattern per il recupero dei dati

B13 lezioniPRO

Progetti interfacce dati resilienti: gestisca gli stati di caricamento , errore , vuoto e successo con feedback chiari e skeleton leggeri.

36

Context e useReducer

B13 lezioniPRO

Condivida lo stato tra componenti distanti con Context per evitare il prop drilling; configuri un Provider e legga i valori tramite useCont…

37

Hook personalizzati

B13 lezioniPRO

Estragga la logica riutilizzabile in hook personalizzati : definisca parametri chiari, restituisca valori/azioni stabili e mantenga puliti…

38

Nozioni essenziali sull'accessibilità

B13 lezioniPRO

Crei interfacce inclusive: usi semantica reale, etichette e ruoli chiari e gestisca il focus da tastiera per una navigazione fluida.

39

Animazioni con Framer Motion

B14 lezioniPRO

Aggiunga animazioni e transizioni fluide alle applicazioni React con Framer Motion: componenti motion, varianti, gesti e animazioni del lay…

40

Error Boundary e robustezza

B13 lezioniPRO

Intercetti gli errori durante il render con gli Error Boundary, mostri fallback sicuri e mantenga reattivo il resto dell'app.

41

TypeScript con React (facoltativo)

B13 lezioniPRO

Aggiunga tipi essenziali ai componenti React. Inizi dalle props, quindi estragga generics riutilizzabili per mantenere il codice dell'inter…

42

Struttura del progetto e convenzioni

B13 lezioniPRO

Organizzi le app React: cartelle strutturate per funzionalità, piccole primitive UI distinte dai componenti compositi, hook e test affianca…

43

Liste virtualizzate con react-window

B24 lezioniPRO

Renderizzi migliaia di elementi senza cali di prestazioni usando react-window per virtualizzare l’output del DOM e visualizzare solo ciò ch…

44

Pattern asincroni in React: Promise e concorrenza

B24 lezioniPRO

Gestisca le operazioni asincrone in React secondo le pratiche idiomatiche con useEffect, useTransition, useDeferredValue e Suspense.

45

Pattern React: render props e HOC

B24 lezioniPRO

Comprenda render props e componenti di ordine superiore come classici pattern di riutilizzo del codice, precedenti alla loro sostituzione c…

46

useLayoutEffect e useEffect a confronto

B24 lezioniPRO

Comprenda la differenza sottile ma fondamentale tra useEffect e useLayoutEffect, cioè quando ciascuno viene eseguito rispetto al commit del…

47

Redux Toolkit e RTK Query

B24 lezioniPRO

Gestisca lo stato complesso dell'app con slice e thunk di Redux Toolkit e usi RTK Query per il caching e la sincronizzazione dello stato de…

48

Server Components e funzionalità di React 19

B24 lezioniPRO

Comprenda i React Server Components, l'hook use(), le Actions e le altre API di React 19 che cambiano il modo in cui fluiscono i dati nelle…

49

React Query: gestione dello stato del server

B24 lezioniPRO

Gestisca lo stato del server con TanStack Query: recupero, caching, aggiornamento in background, mutazioni e paginazione.

50

Testing React: integrazione ed E2E

B24 lezioniPRO

Scriva test di integrazione con React Testing Library e test end-to-end con Playwright per convalidare i flussi reali degli utenti.

51

Design system dei componenti e Storybook

B24 lezioniPRO

Documenti, sviluppi e testi i componenti UI React in isolamento usando Storybook con storie CSF3 e addon.

52

Interfacce in tempo reale con WebSocket e React

B24 lezioniPRO

Crei interfacce React aggiornate in tempo reale usando WebSocket e librerie come Socket.IO per chat, notifiche e dashboard.

53

tRPC: API type-safe end-to-end

B24 lezioniPRO

Costruisca API completamente type-safe senza schemi né generazione di codice usando tRPC, condividendo automaticamente i tipi tra frontend…

54

Apollo Client e React

B24 lezioniPRO

Integri GraphQL nelle applicazioni React con Apollo Client: esegua query e mutazioni, gestisca la cache e mantenga l'interfaccia sincronizz…

55

UI ottimistica e pattern per le mutazioni

B24 lezioniPRO

Costruisca interfacce rapide e reattive che mostrano subito i risultati prima della conferma del server, con rollback corretto in caso di e…

56

Pubblicazione di librerie di componenti React

B24 lezioniPRO

Impacchetti e pubblichi librerie di componenti React riutilizzabili su npm, gestendo output duale ESM/CJS, dipendenze peer, tree shaking e…

57

Rendering e memoizzazione

B23 lezioniPRO

Comprenda le fasi di render e commit di React, quando i componenti si aggiornano e quando la memoizzazione è utile.

58

Transizioni e Suspense (nozioni di base)

B23 lezioniPRO

Impari le basi dell'interfaccia concorrente con useTransition : mantenga reattiva la digitazione, mostri un indicatore di operazione in cor…

59

Suddivisione del codice e strategia degli asset

B23 lezioniPRO

Carichi solo ciò che serve suddividendo il codice di schermate e widget. Usi React.lazy e Suspense per distribuire app più rapide da percep…

60

Test dei componenti React

B23 lezioniPRO

Configuri i test con Vitest/Jest e React Testing Library ; esegua il rendering dei componenti, cerchi per ruolo/etichetta ed esegua i test…

61

Fondamenti dell'App Router di Next.js

B24 lezioniPRO

Crei applicazioni web full-stack con l'App Router di Next.js 14+: routing basato sui file, layout, componenti server e metadati.

62

Recupero e caching dei dati in Next.js

B24 lezioniPRO

Recuperi, memorizzi nella cache e rivalidi i dati nell'App Router di Next.js usando le opzioni di fetch, unstable_cache e la rivalidazione…

63

Autenticazione in Next.js con NextAuth.js

B24 lezioniPRO

Aggiunga l'autenticazione alle applicazioni Next.js usando Auth.js (NextAuth v5): provider OAuth, credenziali, sessioni e protezione delle…

64

Fondamenti di React Native per sviluppatori React

B24 lezioniPRO

Trasferisca le Sue conoscenze di React al mobile imparando primitive, stili, navigazione e API native dei dispositivi in React Native.

65

Distribuzione delle app React: Vercel, AWS e Docker

B24 lezioniPRO

Distribuisca applicazioni React e Next.js in produzione usando Vercel, AWS S3/CloudFront e container Docker con pipeline CI/CD.

66

React Server Actions: form e mutazioni

B24 lezioniPRO

Usi le React 19 Server Actions e le form actions di Next.js per gestire le mutazioni lato server, eliminando le route API nei comuni patter…

67

Sicurezza delle applicazioni React

B24 lezioniPRO

Rafforzi le applicazioni React contro XSS, CSRF e altre vulnerabilità, con indicazioni pratiche su Content Security Policy, gestione dei se…

68

Sistemi di design token per React

B24 lezioniPRO

Costruisca un sistema scalabile di design token per librerie di componenti React multi-tema, dalla definizione dei token alle variabili CSS…

69

Electron.js: applicazioni desktop con React

B24 lezioniPRO

Costruisca applicazioni desktop multipiattaforma usando Electron con un frontend React, occupandosi di comunicazione IPC, API native e pacc…

70

Componenti composti

B23 lezioniPRO

Costruisca componenti composti: il componente padre fornisce il context e i figli lo utilizzano per API flessibili.

71

Moduli su larga scala (vanilla o con helper leggeri)

B23 lezioniPRO

Costruisca moduli estesi con elementi piccoli e robusti: array di campi, sezioni dinamiche e flussi di validazione semplici.

72

Routing avanzato

B23 lezioniPRO

Vada oltre le basi: layout annidati, loader concettuali per le route e semplici idee di prefetching per una navigazione più fluida.

73

Stato del server e stato dell'interfaccia

B23 lezioniPRO

Capisca cosa appartiene alla cache del server e cosa è stato locale dell'interfaccia. Recuperi e aggiorni i dati evitando di mescolare le r…

74

Pattern per modali, toast e overlay

B23 lezioniPRO

Crei overlay accessibili: esegua il rendering tramite portal, mantenga il focus al loro interno e supporti la chiusura rapida con Esc o fac…

75

Build, analisi e distribuzione

B23 lezioniPRO

Prepari le app per la produzione: build di sviluppo e produzione, source map, semplici variabili d'ambiente e piccoli controlli per distrib…

76

useImperativeHandle e forwardRef

C14 lezioniPRO

Padroneggi le API imperative di React: esponga ai componenti padre i valori personalizzati dell’istanza di un componente usando forwardRef…

77

useSyncExternalStore: sottoscrizione a store esterni

C14 lezioniPRO

Impari a usare l’hook useSyncExternalStore di React 18, il modo corretto per sincronizzare i componenti React con fonti di stato esterne co…

78

Architettura micro-frontend con React

C14 lezioniPRO

Scomponga grandi frontend React in micro-frontend distribuiti indipendentemente usando Module Federation e single-spa.

79

Approfondimento su SSR e hydration in React

C14 lezioniPRO

Comprenda i meccanismi del rendering lato server, la hydration, la hydration selettiva e lo streaming di HTML con renderToPipeableStream di…

80

Pattern avanzati di TypeScript per React

C14 lezioniPRO

Porti a un livello superiore le Sue competenze di TypeScript per React con unioni discriminate, tipi mappati, tipi condizionali e API di co…

81

Prestazioni web: Core Web Vitals e React

C14 lezioniPRO

Misuri e migliori i Core Web Vitals (LCP, INP, CLS) nelle applicazioni React con strumenti di profilazione, analisi dei bundle e ottimizzaz…

82

Monorepo e Nx per progetti React

C14 lezioniPRO

Organizzi più applicazioni React e librerie condivise in un monorepo usando Nx, con pianificazione intelligente delle attività e CI basata…

83

Architettura Islands con Astro e React

C14 lezioniPRO

Superi l'hydration dell'intera pagina adottando l'Islands Architecture, eseguendo con Astro l'hydration selettiva dei soli componenti React…

84

Integrazione di React e WebAssembly

C14 lezioniPRO

Integri moduli WebAssembly nelle applicazioni React per attività ad alta intensità di calcolo, dai moduli Rust WASM alla memoria condivisa…

85

Edge rendering: Cloudflare Workers e React

C14 lezioniPRO

Distribuisca applicazioni React sull'edge con latenza inferiore al millisecondo usando Cloudflare Workers, streaming SSR e strategie di cac…

86

OpenTelemetry per l'osservabilità del frontend React

C14 lezioniPRO

Strumenti le applicazioni React con OpenTelemetry per raccogliere trace, misurare le prestazioni reali degli utenti e correlare gli eventi…

87

Streaming React e caricamento progressivo

C14 lezioniPRO

Usi lo streaming SSR di React 18 e Suspense per fornire progressivamente HTML al browser, migliorando le prestazioni percepite senza attend…

88

Module Federation con React

C14 lezioniPRO

Implementi Webpack Module Federation per creare e distribuire micro frontend React indipendentemente, condividendo dipendenze, stato e rout…

FAQ

Domande Frequenti

Il corso React Academy è gratuito?

Sì. Puoi iniziare il corso React Academy gratuitamente e completare le sue lezioni interattive senza costi. Un abbonamento PRO opzionale sblocca strumenti IA avanzati e un certificato condivisibile.

Serve esperienza precedente per imparare JSX?

No. Il corso inizia con i fondamenti e prosegue gradualmente verso argomenti più avanzati, quindi puoi iniziare anche senza alcuna esperienza precedente in JSX.

Come imparerò JSX su CoddyKit?

Impari facendo. Brevi lezioni interattive abbinano una spiegazione chiara a un esercizio di codifica pratico che gira in tempo reale, e un tutor IA disponibile 24/7 offre aiuto personalizzato quando rimani bloccato.

Ricevo un certificato per il completamento di React Academy?

Sì. Gli studenti PRO possono sostenere un esame e guadagnare un certificato condivisibile di completamento con un codice verificabile per il corso React Academy.

Posso imparare JSX dal mio telefono?

Sì. CoddyKit è disponibile sul web e come app native iOS e Android, quindi puoi imparare JSX su qualsiasi dispositivo e i tuoi progressi si sincronizzano tra loro.

Inizia React Academy Ora

Unisciti a migliaia di studenti che imparano la programmazione con lezioni potenziate dall'IA.

Inizia Gratis →Sfoglia Tutti i Corsi