Hvorfor profesjonelle bruker React

Husker du kopiere den menu?

I nivå 1 havde du en header med menu på hver side. Og hver gang du la til en ny side, måtte du kopiere menuen – og rette den overalt ved hver endring. Irriterende med tre sider, et mareridt med tredive. Og den smerte er nøyaktig, hvor vores historie begynner.

Komponenter: skriv én gang, bruk overalt

Professionelle tenkte: hva om menuen var én stykke kode, der bare blev “satt inn” på hver side? Endre den ét sted – den endrer seg overalt. Et stykke som det kaldes en komponent.

Og det er ikke bare menuen. Se på din nettside gjennom øjnene på et byggeklossesett:

• et spillerkort (du har det 4× – og det skiller seg ut kun ved navn og position),
• et bilde i galleriet (10× – kun bildet skiller seg ut),
• en knap (overalt – kun teksten skiller seg ut).

En profesjonell nettside er ikke en haug HTML-filer. Det er en LEGO-kasse: en håndfuld brukerdefinerte klodser (komponenter) samlet til en hel applikation.

Hva React er

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

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

Og den brukes som et brukerdefinert HTML-tag:

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

Genkjenner du det? Det er en funktion (fra nivå 2), der returnerer HTML. Kortet er skrevet én gang og brukes med forskellige data – som et gummistempel med utskiftbare bokstaver.

Superkraft nummer to: React håndterer omtegningen

I nivå 2 skrev du: “finn elementet, endre teksten, legg til en klasse…” I store applikationer er der så meget af denne manuelle omorganisering, at man kan gå seg vill. React vender det om:

Du beskriver hvordan siden skal se ut for gitte data. Når dataene endrer seg, finder React selv ud af, hva som skal tegnes om.

Pointene endrer seg fra 0 til 1? Du leder ikke etter noe element – du endrer bare tallet, og React tegner om, hva der er nødvendigt. Du ser det i aktion i leksjonen om state.

Hva der kommer i dette nivå

1. Du installerer profesjonelle verktøyer: terminalen og Node.js (neste leksjon).
2. Du setter din første React-app op med Vite.
3. Du lærer komponenter, props og state.
4. Du bygger din nivå 1-nettside om i React.
5. Du bygger din egen Node.js-server og forbinder en gjestebok til den.

Dette tar du med deg fra leksjonen

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

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