Wat is React? Een begrijpelijke gids voor niet-ontwikkelaars

React is een JavaScript-bibliotheek om gebruikersinterfaces te bouwen — het deel van een app dat mensen zien en waarop ze klikken. Je bouwt schermen van herbruikbare onderdelen die componenten heten, zoals een knop, een productkaart of een hele pagina, en React houdt het scherm gesynchroniseerd met je gegevens: wanneer de gegevens veranderen, werkt React de delen van de pagina bij die ervan afhangen. Het is ontwikkeld bij Facebook (nu Meta), is open source, en is een van de meest gebruikte manieren om webapps te bouwen.

Waarom het ertoe doet bij het bouwen met AI

Als je met een AI-tool een webapp bouwt, is de kans groot dat die in React is geschreven. Veel AI-appbouwers gebruiken standaard React, omdat het populair en goed gedocumenteerd is, en er een enorme hoeveelheid React-code bestaat waarvan AI-modellen hebben kunnen leren.

Je hoeft geen React te schrijven om met AI te bouwen. Maar er een beetje van weten helpt je om:

• Wijzigingen precies te beschrijven. "Maak de prijs in de ProductCard-component vet" is duidelijker dan "laat prijzen ergens opvallen".
• Fouten te begrijpen. Meldingen als "Cannot read properties of undefined" of "Too many re-renders" worden begrijpelijker.
• Verstandige keuzes te maken. Gewone React-apps worden in de browser weergegeven, wat invloed heeft op zichtbaarheid in zoekmachines en de snelheid van het eerste laden. Dat weten helpt je beslissen wanneer je om een andere opzet vraagt.
• Later met ontwikkelaars samen te werken. React is een veelgevraagde vaardigheid, dus een ontwikkelaar kan meestal snel een React-codebase oppakken.

Een analogie uit het dagelijks leven

Denk aan LEGO. In plaats van een hele model uit één blok te snijden, bouw je het uit standaardbouwstenen. Een paar stenen maken een wiel; vier wielen en wat andere onderdelen maken een auto. Als je wilt dat elke auto rode wielen heeft, verander je het wielontwerp één keer.

React-componenten zijn de bouwstenen. Een Button-component wordt gebruikt binnen een ProductCard, die binnen een ProductGrid wordt gebruikt, die deel is van de ShopPage. Verander je Button één keer, dan verandert elke knop in de app.

De andere helft van de analogie: stel je voor dat het LEGO-model zichzelf opnieuw opbouwt wanneer je de instructies verandert. Dat is de andere truc van React — je beschrijft hoe het scherm eruit moet zien bij de huidige gegevens, en React bepaalt wat er op de pagina moet veranderen.

De kernideeën

Componenten

Een component is een JavaScript-functie die een stuk interface teruggeeft. De documentatie van React beschrijft een component als een deel van de UI dat eigen logica en uiterlijk heeft. Componentnamen beginnen met een hoofdletter.

JSX

Componenten worden meestal geschreven in JSX, dat eruitziet als HTML vermengd met JavaScript:

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

JSX is optioneel, maar de documentatie van React merkt op dat de meeste projecten het gebruiken. Het wordt omgezet naar gewoon JavaScript voordat het in de browser draait.

Props

Props zijn de invoer die je aan een component meegeeft, net als instellingen op een herbruikbaar onderdeel:

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

Dezelfde ProductCard kan elk product tonen.

State

State is informatie die een component onthoudt en die tijdens het draaien van de app kan veranderen — of een menu open is, wat er in een zoekvak is getypt, hoeveel artikelen er in het winkelmandje zitten. Wanneer de state verandert, rendert React de component opnieuw zodat het scherm overeenkomt.

Hooks

Hooks zijn functies waarvan de namen beginnen met use, zoals useState (een waarde onthouden) en useEffect (code uitvoeren na het renderen, bijvoorbeeld om gegevens op te halen). Je ziet ze overal in AI-gegenereerde React-code.

Een uitgewerkt voorbeeld: een winkelmandteller

Stel dat je online winkel een knop "In winkelmandje" heeft en een winkelmandpictogram dat het aantal artikelen toont. In React ziet dat er ongeveer zo uit:

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>
  );
}

Wat er gebeurt wanneer een shopper op "In winkelmandje" klikt:

1. De onClick van de knop roept onAdd aan, die setCartCount aanroept.
2. React werkt de cartCount-state bij van 0 naar 1.
3. React rendert Shop opnieuw en geeft count={1} door aan CartIcon.
4. De pagina toont nu "Cart (1)". Niemand heeft code geschreven die zegt "zoek de winkelmandtekst en verander die" — het scherm volgt de gegevens.

Let ook op de beperkingen. Deze teller leeft in het geheugen van de browser. Ververs de pagina en hij staat weer op 0. Om een winkelmandje te bewaren, sla je het ergens duurzaams op — een cookie, browseropslag, of een database via je backend. React regelt het scherm; het slaat je gegevens niet op.

Waar React past in een webapp

Een "Vite + React"-app wordt in de browser weergegeven (een single-page app). Een Next.js-app kan pagina's eerst op de server renderen, wat zoekmachines en de snelheid van het eerste laden helpt.

Veelgebruikte termen uitgelegd

Veelvoorkomende fouten en misverstanden

• "React is een programmeertaal." Het is een bibliotheek die in JavaScript (of TypeScript) is geschreven en vanuit daar wordt gebruikt.
• "React slaat mijn gegevens op." State leeft in de browser en verdwijnt bij een refresh. Duurzame gegevens hebben een backend en database nodig.
• Geheimen in React-code zetten. Alles in een React-app wordt naar de browser van de bezoeker gestuurd. API-sleutels daarin zijn openbaar. Houd ze op de server.
• "React-apps kunnen niet in zoekresultaten staan." Weergave alleen in de client is zwakker voor zoekmachines, maar vooraf renderen of renderen op de server lost het meeste op.
• Reusachtige componenten. Eén component van 1.000 regels is lastig om veilig te wijzigen, voor mensen en AI. Vraag om kleinere.
• Aannemen dat een React-webapp een telefoonapp is. Hij draait in de browser, ook op telefoons, maar is geen App Store-app.

Wat je aan je AI-builder kunt vragen

• "Splits deze pagina op in kleine, benoemde componenten, en vertel me in welk bestand elk component staat."
• "Maak de ProductCard-component herbruikbaar, met naam, prijs en afbeelding als props."
• "Sla het winkelmandje op in de database zodat het een refresh overleeft."
• "Houd alle API-sleutels op de server; de React-code moet onze eigen API aanroepen."
• "Voeg laad- en foutstatussen toe voor gegevens die van de server komen."
• "Als zichtbaarheid in zoekmachines voor deze pagina's belangrijk is, render ze vooraf of gebruik een opzet met rendering op de server."
• "Leg in begrijpelijke taal uit wat deze fout betekent en uit welk component hij komt."

Voor het grotere plaatje, zie frontend versus backend, en voor het nakijken van wat de AI heeft geschreven, hoe je AI-gegenereerde code nakijkt.

React in Mythex

Tenzij je om iets anders vraagt, start Mythex nieuwe projecten met Vite + React + TypeScript + Tailwind, met een live voorbeeld dat draait terwijl je chat. Je kunt in je eerste prompt een andere opzet noemen — bijvoorbeeld "Gebruik Next.js" of "een eenvoudige statische HTML-landingspagina" — en Mythex kiest die op basis van wat je schrijft; er is geen instellingenscherm voor. De docs-pagina over hoe de techniek wordt gekozen legt de opties uit. De codeeditor is alleen-lezen op Free; op Pro kun je de React-code direct bewerken en het project exporteren om elders verder te werken.

Veelgestelde vragen