React-компоненты

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 невероятно удобным.

Читайте также:

Зачем вам аккаунт-менеджер

(с) “Ну ты же аккаунты в Инстаграме ведешь?” Мама нашего аккаунт-менеджера Валерии   Впервые обращаясь в рекламное агентство, клиенты задают…

Подробнее
#Интересно

Необходимость семантической верстки и доступности

  Вместе с понятием юзабилити (usability) не так давно появилось понятие accessibility, или доступность для web-приложений. Accessibility — этот термин…

Подробнее
#Разработка

Digital 20.20

  Тренды не меняются раз в год, под куранты, но в преддверии нового десятилетия все говорят о трендах будущего года….

Подробнее
#Интересно

SEO или контекст?

Если бы нам давали по рублю за каждый вопрос “Что порекомендуете, SEO, или контекст?”, Дональд Трамп уже плакал бы горючими…

Подробнее
#Контекст

React-компоненты

React — очень популярная UI библиотека, она отвечает только за часть view в модели MVC (Model-View-Controller — «Модель-Представление-Контроллер»). Создана при…

Подробнее
#Разработка

This в JavaScript

This в js является камнем преткновения начинающих разработчиков, все им пользуются, но до конца мало кто понимает, что означает данное…

Подробнее
#Разработка