Hva er React? En guide for nybegynnere

01Hva er React, og hva brukes det til?

Det korteste svaret på spørsmålet hva er React er dette: et JavaScript-bibliotek for å bygge brukergrensesnitt som kjører i nettleseren. Du definerer delene av en nettside, som meny, produktkort, handlekurv eller skjema, hver for seg, og setter dem sammen til hele siden.

React er ikke et rammeverk (framework), men et bibliotek. Til ruting, datahenting eller oppgaver på serversiden trengs tilleggsverktøy. Denne fleksibiliteten gjør at det kan brukes i alle størrelser, fra en liten widget til et stort administrasjonspanel.

For å forstå React må du først kjenne språket selv. Mangler du grunnlaget, anbefaler vi at du starter med artikkelen Hva er JavaScript. Alt du skriver i React er til slutt JavaScript.

02Hva brukes React til?

Den virkelige styrken til React er at grensesnittet oppdateres automatisk når data endres. Når et produkt legges i handlekurven, øker telleren, og når et filter velges, oppdateres listen. Utvikleren slipper å skrive disse oppdateringene for hånd, en etter en.

En annen gevinst er enkelt vedlikehold. Fordi grensesnittet er delt i komponenter, trenger du bare å endre én fil hvis du vil endre utseendet på en knapp, og endringen slår inn overalt hvor komponenten brukes. I store team blir også arbeidsfordelingen tydeligere, fordi alle kan jobbe på ulike komponenter.

At React har et stort fellesskap, er også en praktisk fordel. For behov som datovelger, tabell, diagram eller skjemavalidering finnes modne åpen kildekode-pakker. Men hver avhengighet gir prosjektet en vedlikeholdsbyrde, så pakkevalget bør gjøres bevisst.

Derfor kommer React særlig til sin rett på skjermer med mye interaksjon med brukeren. Typiske bruksområder er:

• Administrasjonspaneler og rapporteringsskjermer
• Produktlister, filtre og handlekurvflyter i nettbutikker
• Flertrinnsflyter som booking-, timebestillings- og tilbudsskjemaer
• Live-skjermer som viser sanntidsdata (bestillinger, lager, meldinger)
• Mobilapper med React Native (samme tankemodell, annen plattform)

03Hvordan fungerer komponentstrukturen i React?

I React er alt en komponent. En komponent er en funksjon som rommer en del av grensesnittet og atferden til den. Du skriver en «Produktkort»-komponent én gang og bruker den hundrevis av ganger på siden med ulike data.

Komponenter tar imot data utenfra med props, og holder selv på informasjon som endres med state. Props er som parameteren til en funksjon, mens state er komponentens hukommelse. Når state endres, tegner React komponenten på nytt.

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)}>Øk</button>
    </div>
  );
}

export default Sayac;

Hva er JSX?

Delen som ligner HTML i eksemplet over, er JSX. JSX er en syntaks som lar deg beskrive grensesnittet lesbart inne i JavaScript. Nettleseren forstår ikke JSX direkte, og byggeverktøy gjør det om til vanlige JavaScript-kall.

Hva gir hooks?

Hooks som useState og useEffect gir funksjonskomponenter evnen til å holde tilstand, hente data og håndtere bivirkninger. For en nybegynner holder det først å forstå useState og useEffect godt.

04Virtuell DOM og ytelse

Sidestrukturen i nettleseren kalles DOM, og det er kostbart å endre DOM-en ofte. React holder en lett kopi av grensesnittet i minnet, og den kalles den virtuelle DOM-en. Når data endres, sammenligner React den nye kopien med den gamle og bruker bare forskjellen på den ekte DOM-en.

Tilnærmingen sparer utvikleren for å skrive enkeltstående DOM-operasjoner. Likevel er ikke den virtuelle DOM-en alene en hastighetsgaranti. Stor pakkestørrelse, unødvendig ny tegning og uoptimaliserte bilder kan gjøre en React-side treg også.

Hastigheten brukeren opplever, måles med Core Web Vitals: LCP ≤ 2,5 sek, INP ≤ 200 ms og CLS ≤ 0,1 regnes som gode verdier. For å nå disse terskelene bør hastighet og ytelse behandles som en egen post, uavhengig av teknologien.

05Hvilke prosjekter passer React for?

Ikke alle nettsider trenger React. For en presentasjonsside på noen få sider er ren HTML, CSS og litt JavaScript ofte raskere og mer økonomisk. Verdien av React blir tydelig etter hvert som interaksjon og datamengde øker.

Tabellen nedenfor gir en generell ramme som gjør avgjørelsen enklere:

06Veikart for å lære React

Den vanligste feilen blant dem som vil lære React, er å gå rett på biblioteket før JavaScript-grunnlaget sitter. Rekkefølgen nedenfor gir en solid vei til varig læring:

1. Lær sidens skjelett og layoutlogikken med HTML og CSS.
2. Forstå variabler, arrays, objekter, funksjoner, map/filter og async/await i JavaScript.
3. Øv på komponenter, props og state med veiledningen i den offisielle dokumentasjonen.
4. Lag et lite prosjekt: en gjøremålsliste, en værapp eller et produktfilter.
5. Gå videre til skjemahåndtering, datahenting og ruting.
6. Legg til TypeScript for typesikkerhet i prosjekter som vokser.

Starte det første prosjektet

Den vanlige måten å lage et nytt React-prosjekt på er å bruke et byggeverktøy som Vite. Du må ha gjeldende LTS-versjon av Node.js installert på maskinen. For oppdaterte anbefalinger følger du den offisielle dokumentasjonen på react.dev.

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

07React, TypeScript og økosystemet

React alene er et grensesnittlag. I et ekte prosjekt velges også verktøyene rundt det. Rammeverk som Next.js for rendering på serversiden og ruting, TypeScript for typesikkerhet og verktøy som Testing Library for testing brukes ofte.

Etter hvert som teamet vokser, blir TypeScript nesten en standard. Hvilke props komponentene venter, står tydelig i koden, og feil fanges under kompilering. For detaljer kan du se artikkelen vår Hva er TypeScript.

Det er også viktig å avklare hvilket lag i prosjektet React hører til. Grensesnittet er frontend, mens databasen og forretningsreglene er backend. Grensen mellom de to har vi forklart i artikkelen om forskjellen på frontend og backend.

08React alene gir ikke et godt grensesnitt

React er en god måte å kode grensesnittet på, men bestemmer ikke hva som skal vises, i hvilken rekkefølge eller til hvem. Disse avgjørelsene er jobben til brukeropplevelsesdesign. Å skrive en skjerm med uklar flyt i den mest moderne teknologien betyr bare å produsere problemet raskere.

Derfor planlegges først brukerreisen, skjermskissene og komponentbiblioteket i prosjektene, og koden bygges oppå det. Arbeid med UI/UX-design gir også et naturlig kart over React-komponentene.

På sider der synlighet i søk er viktig, må teknisk grunnlag og innholdsstruktur ses i sammenheng. I tilnærmingen til SEO-vennlig webdesign behandles overskriftshierarki, HTML generert på serveren og hastighet samtidig.