Иерархия компонентов
В любом приложении React должен быть один корневой компонент, который включает другие компоненты.
Кроме этого, можно объединить в отдельный компонент другие компоненты, которые выполняют схожий функционал, например, список постов.
На изображении выше получается, что корневой компонент включает в себя три компонента, а компонент, объединяющий схожие компоненты, включает в себя другие три компонента. Получается чёткая иерархия компонентов в этом конкретном примере.
Компоненты можно и нужно переиспользовать.
С помощью компонентов можно создавать другие страницы приложения с другим расположением компонентов на странице.
Из чего состоят компоненты React
Каждый компонент React состоит из HTML, CSS и JavaScript, т.е. все это можно объединить в одном компоненте React.
- HTML – создать структуру компонента;
- CSS – добавить стили определённым элементам компонента;
- JavaScript – реализовать логику поведения компонента и изменение его состояния.
Создание компонентов в React
В современных React приложениях любой компонент можно создать с помощью функции JavaScript. Такие компоненты называются функциональными компонентами.
При создании функциональных компонентов в React можно использовать как традиционное объявление функций (через ключевое слово function), так и стрелочные функции.
Преимущество использование стрелочных функций в том, что переменная, которая объявлена в JavaScript используя const не может иметь другое значение.
Компоненты в React можно также создавать с помощью классов JavaScript, при этом такие классы должны обязательно иметь метод render(), который определяет как раз то, что подлежит рендерингу.
Создание компонентов с помощью классов называют классовыми компонентами и в современном приложении React как правило не используют, а для создания компонентов используют функции.