Использование компонентов в 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>