Введение в компоненты 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.