Úvod do komponentového přístupu v Reactu

Předpokládejme, že máme webové stránky. Na těchto stránkách můžeme identifikovat určité bloky: hlavičku, obsah, boční panel, zápatí a tak dále. Každý blok lze rozdělit na menší podbloky. Například v hlavičce obvykle najdeme logo, menu, blok kontaktů a podobně.

V Reactu se každý takový blok nazývá komponenta. Každá komponenta může obsahovat menší komponenty, ty zase další ještě menší a tak dále.

Každé komponentě v Reactu odpovídá ES6 modul, umístěný ve složce src. Název souboru s modulem se píše s velkým písmenem a musí odpovídat funkci, která je umístěna v kódu tohoto modulu.

Například soubor s názvem App.js by měl uvnitř obsahovat funkci App:

App.jsimport React from 'react';

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

export default App;

Jedna z komponent musí být hlavní - tou, ke které se přidávají ostatní komponenty. V Reactu bude touto komponentou ve výchozím nastavení komponenta App. K této komponentě budou připojovány další komponenty. Jak se to dělá - rozebereme dále v učebnici.