Používání komponent v Reactu

Každé připojené komponentě odpovídá její vlastní JSX tag. Například, máme komponentu Product, což znamená, že jí odpovídá následující tag:

jsx<Product />

Název tagu komponenty je nutné psát s velkým počátečním písmenem, aby React dokázal rozlišit volání komponenty od použití HTML tagu.

Takže, uvnitř komponenty App použijme komponentu Product napsáním jí odpovídajícího tagu:

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

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

export default App;

Výsledkem po vykreslení bude následující:

html<div>
  <p>
    product
  </p>
</div>