Vad är React? En guide för nybörjare

01Vad är React och vad används det till?

Det kortaste svaret på vad React är: ett JavaScript-bibliotek för att bygga användargränssnitt som körs i webbläsaren. Du definierar delarna av en webbsida, som meny, produktkort, varukorg eller formulär, var för sig och sätter sedan ihop dem till hela sidan.

React är inte ett ramverk (framework) utan ett bibliotek. För routing, datahämtning och serversidan behövs extra verktyg. Tack vare den flexibiliteten kan React användas i alla skalor, från en liten widget till en stor adminpanel.

För att förstå React måste man först känna till själva språket. Saknar du grunderna rekommenderar vi att du börjar med artikeln Vad är JavaScript?; allt du skriver i React är till slut JavaScript.

02Vad används React till?

Reacts stora styrka är att gränssnittet uppdateras automatiskt när data ändras. När en produkt läggs i varukorgen ökar räknaren, och när ett filter väljs uppdateras listan; utvecklaren slipper skriva alla uppdateringar för hand.

En annan vinst är enkelt underhåll. Eftersom gränssnittet delas upp i komponenter rör du bara en enda fil när du vill ändra hur en knapp ser ut, och ändringen slår igenom överallt där komponenten används. I stora team kan alla arbeta med olika komponenter, vilket också gör arbetsfördelningen tydligare.

Att React har en stor community är också en praktisk fördel. För behov som datumväljare, tabeller, diagram eller formulärvalidering finns mogna paket med öppen källkod; men varje beroende ger projektet en underhållsbörda, så paketen bör väljas medvetet.

Därför passar React särskilt bra för skärmar med mycket interaktion. Typiska användningsområden är:

• Adminpaneler och rapportvyer
• Produktlistor, filter och varukorgsflöden i e-handel
• Flerstegsflöden som formulär för bokning, tidsbokning och offert
• Live-vyer med data i realtid (order, lager, meddelanden)
• Mobilappar med React Native (samma tänkesätt, annan plattform)

03Så fungerar Reacts komponentstruktur

I React är allt en komponent. En komponent är en funktion som rymmer en del av gränssnittet och dess beteende. Du skriver en ”Produktkort”-komponent en gång och använder den hundratals gånger på sidan med olika data.

Komponenter tar emot data utifrån via props och håller föränderlig information internt med state. Props är som parametrarna till en funktion; state är komponentens minne. När state ändras ritar React om komponenten.

import { useState } from "react";

function Sayac({ baslik }) {
  const [adet, setAdet] = useState(0);

  return (
    <div>
      <h3>{baslik}</h3>
      <p>Adet: {adet}</p>
      <button onClick={() => setAdet(adet + 1)}>Öka</button>
    </div>
  );
}

export default Sayac;

Vad är JSX?

Den del i exemplet ovan som liknar HTML är JSX. JSX är en syntax som låter dig beskriva gränssnittet läsbart direkt i JavaScript. Webbläsaren förstår inte JSX direkt; byggverktyg omvandlar det till vanliga JavaScript-anrop.

Vad ger hooks?

Hooks som useState och useEffect ger funktionskomponenter förmågan att hålla tillstånd, hämta data och hantera sidoeffekter. För en nybörjare räcker det först att förstå useState och useEffect ordentligt.

04Virtuell DOM och prestanda

Sidstrukturen i webbläsaren kallas DOM, och att ändra DOM ofta är kostsamt. React håller en lätt kopia av gränssnittet i minnet, den så kallade virtuella DOM:en. När data ändras jämför React den nya kopian med den gamla och tillämpar bara skillnaden på den riktiga DOM:en.

Det här sparar utvecklaren från att skriva enskilda DOM-operationer. Ändå är den virtuella DOM:en ingen hastighetsgaranti i sig. Stora paketstorlekar, onödiga omritningar och ooptimerade bilder kan göra även en React-sajt långsam.

Den hastighet användaren upplever mäts med Core Web Vitals: LCP ≤ 2,5 s, INP ≤ 200 ms och CLS ≤ 0,1 räknas som bra. För att klara de tröskelvärdena bör hastighet och prestanda hanteras som en egen post, oberoende av teknik.

05När passar React?

Alla webbplatser behöver inte React. För en presentationssajt på några sidor är vanlig HTML, CSS och lite JavaScript oftast snabbare och mer ekonomiskt. Värdet av React blir tydligare ju mer interaktion och data som finns.

Tabellen nedan ger en allmän ram som underlättar beslutet:

06Färdplan för att lära sig React

Det vanligaste misstaget bland dem som vill lära sig React är att gå rakt på biblioteket innan JavaScript-grunderna sitter. Ordningen nedan är en stabil väg till bestående kunskap:

1. Lär dig sidans skelett och layoutlogik med HTML och CSS.
2. Ta till dig variabler, arrayer, objekt, funktioner, map/filter och async/await i JavaScript.
3. Öva på komponenter, props och state med handledningen i den officiella dokumentationen.
4. Bygg ett litet projekt: en att göra-lista, en väderapp eller ett produktfilter.
5. Gå vidare till formulärhantering, datahämtning och routing.
6. Lägg till TypeScript för typsäkerhet i växande projekt.

Starta det första projektet

För ett nytt React-projekt är det vanligt att använda ett byggverktyg som Vite. På din dator ska den aktuella LTS-versionen av Node.js vara installerad. För aktuella rekommendationer, följ den officiella dokumentationen på react.dev.

npm create vite@latest ilk-react-projem -- --template react
cd ilk-react-projem
npm install
npm run dev

07React, TypeScript och ekosystemet

React är bara gränssnittslagret; i ett verkligt projekt väljs också verktygen runt det. Ramverk som Next.js för serversidesrendering och routing, TypeScript för typsäkerhet och verktyg som Testing Library för tester används ofta.

När teamet växer blir TypeScript nästan standard; vilka props en komponent förväntar sig skrivs uttryckligen i koden och fel fångas redan vid kompilering. Mer om detta hittar du i vår artikel Vad är TypeScript?.

Det är också viktigt att klargöra vilket lager i projektet React hör till. Gränssnittet är frontend, medan databasen och affärsreglerna hör till backend; gränsen mellan de två har vi beskrivit i skillnaden mellan frontend och backend.

08React räcker inte för ett bra gränssnitt

React är ett bra sätt att koda ett gränssnitt, men det avgör inte vad som ska visas, i vilken ordning eller för vem. De besluten hör till UX-design. Att bygga en skärm med oklart flöde i den modernaste tekniken betyder bara att man skapar problemet snabbare.

Därför planeras först användarresan, skärmskisserna och komponentbiblioteket; koden byggs ovanpå det. Arbetet med UI/UX-design ger också en naturlig karta över Reacts komponenter.

På sidor där synlighet i sökresultaten är viktig måste teknisk grund och innehållsstruktur ses tillsammans. I SEO-anpassad webbdesign behandlas rubrikhierarki, HTML som genereras på servern och hastighet samtidigt.