I React utgör komponenter de grundläggande byggstenarna i ett användargränssnitt. De möjliggör för utvecklare att skapa oberoende, återanvändbara delar av användargränssnittet som kan kombineras för att bilda större UI-element.

Du kan se en React-applikation som ett träd av komponenter, där toppkomponenten är roten. Varje komponent ansvarar för att rendera JSX-markup och definiera den önskade HTML-strukturen som visas i webbläsarens DOM.

Funktionella komponenter

Funktionella komponenter är JavaScript-funktioner som returnerar JSX för att definiera struktur och innehåll för ett UI-element. De representerar det moderna sättet att bygga React-applikationer och namnges med versaler, såsom Product eller User, för att särskilja dem från vanliga HTML-element som div eller span.

Funktionella komponenter erbjuder flera fördelar:

• Mindre boilerplate: Funktionella komponenter minskar mängden standardkod, vilket gör dem mer koncisa och lättare att arbeta med;
• Enklare att uppfatta: De är enklare att förstå och uppfatta, särskilt för utvecklare som är nya inom React;
• Enklare att testa: Funktionella komponenter underlättar testning tack vare sin tydliga struktur;
• Ingen kontext (this): Till skillnad från klasskomponenter involverar funktionella komponenter inte kontexten (this), vilket förenklar koden. Här är ett exempel på en funktionell komponent:

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

I det här exemplet är Product en funktionell komponent som representerar ett produktkort.

Funktionella komponenter utgör majoriteten av strukturen i en React-applikation och fungerar som grundläggande byggstenar för att skapa användargränssnitt.