Любое приложение React состоит из компонентов.
На рисунке выше пример веб-страницы, которая скомпонована из разных компонентов.
Характеристики компонентов
1. Компоненты можно использовать многократно
Один и тот же компонент можно помещать в разных местах веб-страницы, а также на разных страницах веб-приложения.
2. Компоненты формируют чёткую иерархическую структуру
Есть родительские компоненты, которые включают в себя дочерние компоненты. Дочерние компоненты, так же в свою очередь могут являться родительскими компонентами относительно других дочерних компонентов. Простыми словами есть чёткая вложенность компонентов друг в друга.
Существует так же один, так называемый «корневой компонент» в любом React приложении, который включает в себя остальные дочерние компоненты и их потомки.
3. Видом компонентов можно управлять извне с помощью свойств.
Вид компонента может быть изменен с помощью свойств, которые передаются от родительского компонента – дочернему. Можно провести аналогию с функцией, в которую можно передать те или иные аргументы. Точно так же и в компонентах React, где с помощью свойств можно, например, изменять внешний вид кнопок и т.п.
Свойства, которые дочерний компонент получил от своего родительского компонента позволяют влиять на внешний вид этого дочернего компонента, а также на его поведение.
Кроме того, эти свойства можно передавать дальше другим дочерним компонентам.
4. Компоненты могут иметь своё собственное состояние
Состояние компонентов может изменяться в процессе жизненного цикла приложения, а также жизненного цикла самого компонента. Потому что определённый компонент может появляться в веб-приложении, потом изменять своё состояние, а потом исчезать из веб-приложения, когда клиент, например, переходит на другую веб-страницу приложения.
5. Каждый компонент отвечает за отдельную логическую часть интерфейса.
В целом этот пункт относится к задаче разработчика, который должен разделять приложение так, чтобы каждый компонент выполнял свою определённую задачу, был изолирован от других компонентов.
