La gran reconstrucción: tu web en React

Reescribe tu web del Nivel 1 en React. La misma web, por tercera vez – esta vez como un pro.

Tu misión

Cogerás tu web de los Niveles 1–2 y la construirás otra vez en React. ¿Suena a dar un paso atrás? No lo es – es el mejor entrenamiento que hay: ya tienes el contenido y el diseño resueltos, así que puedes centrarte solo en la técnica nueva. Y al final verás en blanco y negro por qué a los pros les compensa.

El plan de reconstrucción

Divide la web en componentes. Coge papel y lápiz (¡en serio!) y dibuja tu web como cajas: Header, Gallery, Quiz, Footer… Cada caja = un archivo en src/.
Mueve el HTML a los componentes. Copia trozo a trozo de tus archivos .html antiguos al JSX. Ojo a las diferencias que ya conoces: class → className, cada componente devuelve un elemento contenedor. Copia tus imágenes en la carpeta public/ del proyecto Vite – entonces rutas como /images/team.jpg funcionan igual.
Mueve el CSS. Copia el contenido de tu style.css en src/App.css. Debería funcionar casi igual – el CSS sigue siendo CSS.
Saca los datos a arrays. Tarjetas, resultados, fotos de la galería – todo lo que se repite, conviértelo en un array de objetos + .map(), como aprendiste en la lección de componentes.

Reescribe los hechizos del Nivel 2 como state. Aquí tienes una tabla de conversión:

Nivel 2 (JavaScript normal)	React
`getElementById` + `textContent`	state + `{value}` en JSX
`addEventListener("click", ...)`	`onClick={...}`
`classList.toggle` + CSS `.hidden`	state booleano + `{condition && (...)}`
un contador con una variable	`useState` con un número

Te lo muestro: modo oscuro al estilo React

Reescribamos juntos un hechizo, para que veas la conversión en acción:

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;

Y en Header.jsx, el botón recibe una función como prop:

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

Una cosa nueva más: una prop también puede ser una función. App es dueño del state y le presta al hijo un botón para cambiarlo. Esto se llama “el state vive arriba”, y es el patrón más común en React.

Lista de comprobación de la reconstrucción

La web está dividida en al menos 4 componentes en archivos separados
Los elementos que se repiten (tarjetas, fotos…) nacen de un array con .map()
Al menos dos puntos interactivos funcionan con useState
El modo oscuro funciona y se recuerda (localStorage)
No hay errores en la consola
No hay getElementById en ningún sitio del código 😉

💡

Atascarse forma parte del juego. Esta lección es un maratón, no un sprint – puedes repartirla en varios días. Cuando te atasques: la consola (F12), el mensaje de error de Vite, y comparar con ejemplos de lecciones anteriores. Así depura un pro.

✅

Compruébalo tú: Tu web funciona en localhost y se ve (casi) igual que antes – pero por dentro está hecha de componentes, datos y state. Ahora prueba a añadir una tarjeta al array de datos y mira lo poco que cuesta. Esa es la razón de ser de React.

Lo que te llevas de esta lección

La reconstrucción: dividir en componentes → mover HTML y CSS → datos a arrays → hechizos a state.
Una prop también puede ser una función – un padre presta a los hijos botones para controlar su propio state.
Mismo resultado, estructura más limpia: menos copiar, cambios más fáciles. Eso es progreso que se ve.