Hvorfor React?

React er et bibliotek for å bygge grensesnitt av komponenter — gjenbrukbare biter med grensesnitt som har et navn, og som settes sammen som byggeklosser. Denne leksjonen handler om hvorfor den ideen ble så utbredt, og like viktig: når React faktisk er verdt det.

Problemet komponenter løser

Tenk på en butikkside med hundre produkter. Uten komponenter kopierer du den samme kortmarkeringen hundre ganger — og endrer du ett av dem, glemmer du de nitti-ni andre. Med React skriver du komponenten én gang og bruker den så mange steder du vil, med ulike data inn. Trenger kortet en endring, gjør du den ett sted — og hundre steder på siden oppdateres sammen.

1function Produktkort({ navn, pris }) {2  return (3    <article className="kort">4      <h2>{navn}</h2>5      <p>{pris} kr</p>6    </article>7  );8}9 10// Brukes slik, med ulike data hver gang:11<Produktkort navn="Trelys" pris="249" />12<Produktkort navn="Ullsko" pris="599" />

Dette er ekte React-kode. Ser strukturen kjent ut? En komponent er bare en funksjon som returnerer markering — markeringen heter JSX — og verdien i {navn} settes inn der dataene kommer fra. Du skal skrive din første i neste leksjon.

Når React er verdt det

• siden er et *program*: mye som endrer seg mens brukeren ser på den
• samme grensesnittbiter brukes mange steder — kort, knapper, skjemaer
• flere folk jobber i koden og trenger ryddige, navngitte biter
• data hentes og oppdateres fra en server uten at siden lastes på nytt

React er ikke alltid svaret

En enkel side — en tekstside, et kontaktskjema, en liten portefølje — trenger ingen React. Vanlig HTML, CSS og litt JavaScript er raskere å lage, raskere å laste og enklere å vedlikeholde. React legger til byggeverktøy, avhengigheter og en hel tankegang, og det er en kostnad du bare bør betale når siden faktisk trenger den.

Det er også verdt å vite hva React er: et bibliotek, ikke et språk. JSX-en du så over kan nettleseren ikke lese rått — den må kompileres av byggeverktøy før den blir ekte JavaScript. Resten av kurset bygger tankegangen steg for steg: først komponenter, så props og state, så lister og hendelser, og til slutt data fra et API.