Использование компонентов в React

Каждому подключенному компоненту соответствует свой JSX тег. К примеру, у нас есть компонент Product, а значит ему соответствует тег <Product />.

Название тега компонента обязательно следует писать с большой буквы, чтобы React мог отличить вызов компонента от использования тега HTML.

Итак, давайте внутри компонента App используем компонент Product, написав соответствующий ему тег:

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

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

export default App;

В результате после рендиренга получится следующее:

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

Сделайте компонент User, который будет выводить данные юзеров. Пусть сейчас этот компонент просто выводит какой-нибудь текст. Используйте этот компонент в компоненте App.