I React er komponenter de grundlæggende byggesten i et brugerinterface. De gør det muligt for udviklere at oprette uafhængige, genanvendelige dele af brugerinterfacet, som kan kombineres for at danne større UI-elementer.

Du kan betragte en React-applikation som et træ af komponenter, hvor topkomponenten fungerer som roden. Hver komponent er ansvarlig for at gengive JSX-markup og definere den ønskede HTML-struktur, der vises i Browser DOM.

Funktionelle komponenter

Funktionelle komponenter er JavaScript-funktioner, der returnerer JSX for at definere strukturen og indholdet af et UI-element. De repræsenterer den moderne tilgang til at bygge React-applikationer og navngives med store begyndelsesbogstaver, såsom Product eller User, for at adskille dem fra standard HTML-elementer som div eller span.

Funktionelle komponenter har flere fordele:

• Mindre boilerplate: Funktionelle komponenter reducerer boilerplate-kode, hvilket gør dem mere koncise og lettere at arbejde med;
• Lettere at overskue: De er lettere at forstå og overskue, især for udviklere, der er nye i React;
• Lettere at teste: Funktionelle komponenter gør testning nemmere på grund af deres enkle natur;
• Ingen kontekst (this): I modsætning til klassekomponenter involverer funktionelle komponenter ikke kontekst (this), hvilket forenkler koden. Her er et eksempel på en funktionel komponent:

const Product = () => (
  <div>
    <h2>HolaFood</h2>
    <p>Price: $19.99</p>
    <button type="button">Add to Cart</button>
  </div>
);

I dette eksempel er Product en funktionel komponent, der repræsenterer et produktkort.

Funktionelle komponenter udgør størstedelen af strukturen i en React-applikation og fungerer som de væsentlige byggesten til oprettelse af brugergrænseflader.