Hvad er React? En letforståelig guide for ikke-udviklere

React er et JavaScript-bibliotek til at bygge brugerflader — den del af en app, folk ser og klikker på. Du bygger skærme af genbrugelige dele kaldet komponenter, fx en knap, et produktkort eller en hel side, og React holder skærmen i takt med dine data: når dataene ændrer sig, opdaterer React de dele af siden, der afhænger af dem. Det blev skabt hos Facebook (nu Meta), er open source og er en af de mest brugte måder at bygge webapps på.

Hvorfor det betyder noget, når du bygger med AI

Hvis du bygger en webapp med et AI-værktøj, er der en god chance for, at den er skrevet i React. Mange AI-app-builders bruger React som standard, fordi det er populært, godt dokumenteret, og der findes en enorm mængde React-kode, som AI-modeller har lært af.

Du behøver ikke at skrive React for at bygge med AI. Men lidt viden hjælper dig med at:

• Beskrive ændringer præcist. "Ændr ProductCard-komponenten, så prisen er fed" er tydeligere end "gør priser mere markante et sted".
• Forstå fejl. Beskeder som "Cannot read properties of undefined" eller "Too many re-renders" giver mere mening.
• Træffe fornuftige valg. Simple React-apps renderer i browseren, hvilket påvirker synlighed i søgning og hastighed ved første indlæsning. Det hjælper dig med at beslutte, hvornår du skal bede om en anden opsætning.
• Arbejde med udviklere senere. React er en almindelig færdighed, så en udvikler kan normalt hurtigt sætte sig ind i en React-kodebase.

En hverdagsanalogi

Tænk på LEGO. I stedet for at skære en hel model ud af én klods, bygger du den af standardklodser. Et par klodser laver et hjul; fire hjul og nogle andre dele laver en bil. Hvis du vil have, at alle biler har røde hjul, ændrer du hjulets design én gang.

React-komponenter er klodserne. En Button-komponent bruges inde i et ProductCard, som bruges inde i et ProductGrid, som er en del af ShopPage. Ændrer du Button én gang, ændrer alle knapper i appen sig.

Den anden halvdel af analogien: forestil dig, at LEGO-modellen bygger sig selv om, når du ændrer instruktionerne. Det er Reacts andet trick — du beskriver, hvordan skærmen skal se ud for de aktuelle data, og React finder ud af, hvad der skal ændres på siden.

De centrale idéer

Komponenter

En komponent er en JavaScript-funktion, der returnerer et stykke brugerflade. Reacts dokumentation beskriver en komponent som en del af UI'en med sin egen logik og udseende. Komponentnavne starter med stort bogstav.

JSX

Komponenter skrives typisk i JSX, som ligner HTML blandet ind i JavaScript:

function Greeting() {
  return <h1>Velkommen tilbage!</h1>;
}

JSX er valgfrit, men Reacts dokumentation nævner, at de fleste projekter bruger det. Det omdannes til almindelig JavaScript, før det kører i browseren.

Props

Props er de input, du sender ind i en komponent, ligesom indstillinger på en genbrugelig del:

<ProductCard name="Lavendellys" price={24} />

Den samme ProductCard kan vise ethvert produkt.

State

State er information, en komponent husker, og som kan ændre sig, mens appen kører — om en menu er åben, hvad der er skrevet i et søgefelt, hvor mange varer der er i kurven. Når state ændrer sig, renderer React komponenten igen, så skærmen matcher.

Hooks

Hooks er funktioner, hvis navne starter med use, fx useState (husker en værdi) og useEffect (kører kode efter rendering, fx for at hente data). Du vil se dem overalt i AI-genereret React-kode.

Et eksempel: en kurvtæller

Lad os sige, din webshop har en knap "Læg i kurv" og et kurvikon, der viser antallet af varer. I React ser det nogenlunde sådan ud:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavendellys"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Kurv ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Læg i kurv</button>
    </div>
  );
}

Sådan forløber det, når en shopper klikker på "Læg i kurv":

1. Knappens onClick kalder onAdd, som kalder setCartCount.
2. React opdaterer cartCount-state fra 0 til 1.
3. React renderer Shop igen og sender count={1} ind i CartIcon.
4. Siden viser nu "Kurv (1)". Ingen skrev kode, der sagde "find kurvteksten og ændr den" — skærmen følger dataene.

Bemærk også begrænsningerne. Tællingen lever i browserens hukommelse. Opdaterer du siden, er den tilbage på 0. For at gemme en kurv skal du gemme den et varigt sted — en cookie, browserlager eller en database via din backend. React håndterer skærmen; det gemmer ikke dine data.

Hvor React passer ind i en webapp

En "Vite + React"-app renderer i browseren (en single-page app). En Next.js-app kan renderere sider på serveren først, hvilket hjælper søgemaskiner og hastigheden ved første indlæsning.

Almindelige begreber forklaret

Almindelige fejl og misforståelser

• "React er et programmeringssprog." Det er et bibliotek, skrevet i og brugt fra JavaScript (eller TypeScript).
• "React gemmer mine data." State lever i browseren og forsvinder ved opdatering. Varige data kræver en backend og en database.
• At putte hemmeligheder i React-koden. Alt i en React-app sendes til besøgendes browser. API-nøgler der er offentlige. Hold dem på serveren.
• "React-apps kan ikke rangere i søgning." Rendering kun i klienten er svagere for søgning, men prerendering eller server-rendering løser det meste.
• Kæmpe komponenter. En komponent på 1.000 linjer er svær at ændre sikkert, både for mennesker og AI. Bed om mindre.
• At antage, at en React-webapp er en telefonapp. Den kører i browseren, også på telefoner, men er ikke en App Store-app.

Hvad du beder din AI-builder om

• "Del denne side op i små, navngivne komponenter, og fortæl mig, hvilken fil hver enkelt ligger i."
• "Gør ProductCard-komponenten genbrugelig, med name, price og image som props."
• "Gem kurven i databasen, så den overlever en opdatering."
• "Behold alle API-nøgler på serveren; React-koden skal kalde vores egen API."
• "Tilføj indlæsnings- og fejltilstande for data, der kommer fra serveren."
• "Hvis synlighed i søgning er vigtig for disse sider, så prerender dem eller brug en server-renderet opsætning."
• "Forklar i almindelige ord, hvad denne fejl betyder, og hvilken komponent den kommer fra."

Til det større billede, se frontend vs. backend, og til at gennemgå det, AI'en skrev, se sådan gennemgår du AI-genereret kode.

React i Mythex

Medmindre du beder om andet, starter Mythex nye projekter på Vite + React + TypeScript + Tailwind, med en live-forhåndsvisning der kører, mens du chatter. Du kan nævne en anden opsætning i din første prompt — fx "Brug Next.js" eller "simpel statisk HTML-landingsside" — og Mythex vælger ud fra det, du skriver; der er ingen indstillingsskærm til det. Dokumentationssiden om hvordan teknologien vælges forklarer mulighederne. Kodeeditoren er skrivebeskyttet på Free; på Pro kan du redigere React-koden direkte og eksportere projektet for at arbejde videre på det andetsteds.

Spørgsmål