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