Vad är React? En lättförståelig guide för icke-utvecklare

React är ett JavaScript-bibliotek för att bygga användargränssnitt – den del av en app som människor ser och klickar på. Du bygger skärmar av återanvändbara delar som kallas komponenter, till exempel en knapp, ett produktkort eller en hel sida, och React håller skärmen i synk med din data: när datan ändras uppdaterar React de delar av sidan som beror på den. Det skapades på Facebook (nu Meta), är öppen källkod och är ett av de mest använda sätten att bygga webbappar.

Varför det spelar roll när du bygger med AI

Om du bygger en webbapp med ett AI-verktyg finns det god chans att den är skriven i React. Många AI-appbyggare använder React som standard, eftersom det är populärt, väldokumenterat och det finns en enorm mängd React-kod för AI-modeller att ha lärt sig av.

Du behöver inte skriva React för att bygga med AI. Men lite kunskap hjälper dig att:

• Beskriva ändringar exakt. ”Ändra ProductCard-komponenten så att priset är fetstilt” är tydligare än ”gör priserna mer framträdande någonstans”.
• Förstå fel. Meddelanden som ”Cannot read properties of undefined” eller ”Too many re-renders” blir mer begripliga.
• Göra vettiga val. Vanliga React-appar renderas i webbläsaren, vilket påverkar söksynlighet och hastighet vid första laddning. Att veta det hjälper dig avgöra när du ska be om en annan uppsättning.
• Arbeta med utvecklare senare. React är en vanlig kompetens, så en utvecklare kan oftast snabbt ta över en React-kodbas.

En vardaglig jämförelse

Tänk på LEGO. I stället för att snida en hel modell av ett enda block bygger du den av standardklossar. Några klossar gör ett hjul; fyra hjul och några andra delar gör en bil. Vill du att alla bilar ska ha röda hjul ändrar du hjulkonstruktionen en gång.

React-komponenter är klossarna. En Button-komponent används inne i en ProductCard, som används inne i en ProductGrid, som är en del av ShopPage. Ändrar du Button en gång ändras varje knapp i appen.

Den andra halvan av jämförelsen: föreställ dig att LEGO-modellen byggde om sig själv varje gång du ändrade instruktionerna. Det är Reacts andra trick – du beskriver hur skärmen ska se ut för den aktuella datan, och React räknar ut vad som ska ändras på sidan.

Grundidéerna

Komponenter

En komponent är en JavaScript-funktion som returnerar en del av gränssnittet. Reacts dokumentation beskriver en komponent som en del av UI:t som har egen logik och eget utseende. Komponentnamn börjar med en versal.

JSX

Komponenter skrivs oftast i JSX, som ser ut som HTML blandat med JavaScript:

function Greeting() {
  return <h1>Välkommen tillbaka!</h1>;
}

JSX är valfritt, men Reacts dokumentation noterar att de flesta projekt använder det. Det omvandlas till vanlig JavaScript innan det körs i webbläsaren.

Props

Props är de indata du skickar in i en komponent, ungefär som inställningar på en återanvändbar del:

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

Samma ProductCard kan visa vilken produkt som helst.

State

State är information som en komponent minns och som kan ändras medan appen körs – om en meny är öppen, vad som skrivits i en sökruta, hur många artiklar som finns i varukorgen. När state ändras renderar React om komponenten så att skärmen stämmer överens.

Hooks

Hooks är funktioner vars namn börjar med use, till exempel useState (minns ett värde) och useEffect (kör kod efter rendering, till exempel för att hämta data). Du kommer att se dem överallt i AI-genererad React-kod.

Ett genomgånget exempel: en varukorgsräknare

Säg att din nätbutik har en knapp ”Lägg i varukorg” och en varukorgsikon som visar antalet artiklar. I React ser det ungefär ut så här:

import { useState } from "react";

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

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

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

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

Vad som händer när en kund klickar på ”Lägg i varukorg”:

1. Knappens onClick anropar onAdd, som anropar setCartCount.
2. React uppdaterar cartCount-state från 0 till 1.
3. React renderar om Shop och skickar count={1} till CartIcon.
4. Sidan visar nu ”Varukorg (1)”. Ingen skrev kod som sa ”hitta varukorgstexten och ändra den” – skärmen följer datan.

Notera också gränserna. Den här räknaren lever i webbläsarens minne. Laddar du om sidan är den tillbaka på 0. För att behålla en varukorg måste du spara den någonstans som varar – en cookie, webbläsarlagring eller en databas via din backend. React hanterar skärmen; det lagrar inte din data.

Var React passar in i en webbapp

En app med ”Vite + React” renderas i webbläsaren (en single-page app). En Next.js-app kan rendera sidor på servern först, vilket hjälper sökmotorer och hastigheten vid första laddning.

Vanliga begrepp förklarade

Vanliga misstag och missuppfattningar

• ”React är ett programmeringsspråk.” Det är ett bibliotek skrivet i och används från JavaScript (eller TypeScript).
• ”React lagrar min data.” State finns i webbläsaren och försvinner vid omladdning. Varaktig data kräver en backend och en databas.
• Att lägga hemligheter i React-koden. Allt i en React-app skickas till besökarens webbläsare. API-nycklar där är offentliga. Behåll dem på servern.
• ”React-appar kan inte rankas i sök.” Rendering enbart i klienten är svagare för sök, men förrendering eller serverrendering löser det mesta.
• Gigantiska komponenter. En komponent på 1 000 rader är svår för både människor och AI att ändra säkert. Be om mindre.
• Att anta att en React-webbapp är en telefonapp. Den körs i webbläsaren, även på telefoner, men är ingen App Store-app.

Vad du kan be din AI-byggare om

• ”Dela upp den här sidan i små, namngivna komponenter, och berätta i vilken fil varje ligger.”
• ”Gör ProductCard-komponenten återanvändbar, med name, price och image som props.”
• ”Spara varukorgen i databasen så att den överlever en omladdning.”
• ”Behåll alla API-nycklar på servern; React-koden ska anropa vårt eget API.”
• ”Lägg till laddnings- och feltillstånd för data som kommer från servern.”
• ”Om söksynlighet spelar roll för dessa sidor, förrendera dem eller använd en serverrenderad uppsättning.”
• ”Förklara på enkel svenska vad det här felet betyder och vilken komponent det kommer ifrån.”

För den större bilden, se frontend kontra backend, och för att granska det AI:n skrev, hur du granskar AI-genererad kod.

React i Mythex

Om du inte ber om något annat startar Mythex nya projekt på Vite + React + TypeScript + Tailwind, med en live-förhandsvisning som körs medan du chattar. Du kan nämna en annan uppsättning i din första prompt – till exempel ”Använd Next.js” eller ”enkel statisk HTML-landningssida” – och Mythex väljer utifrån det du skriver; det finns ingen inställningsskärm för det. Dokumentationssidan om hur tekniken väljs förklarar alternativen. Kodredigeraren är skrivskyddad på Free; på Pro kan du redigera React-koden direkt och exportera projektet för att fortsätta arbeta med det på annat håll.

Frågor