Введение в компонентный подход в React
Пусть у нас есть сайт. На этом сайте мы можем выделить некоторые блоки: хедер, контент, сайдбар, футер и так далее. Каждый блок можно разделить на более мелкие подблоки. К примеру в хедере обычно можно выделить логотип, менюшку, блок контактов и так далее.
В React каждый такой блок называется компонентом. Каждый компонент может содержать в себе более мелкие компоненты, те в свою очередь еще более мелкие и так далее.
Каждому компоненту в React соответствует
ES6 модуль, расположенный в папке src.
Имя файла с модулем пишется с большой буквы
и должно соответствовать функции, которая
расположена в коде этого модуля.
Например, файл с названием App.js
должен содержать внутри себя функцию App:
import React from 'react';
function App() {
// код компонента
}
export default App;
Один из компонентов должен быть основным
- тем, к которому добавляются остальные компоненты.
В React по умолчанию таким компонентом будет
компонент App.
К этому компоненту будут подключаться другие
компоненты. Как это делается - мы разберем
далее в учебнике.