Corso React in italiano

Introduzione a React

React è una libreria JavaScript open-source sviluppata da Facebook (Meta) per costruire interfacce utente interattive. È la tecnologia frontend più usata al mondo ed è alla base di app come Facebook, Instagram, WhatsApp Web e migliaia di applicazioni aziendali.

React introduce un approccio basato su componenti riutilizzabili: ogni pezzo dell'interfaccia (pulsante, menu, modulo) è un componente indipendente con la propria logica. Questo rende il codice più organizzato, testabile e scalabile.

Perché imparare React?

• 🏆 La libreria frontend più richiesta nelle offerte di lavoro
• ⚡ Virtual DOM per aggiornamenti ultra-veloci dell'interfaccia
• 🧩 Architettura a componenti riutilizzabili
• 🌍 Ecosistema enorme: React Router, Redux, Next.js, React Native
• 📱 Con React Native puoi creare app mobile iOS e Android

Guida introduttiva

Il modo più rapido per iniziare con React oggi è usare Vite, uno strumento di build moderno che crea in pochi secondi un progetto React pronto all'uso.

Creare un progetto React con Vite

Dopo aver eseguito questi comandi, apri il browser su http://localhost:5173 per vedere la tua app React in esecuzione.

Struttura base del progetto

Prima applicazione React

Il file main.jsx è il punto di ingresso: monta il componente radice nell'elemento HTML con id="root".

Render HTML

React renderizza i componenti nel DOM reale attraverso il Virtual DOM: una rappresentazione in memoria dell'interfaccia. Quando lo stato cambia, React calcola solo le differenze (diff) e aggiorna solo ciò che è necessario, rendendo le app molto performanti.

Virtual DOM vs DOM reale

Upgrade — React 18

React 18 (2022) ha introdotto importanti novità rispetto alle versioni precedenti. La più visibile è la nuova API createRoot che sostituisce il vecchio ReactDOM.render.

Novità di React 18

• Concurrent Mode: React può interrompere e riprendere il rendering per mantenere l'app reattiva
• Automatic Batching: gli aggiornamenti di stato multipli vengono raggruppati automaticamente
• useTransition e useDeferredValue: hook per gestire transizioni UI non urgenti
• Suspense migliorato: supporto per il data fetching asincrono

ES6 in React

React fa ampio uso delle funzionalità moderne di JavaScript (ES6+). Conoscerle è fondamentale per scrivere codice React idiomatico.

JSX — Introduzione

JSX (JavaScript XML) è un'estensione della sintassi JavaScript che permette di scrivere markup simile all'HTML direttamente nel codice JS. Babel lo compila in chiamate React.createElement().

Regole fondamentali JSX

• Ogni componente deve restituire un solo elemento radice (usa un <div> o un Fragment <>...</>)
• I tag vanno sempre chiusi: <br />, <img />
• Usa className invece di class
• Usa htmlFor invece di for

JSX — Espressioni

In JSX puoi inserire qualsiasi espressione JavaScript tra parentesi graffe {}. Puoi usare variabili, operazioni matematiche, chiamate a funzioni e operatori ternari.

JSX — Attributi

Gli attributi JSX seguono la convenzione camelCase. Molti attributi HTML hanno nomi diversi in JSX per evitare conflitti con parole riservate JavaScript.

JSX — If Statements

In JSX non puoi usare direttamente if dentro le parentesi graffe, ma hai tre alternative comuni:

Componenti

I componenti sono i mattoncini di React. Ogni componente è una funzione (o classe) che riceve dati in input (props) e restituisce JSX. I componenti si compongono tra loro per costruire interfacce complesse.

Class Components

Prima degli hook (React 16.8), i componenti con stato dovevano essere scritti come classi. Oggi si preferiscono i componenti funzionali con hook, ma è importante conoscere le classi per lavorare su codice legacy.

Ciclo di vita dei Class Components

Props

Le props (proprietà) sono il meccanismo con cui un componente genitore passa dati a un componente figlio. Le props sono immutabili: il figlio può leggerle ma non modificarle.

Props — Destructuring

Il destructuring ES6 rende il codice più pulito: invece di scrivere props.nome, puoi estrarre le proprietà direttamente nei parametri della funzione.

Props — Children

La prop speciale children contiene tutto ciò che viene scritto tra i tag di apertura e chiusura del componente. Permette di creare componenti "contenitore" generici.

Eventi

In React gli eventi si gestiscono con attributi camelCase e si passa una funzione handler (non una stringa). React utilizza un sistema di eventi sintetici che normalizza il comportamento cross-browser.

Rendering condizionale

React permette di mostrare o nascondere elementi in base a condizioni. Le tecniche principali sono l'operatore ternario, l'operatore && e le variabili JSX.

Liste

Per renderizzare liste di elementi si usa il metodo .map(). Ogni elemento della lista deve avere una prop key unica per aiutare React a identificare gli elementi nel Virtual DOM.

Form

In React i form si gestiscono con i componenti controllati: il valore dell'input è legato allo state, e ogni modifica aggiorna lo state tramite onChange. React diventa così la "fonte di verità" per i dati del form.

Form — Submit

Per gestire l'invio del form si usa l'evento onSubmit. È importante chiamare e.preventDefault() per impedire il ricaricamento della pagina.

Form — Textarea

In React, <textarea> funziona come un input normale: il valore è gestito tramite la prop value e onChange.

Form — Select

Un <select> controllato usa la prop value sul tag select (non selected sull'option).

Form — Input multipli

Con più input puoi gestire lo stato con un unico oggetto. Usa l'attributo name per identificare ogni campo e aggiornare la proprietà corrispondente nello state.

Form — Checkbox

Per le checkbox si usa la prop checked (booleano) invece di value.

Form — Radio

I radio button si gestiscono confrontando il valore dello state con il value di ogni radio.

Portals

I React Portals permettono di renderizzare un componente figlio in un nodo DOM diverso dal genitore. Sono utili per modali, tooltip e dropdown che devono "uscire" dal flusso DOM normale.

Suspense

React.Suspense permette di mostrare un contenuto di fallback (es. uno spinner) mentre un componente figlio viene caricato in modo asincrono. È usato con React.lazy() per il code splitting.

CSS Styling in React

React offre diversi approcci per aggiungere stili ai componenti. Ogni approccio ha i suoi punti di forza.

CSS Modules

I CSS Modules sono file CSS normali con l'estensione .module.css. Vite e Create React App li supportano nativamente. I nomi delle classi vengono trasformati in identificatori univoci, eliminando i conflitti.

CSS-in-JS

Le librerie CSS-in-JS come styled-components e Emotion permettono di scrivere CSS direttamente nel file JavaScript, con pieno supporto a props dinamiche, temi e pseudo-classi.

React Router

React Router è la libreria standard per il routing nelle app React. Permette di navigare tra "pagine" senza ricaricare il browser (Single Page Application).

Transitions — useTransition

L'hook useTransition (React 18) permette di marcare alcuni aggiornamenti di stato come "non urgenti". React dà priorità agli aggiornamenti urgenti (input utente) e posticipa quelli secondari, mantenendo l'interfaccia reattiva.

Forward Ref

React.forwardRef permette a un componente figlio di esporre un riferimento DOM al genitore. Utile per componenti di input personalizzati che devono essere controllati dall'esterno.

Higher-Order Components (HOC)

Un HOC è una funzione che riceve un componente e ne restituisce uno nuovo con funzionalità aggiuntive. È un pattern per il riuso della logica tra componenti (oggi spesso sostituito dagli hook).

Sass in React

Sass è un pre-processore CSS che aggiunge variabili, nesting, mixin e funzioni al CSS. In Vite basta installare il pacchetto sass e usare l'estensione .scss.

Hook — useState

useState è l'hook più fondamentale: permette di aggiungere stato locale a un componente funzionale. Restituisce il valore corrente e una funzione per aggiornarlo.

Hook — useEffect

useEffect gestisce gli effetti collaterali: fetch di dati, sottoscrizioni a eventi, aggiornamento del DOM. Sostituisce componentDidMount, componentDidUpdate e componentWillUnmount.

Hook — useContext

useContext consente di condividere dati tra componenti senza passare props a ogni livello (prop drilling). Il Context è ideale per temi, lingua, utente autenticato.

Hook — useRef

useRef restituisce un oggetto mutabile con una proprietà .current. È usato per accedere direttamente agli elementi DOM e per conservare valori che non devono causare un re-render quando cambiano.

Hook — useReducer

useReducer è un'alternativa a useState per stato complesso. Si ispira al pattern Redux: un reducer riceve lo stato corrente e un'azione, e restituisce il nuovo stato.

Hook — useCallback

useCallback restituisce una versione memoizzata di una funzione callback. È utile per ottimizzare le performance quando si passa una callback a componenti figli profondi: evita che il figlio si re-renderizzi inutilmente ad ogni render del genitore.

Hook — useMemo

useMemo memoizza il risultato di un calcolo costoso: lo ricalcola solo quando le dipendenze cambiano. È utile per filtrare/ordinare grandi liste o calcoli pesanti.

Custom Hooks

I Custom Hook sono funzioni JavaScript che iniziano con use e possono chiamare altri hook. Permettono di estrarre e riutilizzare logica stateful tra più componenti.

Editor online — Prova React

React richiede un ambiente di build (Vite, Next.js) per essere eseguito. Puoi sperimentare immediatamente online con questi strumenti gratuiti:

• 🚀 StackBlitz — Ambiente Vite+React completo nel browser
• 📦 CodeSandbox — IDE online con template React
• ⚡ PlayCode — Editor React veloce e leggero

Quiz React

Metti alla prova le tue conoscenze con queste domande:

1. ❓ Cosa restituisce useState(0)?
   R: Un array con il valore corrente (0) e la funzione di aggiornamento: [0, setStato].
2. ❓ Qual è la differenza tra useCallback e useMemo?
   R: useCallback memoizza una funzione; useMemo memoizza il risultato di un calcolo.
3. ❓ Cosa succede se non si fornisce una key in una lista React?
   R: React non riesce a tracciare efficientemente gli elementi → warning in console e possibili bug di rendering.
4. ❓ Quando viene eseguito il cleanup di useEffect?
   R: Prima che il componente venga smontato e prima che l'effetto venga rieseguito (se le dipendenze cambiano).
5. ❓ Cos'è il "prop drilling"?
   R: Passare props attraverso molti livelli di componenti annidati. Si risolve con Context o Redux.
6. ❓ Quali hook sono disponibili solo in componenti funzionali?
   R: Tutti gli hook React (useState, useEffect, ecc.) — non si possono usare nelle classi.

Esercizi pratici React

Esercizio 1 — Lista della spesa

Crea un'app dove l'utente può aggiungere elementi a una lista e rimuoverli con un clic.

Esercizio 2 — Cronometro con useRef

Crea un cronometro con i pulsanti Avvia, Pausa e Reset. Usa useRef per conservare l'ID dell'intervallo senza causare re-render.

Esercizio 3 — Fetch con useFetch

Crea un Custom Hook useFetch e usalo per visualizzare una lista di post da https://jsonplaceholder.typicode.com/posts.

Esercizio 4 — Tema scuro/chiaro

Implementa un toggle tema scuro/chiaro usando useContext. Il tema deve essere accessibile in tutta l'app senza prop drilling.

Programma del corso React

Piano di studio React (8 settimane)

Domande da colloquio React

• 💬 Differenza tra stato locale e stato globale? — Lo stato locale (useState) è isolato nel componente. Lo stato globale (Context, Redux, Zustand) è condiviso tra più componenti.
• 💬 Cos'è il Virtual DOM e perché è importante? — Una rappresentazione in memoria del DOM reale. React calcola le differenze (reconciliation) e aggiorna solo le parti cambiate, rendendo le app molto veloci.
• 💬 Quando usare useEffect? — Per effetti collaterali: fetch dati, sottoscrizioni, interazioni con API esterne, aggiornamenti del titolo della pagina.
• 💬 Cosa sono le Controlled Components? — Componenti form il cui valore è gestito dallo stato React, non dal DOM. React è la fonte di verità per il valore.
• 💬 Perché le key nelle liste devono essere univoche? — React le usa per riconoscere quali elementi sono cambiati, aggiunti o rimossi, ottimizzando il re-rendering.
• 💬 Differenza tra useCallback e useMemo? — useCallback memoizza una funzione; useMemo memoizza il risultato di un calcolo. Entrambi evitano rielaborazioni inutili.
• 💬 Cos'è il Context e quando usarlo? — Permette di passare dati in profondità senza prop drilling. Adatto per temi, lingua, autenticazione. Non è sostituto di Redux per stato complesso e frequentemente aggiornato.

Bootcamp React — Progetto finale

Costruisci un'app completa che integra tutti i concetti del corso:

🚀 Progetto: App Gestione Note

• 📝 CRUD completo: Crea, leggi, modifica ed elimina note
• 🔍 Ricerca e filtro: Filtra le note con useMemo per performance
• 🌙 Tema scuro/chiaro: Toggle con useContext
• 💾 Persistenza: Salva le note in localStorage con useEffect
• 🔀 Routing: Pagina lista, pagina dettaglio nota, pagina nuova nota
• 🎨 Stile: CSS Modules con supporto al tema scuro
• 🪝 Custom Hooks: useLocalStorage, useSearch

Risorse consigliate per continuare

• 📚 Next.js: React con SSR, routing file-based, API routes
• 📦 Redux Toolkit: Gestione stato globale per app complesse
• 🎯 React Query / TanStack Query: Gestione asincrona dei dati con cache
• 📱 React Native: Stesse basi React per app iOS e Android
• 🧪 React Testing Library: Testing dei componenti React

Certificazione React

Padroneggiare React è uno dei requisiti più richiesti nelle offerte di lavoro frontend. Ecco come valorizzare le tue competenze:

Come prepararsi al colloquio

• 🏗️ Costruisci 2-3 progetti completi visibili su GitHub
• ⚡ Conosci bene gli hook: useState, useEffect, useContext, useRef
• 🚀 Impara Next.js: molte aziende lo usano con React
• 🧪 Impara le basi del testing con React Testing Library
• 📖 Studia i concetti: Virtual DOM, reconciliation, re-render, memoization

Conclusione — E ora?

Hai completato il corso React! Hai imparato JSX, i componenti funzionali, le props, tutti i principali hook (useState, useEffect, useContext, useRef, useReducer, useCallback, useMemo), i Custom Hook, React Router, la gestione dei form, CSS Modules, CSS-in-JS, Sass, Portals, Suspense e i pattern avanzati come HOC e forwardRef.

I tuoi prossimi passi

• 🏗️ Costruisci un progetto reale: un'app todo, un portfolio, un e-commerce semplice
• ⚡ Studia Next.js: aggiunge routing, SSR e API routes a React
• 📦 Esplora Redux Toolkit per gestire stato globale complesso
• 📱 Prova React Native se ti interessano le app mobile
• 🧪 Impara il testing con Jest e React Testing Library
• 🎨 Approfondisci l'accessibilità: aria-label, ruoli semantici, focus management