La grande ricostruzione: il tuo sito web in React

Riscrivi il tuo sito web del Livello 1 in React. Lo stesso sito web, per la terza volta – questa volta da professionista.

La tua missione

Prenderai il tuo sito web dei Livelli 1–2 e lo ricostruirai in React. Sembra un passo indietro? Non lo è – è il miglior allenamento che ci sia: hai già contenuto e design pronti, così puoi concentrarti solo sulla nuova tecnica. E alla fine vedrai in bianco e nero perché ne vale la pena per i professionisti.

Il piano di ricostruzione

Dividi il sito web in componenti. Prendi carta e matita (sul serio!) e disegna il tuo sito web come scatole: Header, Gallery, Quiz, Footer… Ogni scatola = un file in src/.
Sposta l’HTML nei componenti. Copia pezzo per pezzo dai tuoi vecchi file .html in JSX. Attenzione alle differenze che già conosci: class → className, ogni componente restituisce un solo elemento contenitore. Copia le tue immagini nella cartella public/ del progetto Vite – così i percorsi tipo /images/team.jpg funzionano invariati.
Sposta il CSS. Copia il contenuto del tuo style.css in src/App.css. Dovrebbe funzionare quasi invariato – il CSS resta CSS.
Estrai i dati in array. Schede, risultati, foto della galleria – tutto ciò che si ripete, trasformalo in un array di oggetti + .map(), come hai imparato nella lezione sui componenti.

Riscrivi gli incantesimi del Livello 2 come state. Ecco una tabella di conversione:

Livello 2 (JavaScript semplice)	React
`getElementById` + `textContent`	state + `{value}` in JSX
`addEventListener("click", ...)`	`onClick={...}`
`classList.toggle` + CSS `.hidden`	state booleano + `{condition && (...)}`
un contatore con una variabile	`useState` con un numero

Te lo mostro: modalità scura stile React

Riscriviamo insieme un incantesimo, così vedi la conversione in azione:

import { useState } from 'react';
import Header from './Header.jsx';
import Gallery from './Gallery.jsx';

function App() {
  const [dark, setDark] = useState(
    localStorage.getItem("mode") === "dark"
  );

  function toggleMode() {
    const newMode = !dark;
    setDark(newMode);
    localStorage.setItem("mode", newMode ? "dark" : "light");
  }

  return (
    <div className={dark ? "dark" : ""}>
      <Header onToggle={toggleMode} dark={dark} />
      <Gallery />
    </div>
  );
}

export default App;

E in Header.jsx, il pulsante riceve una funzione come prop:

function Header({ onToggle, dark }) {
  return (
    <header>
      <h1>My website</h1>
      <button onClick={onToggle}>{dark ? "☀️" : "🌙"}</button>
    </header>
  );
}

Un’ultima cosa nuova: una prop può essere anche una funzione. App possiede lo state e presta al figlio un pulsante per cambiarlo. Si chiama “lo state vive in alto”, ed è il pattern più comune in React.

Checklist di ricostruzione

Il sito web è diviso in almeno 4 componenti in file separati
Gli elementi ripetuti (schede, foto…) nascono da un array via .map()
Almeno due punti interattivi funzionano con useState
La modalità scura funziona ed è ricordata (localStorage)
Nessun errore nella console
Non c’è getElementById da nessuna parte nel codice 😉

💡

Bloccarsi fa parte del gioco. Questa lezione è una maratona, non uno sprint – sentiti libero di dividerla in più giorni. Quando ti blocchi: la console (F12), il messaggio di errore di Vite, e confronto con gli esempi delle lezioni precedenti. È esattamente così che un professionista fa debug.

✅

Controlla da solo: Il tuo sito web gira su localhost e sembra (quasi) uguale a prima – ma dentro è fatto di componenti, dati e state. Ora prova ad aggiungere una scheda all’array di dati e guarda quanto poco lavoro richiede. Questo è il motivo per cui React esiste.

Cosa porti via da questa lezione

La ricostruzione: dividi in componenti → sposta HTML e CSS → dati in array → incantesimi in state.
Una prop può essere anche una funzione – un genitore presta ai figli pulsanti per controllare il proprio state.
Stesso risultato, struttura più pulita: meno copie, modifiche più facili. È un progresso che si vede davvero.