# Введение в компоненты React

Взглянем на любой сайт. Он состоит из набора независимых блоков: хедер, сайдбары, футер, контент. Можно сказать, что эти блоки и есть компоненты в том смысле, в котором подразумевается в React.

Если посмотреть на тот же хедер, что в нем можно выделить блок с логотипом, блок контактов, блок с меню и так далее. То есть компоненты могут состоять из других подкомпонентов.

Аналогичным образом дело обстоит в React - сайт строится из набора компонентов, которые в свою очередь могут содержать другие компоненты.

В React каждый компонент представляет собой отдельный модуль. Обычно разработка начинается с главного компонента `App`, который содержит в себе остальные.

Давайте потренируемся создавать новые компоненты.

Пусть для примера нам нужен компонент, выводящий данные продукта. Для этого нам нужно в рабочей папке создать файл `Product.js` и добавить в него следующий код:

`import React from 'react'; function Product() { return <p> product </p>; } export default Product;`

Как вы видите, сейчас наш компонент возвращает абзац с текстом. В следующих уроках мы подправим этот текст так, чтобы возвращались данные продукта, оформленные в нужную нам верстку. Но пока для разминки оставим просто абзац с заготовочным текстом.

Давайте теперь выведем наш созданный компонент в компоненте `App`. Пусть сейчас наш `App` имеет следующий код:

`import React from 'react'; function App() { return <div> text </div>; } export default App;`

Для начала нам нужно импортировать созданный нами компонент с продуктом:

`import React from 'react'; import Product from './Product'; // импортируем продукт function App() { return <div> text </div>; } export default App;`

После такого импорта внутри компонента `App` можно использовать компонент `Product`.

←→
↑