Úvod do komponentového prístupu v React

Majme webstránku. Na tejto stránke môžeme vyčleniť niektoré bloky: hlavičku, obsah, bočný panel, pätu a tak ďalej. Každý blok je možné rozdeliť na menšie podbloky. Napríklad v hlavičke zvyčajne možno nájsť logo, menu, blok kontaktov a podobne.

V React sa každý takýto blok nazýva komponent. Každý komponent môže obsahovať v sebe menšie komponenty, tie zasa ešte menšie a tak ďalej.

Každému komponentu v React zodpovedá ES6 modul, umiestnený v priečinku src. Názov súboru s modulom sa píše s veľkým začiatočným písmenom a musí zodpovedať funkcii, ktorá sa nachádza v kóde tohto modulu.

Napríklad, súbor s názvom App.js musí obsahovať vo svojom vnútri funkciu App:

App.jsimport React from 'react';

function App() {
  // kód komponentu
}

export default App;

Jeden z komponentov musí byť hlavný - ten, ku ktorému sa pridávajú ostatné komponenty. V React je štandardne takýmto komponentom komponent App. K tomuto komponentu budú pripájané ďalšie komponenty. Ako sa to robí - preberieme neskôr v tutoriáli.