React — очень популярная UI библиотека, она отвечает только за часть view в модели MVC (Model-View-Controller — «Модель-Представление-Контроллер»). Создана при поддержке Facebook в 2013 году. React невероятно быстрый, за счет виртуального DOM(Document Object Model — «объектная модель документа») и удобный в использовании, он позволяет собирать огромные пользовательские интерфейсы из маленьких кусочков, называемых React компонентами. Данный подход упрощает поддержку и разработку web-приложений.
Например, структура приложения может быть такой:
React-компоненты это маленькие изолированные кусочки кода. Существует два варианта создания компонента — класс и функция.
Функциональные компоненты
Функциональные компоненты очень просты в создании.
Компонент принимает объект props, в котором содержаться значения переданные от родительского компонента. В props можно передавать любые типы, даже другие компоненты.
Функциональный компонент возвращает React-элемент. Он должен быть только один, если их больше, они должны быть обернуты родителем.
Классовые компоненты
Главное отличие классового компонента от функционального это возможность хранить внутреннее состояния.
Классовый компонент должен содержать метод render(), который возвращает React-элемент. Доступ к props осуществляется через this.props. Обновление компонента происходит при изменении пропсов или состояния.
Чтобы получить возможность устанавливать state, нужно определить конструктор и вызвать метод super(), в конструктор и super передаются props. Само состояние изначально определяется в this.state, больше напрямую изменять state нельзя, это может привести к непредсказуемым последствиям.
State — очень важная часть, позволяющая хранить состояния приложения, и если в процессе работы приложения был вызван setState, который изменил state компонента, то компонент будет перерисован.
Компоненты — отличная часть React, делающая процесс разработки и поддержки UI невероятно удобным.