Úvod do komponentov React

Pozrime sa na ľubovoľnú webovú stránku. Skladá sa zo súboru nezávislých blokov: hlavička, bočné panely, pätka, obsah. Dá sa povedať, že tieto bloky sú komponentmi v zmysle, ako sa to chápe v Reacte.

Ak sa pozrieme na tú istú hlavičku, čo v nej môžeme vyčleniť blok s logom, blok kontaktov, blok s ponukou a tak ďalej. To znamená, že komponenty môžu pozostávať z ďalších podkomponentov.

Analogicky je tomu v Reacte - webová stránka sa buduje zo súboru komponentov, ktoré môžu obsahovať ďalšie komponenty.

V Reacte je každý komponent samostatný modul. Vývoj zvyčajne začína hlavným komponentom App, ktorý obsahuje v sebe ostatné.

Poďme si zacvičiť vytváranie nových komponentov.

Nech pre príklad potrebujeme komponent, ktorý zobrazí dáta produktu. Na to potrebujeme v pracovnom priečinku vytvoriť súbor Product.js a pridať do neho nasledujúci kód:

jsximport React from 'react';

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

export default Product;

Ako vidíte, momentálne náš komponent vracia odsek s textom. V nasledujúcich lekciách vylepšíme tento kód tak, aby vracal dáta produktu. Ale zatiaľ na začiatok nechajme odsek s nejakým počiatočným textom.

Poďme teraz zobraziť náš vytvorený komponent v komponente App. Nech má teraz náš App nasledujúci kód:

jsximport React from 'react';

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

export default App;

Na začiatok potrebujeme importovať vytvorený komponent s produktom:

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

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

export default App;

Po takomto importe je možné vnútri komponentu App používať komponent Product.