Johdatus komponenttilähestymistapaan Reactissa

Oletetaan, että meillä on verkkosivusto. Tällä sivustolla voimme tunnistaa tiettyjä lohkoja: ylätunniste, sisältö, sivupalkki, alatunniste ja niin edelleen. Jokainen lohko voidaan jakaa pienempiin alalohkoihin. Esimerkiksi ylätunnisteessa voidaan yleensä erottaa logo, valikko, yhteystietolohko ja niin edelleen.

Reactissa jokaista tällaista lohkoa kutsutaan komponentiksi. Jokainen komponentti voi sisältää sisällään pienempiä komponentteja, ne puolestaan vielä pienempiä ja niin edelleen.

Jokaista komponenttia Reactissa vastaa ES6-moduuli, joka sijaitsee src-kansiossa. Moduulin tiedoston nimi kirjoitetaan isolla alkukirjaimella ja sen on vastattava moduulin koodissa määriteltyä funktiota.

Esimerkiksi tiedosto nimeltä App.js tulee sisältää funktion App:

import React from 'react';

function App() {
	// komponentin koodi
}

export default App;

Yhden komponentin on oltava pääkomponentti - se, johon muut komponentit liitetään. Reactissa oletusarvoisesti tämä komponentti on komponentti App. Tähän komponenttiin liitetään muita komponentteja. Miten tämä tehdään - käsittelemme sitä myöhemmin oppaassa.