Den store ombygning: din nettside i React

Skriv din nivå 1-nettside om i React. Den samme nettside, for tredje gang – denne gang som en professionel.

Din mission

Du tar din nettside fra nivå 1–2 og bygger den igen i React. Lyder det som et skridt tilbake? Det er det ikke – det er den bedste trening: du har allerede indholdet og designet på plads, så du kan fokusere rent på den nye teknik. Og til sidst ser du sort på hvidt, hvorfor profesjonelle synes, det er det verdt.

Ombygningsplanen

Del nettsiden op i komponenter. Tag papir og blyant (seriøst!) og skitser din nettside som bokse: Header, Gallery, Quiz, Footer… Hver boks = én fil i src/.
Flyt HTML’en ind i komponenter. Kopier stykke for stykke fra dine gamle .html-filer ind i JSX. Pas på de velkendte forskelle: class → className, hver komponent returnerer ét indpakningselement. Kopier dine bilder ind i mappen public/ i Vite-projektet – så fungerer stier som /images/team.jpg uendret.
Flyt CSS’en. Kopier indholdet af din style.css ind i src/App.css. Det bør fungere nesten uendret – CSS er fortsatt CSS.
Dra dataene ud i arrays. Kort, resultater, galleribilder – alt der gentar sig, blir til et array af objekter + .map(), som du lærte i komponentleksjonen.

Skriv nivå 2-trylleformularerne om som state. Her er en konverteringstabel:

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

Jeg viser deg: mørk tilstand på React-måden

La oss omskrive én trylleformular sammen, så du kan se konverteringen i aktion:

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;

Og i Header.jsx modtar knappen en funktion som prop:

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

Én siste ny ting: en prop kan også være en funktion. App ejer staten og udlåner sit barn en knap til at skifte den. Det kaldes “state bor øverst,” og det er det mest vanlige mønster i React.

Ombygnings-sjekkliste

Nettsiden er delt i mindst 4 komponenter i separate filer
Gjentane elementer (kort, bilder…) lages fra et array via .map()
Mindst to interaktive steder kjører på useState
Mørk tilstand fungerer og huskes (localStorage)
Ingen feil i konsollen
Der er ingen getElementById nogen steder i koden 😉

💡

At sitte fast er en del af spillet. Denne leksjon er et maraton, ikke en sprint – du kan gjerne dele den over flere dage. Når du sitter fast: konsollen (F12), feilmeldingen fra Vite og sammenligning med eksempler fra tidligere leksjoner. Nøyaktig sådan debugger en professionel.

✅

Sjekk deg selv: Din nettside kjører på localhost og ser (nesten) den samme ud som før – men indeni er den lavet af komponenter, data og state. Prøv nå å legg til ét kort til dataarrayet og se, hvor lite arbeid det krever. Det er hele grunden til, at React eksisterer.

Dette tar du med deg fra leksjonen

Ombygningen: del op i komponenter → flyt HTML og CSS → data i arrays → trylleformularer til state.
En prop kan også være en funktion – en forelder udlåner sine børn knapper til at styre sin egen state.
Samme resultat, renere struktur: mindre kopiering, nemmere endringer. Det er fremskridt, du faktisk kan se.