Hva er React? En forklaring på vanlig språk for ikke-utviklere

React er et JavaScript-bibliotek for å bygge brukergrensesnitt – den delen av en app folk ser og klikker på. Du bygger skjermbilder av gjenbrukbare deler kalt komponenter, for eksempel en knapp, et produktkort eller en hel side, og React holder skjermen synkronisert med dataene dine: når dataene endrer seg, oppdaterer React de delene av siden som avhenger av dem. Det ble laget hos Facebook (nå Meta), er åpen kildekode, og er en av de mest brukte måtene å bygge webapper på.

Hvorfor det betyr noe når du bygger med AI

Hvis du bygger en webapp med et AI-verktøy, er det god sjanse for at den er skrevet i React. Mange AI-verktøy for apper bruker React som standard, fordi det er populært, godt dokumentert, og fordi det finnes enorme mengder React-kode for AI-modeller å lære av.

Du trenger ikke skrive React for å bygge med AI. Men litt kunnskap hjelper deg til å:

• Beskrive endringer presist. «Endre ProductCard-komponenten slik at prisen er fet» er tydeligere enn «gjør priser mer synlige et sted».
• Forstå feilmeldinger. Meldinger som «Cannot read properties of undefined» eller «Too many re-renders» blir mer forståelige.
• Ta fornuftige valg. Vanlige React-apper rendres i nettleseren, noe som påvirker synlighet i søk og hvor raskt siden lastes første gang. Å vite det hjelper deg å bestemme når du bør be om et annet oppsett.
• Jobbe med utviklere senere. React er en vanlig ferdighet, så en utvikler kan som regel sette seg inn i en React-kodebase raskt.

En hverdagslig analogi

Tenk på LEGO. I stedet for å skjære en hel modell ut av én blokk, bygger du den av standardklosser. Noen få klosser lager et hjul; fire hjul og noen andre deler lager en bil. Hvis du vil at alle bilene skal ha røde hjul, endrer du hjuldesignet én gang.

React-komponenter er klossene. En Button-komponent brukes inne i et ProductCard, som brukes inne i et ProductGrid, som er en del av ShopPage. Endrer du Button én gang, endrer alle knapper i appen seg.

Den andre halvdelen av analogien: forestill deg at LEGO-modellen bygde seg selv på nytt hver gang du endret instruksjonene. Det er Reacts andre triks – du beskriver hvordan skjermen skal se ut for de gjeldende dataene, og React finner ut hva som må endres på siden.

De viktigste ideene

Komponenter

En komponent er en JavaScript-funksjon som returnerer et stykke grensesnitt. React-dokumentasjonen beskriver en komponent som en del av brukergrensesnittet med egen logikk og eget utseende. Komponentnavn starter med stor bokstav.

JSX

Komponenter skrives vanligvis i JSX, som ser ut som HTML blandet inn i JavaScript:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX er valgfritt, men React-dokumentasjonen påpeker at de fleste prosjekter bruker det. Det gjøres om til vanlig JavaScript før det kjøres i nettleseren.

Props

Props er innputtene du sender inn i en komponent, som innstillinger på en gjenbrukbar del:

<ProductCard name="Lavender Candle" price={24} />

Den samme ProductCard kan vise ethvert produkt.

State

State er informasjon en komponent husker, og som kan endre seg mens appen kjører – om en meny er åpen, hva som er skrevet i et søkefelt, hvor mange varer som ligger i handlekurven. Når state endrer seg, rendrer React komponenten på nytt, slik at skjermen stemmer med dataene.

Hooks

Hooks er funksjoner hvis navn starter med use, for eksempel useState (husk en verdi) og useEffect (kjør kode etter rendering, for eksempel for å hente data). Du vil se dem overalt i AI-generert React-kode.

Et arbeidseksempel: en handlekurvteller

Si at nettbutikken din har en «Legg i handlekurv»-knapp og et handlekurvikon som viser antall varer. I React ser det omtrent slik ut:

import { useState } from "react";

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

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

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

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

Dette skjer når en handlekunde klikker «Legg i handlekurv»:

1. Knappens onClick kaller onAdd, som kaller setCartCount.
2. React oppdaterer cartCount-state fra 0 til 1.
3. React rendrer Shop på nytt og sender count={1} inn i CartIcon.
4. Siden viser nå «Cart (1)». Ingen har skrevet kode som sier «finn handlekurv-teksten og endre den» – skjermen følger dataene.

Legg også merke til begrensningene. Denne tellingen lever i nettleserens minne. Oppdaterer du siden, er den tilbake på 0. For å beholde en handlekurv må du lagre den et sted som varer – en cookie, lagring i nettleseren, eller en database via backend-en. React håndterer skjermen; det lagrer ikke dataene dine.

Hvor React passer inn i en webapp

En «Vite + React»-app rendres i nettleseren (en single-page-app). En Next.js-app kan rendre sider på serveren først, noe som hjelper søkemotorer og hastigheten ved første lasting.

Vanlige begreper forklart

Vanlige feil og misforståelser

• «React er et programmeringsspråk.» Det er et bibliotek skrevet i og brukt fra JavaScript (eller TypeScript).
• «React lagrer dataene mine.» State lever i nettleseren og forsvinner ved oppdatering. Data som skal vare, trenger en backend og database.
• Å legge hemmeligheter i React-koden. Alt i en React-app sendes til besøkendes nettleser. API-nøkler der er offentlige. Behold dem på serveren.
• «React-apper kan ikke rangeres i søk.» Rendering bare i klienten er svakere for søk, men forhåndsrendering eller server-rendering løser det meste.
• Gigantiske komponenter. En komponent på 1 000 linjer er vanskelig å endre trygt, både for folk og for AI. Be om mindre komponenter.
• Å anta at en React-webapp er en telefonapp. Den kjører i nettleseren, også på telefoner, men er ikke en App Store-app.

Hva du bør be AI-byggeren din om

• «Del denne siden opp i små, navngitte komponenter, og fortell meg hvilken fil hver av dem ligger i.»
• «Gjør ProductCard-komponenten gjenbrukbar, med name, price og image som props.»
• «Lagre handlekurven i databasen slik at den overlever en oppdatering.»
• «Behold alle API-nøkler på serveren; React-koden skal kalle vårt eget API.»
• «Legg til lasting- og feiltilstander for data som kommer fra serveren.»
• «Hvis søkesynlighet er viktig for disse sidene, forhåndsrender dem eller bruk et server-rendret oppsett.»
• «Forklar på vanlig språk hva denne feilen betyr, og hvilken komponent den kommer fra.»

For det større bildet, se frontend vs backend, og for å gjennomgå det AI-en skrev, se hvordan gå gjennom AI-generert kode.

React i Mythex

Med mindre du ber om noe annet, starter Mythex nye prosjekter på Vite + React + TypeScript + Tailwind, med en live-forhåndsvisning som kjører mens du chatter. Du kan nevne et annet oppsett i første prompt – for eksempel «Bruk Next.js» eller «enkel statisk HTML-landingsside» – og Mythex velger det ut fra det du skriver; det finnes ingen innstillingsside for dette. Dokumentasjonssiden om hvordan teknologien velges forklarer alternativene. Kodeeditoren er skrivebeskyttet på Gratis; på Pro kan du redigere React-koden direkte og eksportere prosjektet for å fortsette å jobbe med det andre steder.

Spørsmål