Hvorfor professionelle bruger React

Husker du at kopiere den menu?

I niveau 1 havde du en header med menu på hver side. Og hver gang du tilføjede en ny side, måtte du kopiere menuen – og rette den overalt ved hver ændring. Irriterende med tre sider, et mareridt med tredive. Og den smerte er præcis, hvor vores historie begynder.

Komponenter: skriv én gang, brug overalt

Professionelle tænkte: hvad nu hvis menuen var én stykke kode, der bare blev “indsat” på hver side? Ændr den ét sted – den ændrer sig overalt. Et stykke som det kaldes en komponent.

Og det er ikke bare menuen. Kig på din hjemmeside gennem øjnene på et byggeklodssæt:

• et spillerkort (du har det 4× – og det adskiller sig kun ved navn og position),
• et foto i galleriet (10× – kun billedet adskiller sig),
• en knap (overalt – kun teksten adskiller sig).

En professionels hjemmeside er ikke en bunke HTML-filer. Det er en LEGO-kasse: en håndfuld brugerdefinerede klodser (komponenter) samlet til en hel applikation.

Hvad React er

React er et værktøj (et bibliotek) til JavaScript, der håndterer den slags samling. Det blev opfundet på Facebook, det er gratis, og en kæmpe del af internettet er bygget på det: Facebook, Instagram, Netflix, Airbnb… En komponent i React ser sådan ud – rolig, vi kigger bare for nu:

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

Og den bruges som et brugerdefineret HTML-tag:

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

Genkender du det? Det er en funktion (fra niveau 2), der returnerer HTML. Kortet er skrevet én gang og bruges med forskellige data – som et gummistempel med udskiftelige bogstaver.

Superkraft nummer to: React håndterer omtegningen

I niveau 2 skrev du: “find elementet, ændr teksten, tilføj en klasse…” I store applikationer er der så meget af denne manuelle omarrangering, at man kan fare vild. React vender det om:

Du beskriver hvordan siden skal se ud for givne data. Når dataene ændrer sig, finder React selv ud af, hvad der skal tegnes om.

Pointene ændrer sig fra 0 til 1? Du leder ikke efter noget element – du ændrer bare tallet, og React tegner om, hvad der er nødvendigt. Du ser det i aktion i lektionen om state.

Hvad der kommer i dette niveau

1. Du installerer professionelle værktøjer: terminalen og Node.js (næste lektion).
2. Du sætter din første React-app op med Vite.
3. Du lærer komponenter, props og state.
4. Du bygger din niveau 1-hjemmeside om i React.
5. Du bygger din egen Node.js-server og forbinder en gæstebog til den.

Det tager du med fra denne lektion

• At kopiere den samme kode til flere steder er en fælde – du opdagede det allerede tilbage i niveau 1 på egen hånd.
• En komponent er en funktion, der returnerer et stykke af en side. Skriv den én gang, brug den mange gange med forskellige data.
• React tegner siden om for dig: du ændrer dataene, den ændrer skærmen.

© 2026 Ing. Martin Polak / AlgoRhino · Vilkår for indholdsbrug