Den stora ombyggnaden: din webbplats i React

Skriv om din nivå 1-webbplats i React. Samma webbplats, för tredje gången – den här gången som ett proffs.

Ditt uppdrag

Du tar din webbplats från nivå 1–2 och bygger den igen i React. Låter som ett steg bakåt? Det är det inte – det är den bästa träningen: du har redan innehåll och design klart, så du kan fokusera helt på den nya tekniken. Och i slutet ser du svart på vitt varför proffsen tycker det är värt det.

Ombyggnadsplanen

Dela upp webbplatsen i komponenter. Ta papper och penna (på allvar!) och skissa din webbplats som rutor: Header, Gallery, Quiz, Footer… Varje ruta = en fil i src/.
Flytta HTML till komponenter. Kopiera bit för bit från dina gamla .html-filer till JSX. Tänk på de vanliga skillnaderna: class → className, varje komponent returnerar ett omslagselement. Kopiera dina bilder till mappen public/ i Vite-projektet – då funkar sökvägar som /images/team.jpg oförändrat.
Flytta CSS. Kopiera innehållet i din style.css till src/App.css. Det ska funka nästan oförändrat – CSS är fortfarande CSS.
Dra ut datan till arrayer. Kort, resultat, gallerifoton – allt som upprepas blir en array av objekt + .map(), som du lärde dig i komponentlektionen.

Skriv om nivå 2-trollformlerna som state. Här är en omvandlingstabell:

Nivå 2 (vanlig JavaScript)	React
`getElementById` + `textContent`	state + `{value}` i JSX
`addEventListener("click", ...)`	`onClick={...}`
`classList.toggle` + CSS `.hidden`	boolean state + `{condition && (...)}`
en räknare med variabel	`useState` med ett tal

Jag visar: mörkt läge på React-sätt

Låt oss skriva om en trollformel tillsammans, så du ser omvandlingen i praktiken:

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;

Och i Header.jsx får knappen en funktion som prop:

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

En sista ny sak: en prop kan också vara en funktion. App äger statet och lånar barnet en knapp för att växla det. Det kallas “state bor upptill”, och det är det vanligaste mönstret i React.

Ombyggnadschecklista

Webbplatsen är uppdelad i minst 4 komponenter i separata filer
Upprepande element (kort, foton…) föds från en array via .map()
Minst två interaktiva ställen kör på useState
Mörkt läge funkar och minns (localStorage)
Inga fel i konsolen
Det finns inget getElementById någonstans i koden 😉

💡

Att fastna hör till. Den här lektionen är ett maraton, inte en sprint – dela gärna upp den över flera dagar. När du fastnar: konsolen (F12), felmeddelandet från Vite och jämförelse med exempel från tidigare lektioner. Så felsöker ett proffs.

✅

Kolla själv: Din webbplats kör på localhost och ser (nästan) likadan ut som förut – men inuti består den av komponenter, data och state. Prova nu att lägga till ett kort i data-arrayen och se hur lite arbete det kräver. Det är hela anledningen till att React finns.

Det här tar du med dig från lektionen

Ombyggnaden: dela i komponenter → flytta HTML och CSS → data till arrayer → trollformler till state.
En prop kan också vara en funktion – en förälder lånar barnen knappar för att styra sitt eget state.
Samma resultat, renare struktur: mindre kopiering, enklare ändringar. Det är framsteg du faktiskt ser.