Komponendipõhise lähenemise tutvustus Reactis

Oletame, et meil on veebisait. Sellel saidil saame eristada mõningaid plokke: päis, sisu, külgriba, jalus jne. Iga ploki saab jagada väiksemateks alaplokkideks. Näiteks päises saab tavaliselt eristada logo, menüü, kontaktide ploki jne.

React'is nimetatakse iga sellist plokki komponendiks. Iga komponent võib sisaldada endas väiksemaid komponente, need omakorda veel väiksemaid ja nii edasi.

Igal komponendil React'is vastab ES6 moodul, mis asub kaustas src. Moodulifaili nimi kirjutatakse suure algustähega ja peab vastama funktsioonile, mis asub selle mooduli koodis.

Näiteks fail nimega App.js peab sisaldama endas funktsiooni App:

import React from 'react';

function App() {
	// komponendi kood
}

export default App;

Üks komponentidest peab olema põhiline - see, millele teised komponendid on lisatud. React'is on vaikimisi selliseks komponendiks komponent App. Sellele komponendile ühendatakse teised komponendid. Kuidas seda tehakse - uurime edasi õpikus.