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