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

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

В React каждый такой блок называется компонентом. Каждый компонент может содержать в себе более мелкие компоненты, те в свою очередь еще более мелкие и так далее.

Каждому компоненту в React соответствует ES6 модуль, расположенный в папке src. Имя файла с модулем пишется с большой буквы и должно соответствовать функции, которая расположена в коде этого модуля. Например, в

Например, файл с названием App.js должен содержать внутри себя функцию App:

import React from 'react';

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

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

К этому компоненту будут подключаться другие компоненты. Как это делается - мы разберем далее в учебнике.

Макет сайта
В папке my-app/public в файле index.html расположен макет сайта. Вы можете размещать в нем любой HTML код - и вы увидите результат этого кода в браузере.

Кроме того, в макете сайта есть специальный див с id, равным root, в который монтируется основной компонент. Мод монтированием понимается то, что в этот див будет выводится результат работы нашего компонента.

Результат работы компонента
В див с результатом будет выведено то, что возвращает через return функция компонента. В следующем примере это будет див с текстом:

function App() {
return <div>
text
</div>;
}
Обратите внимание на то, что див мы пишем без кавычек - просто пишем тег в JavaScript коде! Это основная особенность React.

На самом деле в React мы пишем не на языке JavaScript, а на языке JSX, который мы будем изучать в следующих уроках.

Процесс преобразования JSX в итоговый HTML код называется рендерингом.