Używanie komponentów w React

Każdemu podłączonemu komponentowi odpowiada swój znacznik JSX. Na przykład, mamy komponent Product, a zatem odpowiada mu następujący znacznik:

jsx<Product />

Nazwę znacznika komponentu należy koniecznie pisać z wielkiej litery, aby React mógł odróżnić wywołanie komponentu od użycia znacznika HTML.

A zatem, użyjmy wewnątrz komponentu App komponentu Product, pisząc odpowiadający mu znacznik:

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

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

export default App;

W wyniku renderowania otrzymamy następujące:

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