Выкарыстанне кампанентаў у React

Кожнаму падключанаму кампаненту адпавядае свой JSX тэг. Напрыклад, у нас ёсць кампанент Product, а значыць яму адпавядае наступны тэг:

jsx<Product />

Назву тэга кампанента абавязкова трэба пісаць з вялікай літары, каб React мог адрозніць выклік кампанента ад выкарыстання тэга HTML.

Такім чынам, давайце ўнутры кампанента App выкарастаем кампанент Product, напісаўшы яму адпаведны тэг:

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

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

export default App;

У выніку пасля рэндэрынгу атрымаецца наступнае:

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