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

Как использовать

Каждому подключенному компоненту соответствует свой 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.

Несколько экземляров компонента

Можно вставить несколько продуктов. Для этого нужно просто написать несколько тегов компонента:

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

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

export default App;

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

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

Добавьте в компонент App несколько экземляров компонента User, созданного вами в предыдущей задаче.