Reactissa komponentit ovat käyttöliittymän perusrakennuspalikoita. Ne mahdollistavat kehittäjille itsenäisten, uudelleenkäytettävien käyttöliittymäosien luomisen, joita voidaan yhdistellä laajemmiksi käyttöliittymäelementeiksi.

React-sovellusta voi ajatella komponenttipuuna, jossa ylimmän tason komponentti toimii juurena. Jokainen komponentti vastaa JSX-merkinnän renderöinnistä ja määrittelee halutun HTML-rakenteen, joka näytetään selaimen DOMissa.

Funktionaaliset komponentit

Funktionaaliset komponentit ovat JavaScript-funktioita, jotka palauttavat JSX:ää määritelläkseen käyttöliittymäelementin rakenteen ja sisällön. Ne edustavat nykyaikaista tapaa rakentaa React-sovelluksia ja nimetään isolla alkukirjaimella, kuten Product tai User, jotta ne erottuvat tavallisista HTML-elementeistä, kuten div tai span.

Funktionaalisilla komponenteilla on useita etuja:

• Vähemmän rutiinikoodia: Funktionaaliset komponentit vähentävät rutiinikoodin määrää, mikä tekee niistä tiiviimpiä ja helpompia käyttää;
• Helpompi hahmottaa: Ne ovat helpommin ymmärrettäviä, erityisesti Reactin uusille kehittäjille;
• Helpompi testata: Funktionaaliset komponentit helpottavat testaamista niiden suoraviivaisuuden ansiosta;
• Ei kontekstia (this): Toisin kuin luokkakomponenteissa, funktionaalisissa komponenteissa ei käytetä kontekstia (this), mikä yksinkertaistaa koodia. Tässä esimerkki funktionaalisesta komponentista:

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

Tässä esimerkissä Product on funktiokomponentti, joka edustaa tuotekorttia.

Funktiokomponentit muodostavat suurimman osan React-sovelluksen rakenteesta ja toimivat käyttöliittymän olennaisina rakennuspalikoina.