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

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

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

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

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

`import React from 'react'; function App() { // код компонента } export default App;`

Один из компонентов должен быть основным - тем, к которому добавляются остальные компоненты. В React по умолчанию таким компонентом будет компонент `App`. К этому компоненту будут подключаться другие компоненты. Как это делается - мы разберем далее в учебнике.

←→
↑