Den store ombygning: din hjemmeside i React

Skriv din niveau 1-hjemmeside om i React. Den samme hjemmeside, for tredje gang – denne gang som en professionel.

Din mission

Du tager din hjemmeside fra niveau 1–2 og bygger den igen i React. Lyder det som et skridt tilbage? Det er det ikke – det er den bedste træning: 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 professionelle synes, det er det værd.

Ombygningsplanen

Del hjemmesiden op i komponenter. Tag papir og blyant (seriøst!) og skitser din hjemmeside 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 billeder ind i mappen public/ i Vite-projektet – så virker stier som /images/team.jpg uændret.
Flyt CSS’en. Kopier indholdet af din style.css ind i src/App.css. Det bør virke næsten uændret – CSS er stadig CSS.
Træk dataene ud i arrays. Kort, resultater, gallerifotos – alt der gentager sig, bliver til et array af objekter + .map(), som du lærte i komponentlektionen.

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

Niveau 2 (almindelig 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

Vis mig: mørk tilstand på React-måden

Lad os 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 modtager knappen en funktion som prop:

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

Én sidste 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 almindelige mønster i React.

Ombygnings-tjekliste

Hjemmesiden er delt i mindst 4 komponenter i separate filer
Gentagne elementer (kort, fotos…) fødes fra et array via .map()
Mindst to interaktive steder kører på useState
Mørk tilstand virker og huskes (localStorage)
Ingen fejl i konsollen
Der er ingen getElementById nogen steder i koden 😉

💡

At sidde fast er en del af spillet. Denne lektion er et maraton, ikke en sprint – du må gerne dele den over flere dage. Når du sidder fast: konsollen (F12), fejlbeskeden fra Vite og sammenligning med eksempler fra tidligere lektioner. Præcis sådan debugger en professionel.

✅

Tjek dig selv: Din hjemmeside kører på localhost og ser (næsten) den samme ud som før – men indeni er den lavet af komponenter, data og state. Prøv nu at tilføje ét kort til dataarrayet og se, hvor lidt arbejde det kræver. Det er hele grunden til, at React eksisterer.

Det tager du med fra denne lektion

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