Úvod do komponent v Reactu

Podívejme se na libovolný web. Skládá se ze sady nezávislých bloků: záhlaví, postranní panely, zápatí, obsah. Lze říci, že tyto bloky jsou komponenty ve smyslu, jaký je chápán v Reactu.

Pokud se podíváme na stejné záhlaví, co v něm lze vyčlenit blok s logem, blok kontaktů, blok s menu a tak dále. To znamená, že komponenty mohou sestávat z jiných podkomponent.

Obdobně je tomu i v Reactu - web je postaven ze sady komponent, které naopak mohou obsahovat další komponenty.

V Reactu je každá komponenta samostatný modul. Vývoj obvykle začíná hlavní komponentou App, která obsahuje ostatní.

Pojďme si procvičit vytváření nových komponent.

Dejme tomu, že pro příklad potřebujeme komponentu zobrazující data produktu. K tomu potřebujeme v pracovní složce vytvořit soubor Product.js a přidat do něj následující kód:

import React from 'react';

function Product() {
	return <p>
		product
	</p>;
}

export default Product;

Jak vidíte, nyní naše komponenta vrací odstavec s textem. V následujících lekcích tento kód upravíme tak, aby vracela data produktu. Ale prozatím ponechme odstavec s nějakým počátečním textem.

Pojďme nyní zobrazit naši vytvořenou komponentu v komponentě App. Předpokládejme, že náš App má nyní následující kód:

import React from 'react';

function App() {
	return <div>
		text
	</div>;
}

export default App;

Nejprve musíme importovat vytvořenou komponentu produktu:

import React from 'react';
import Product from './Product'; // importujeme produkt

function App() {
	return <div>
		text
	</div>;
}

export default App;

Po takovém importu lze uvnitř komponenty App použít komponentu Product.