ИССЛЕДОВАНИЕ ОСОБЕННОСТЕЙ БИБЛИОТЕКИ REACT.js

АННОТАЦИЯ

Целью данной статьи является выявление рациональности использования библиотеки React.js в современной разработке. В этой статье будет приведена информация об этой библиотеке, а также будут приведены примеры кода, которые покажут, как использовать особенности этой библиотеки. На основании этих данных будет сделан вывод о рациональности использования этого инструмента в современной frontend-разработке.

Ключевые слова: React.js, Javascript, Frontend, web-разработка.

Настройка

При начале работы с данной библиотекой необходимо использовать основы web-программирования: во-первых, потребуется файл HTML, импортирующий React и ReactDOM-библиотеки, которые используют тег <script>. См. листинг 1.

Листинг 1. Подключение react-библиотеки в html-файл

Также в данном примере кода импортируется Babel. Этот инструмент необходим для транспиляции приложения. Транспиляция – это процедура, результатом работы которой является код приложения, который сможет использовать любой браузер. Также Babel используется здесь из-за того, что в библиотеке React используется особый язык JSX для написания разметки. Нам понадобится переводить его в чистый JavaScript, чтобы браузер мог понять его.

Также в этом примере кода есть еще два момента, на которые стоит обратить внимание:

1) div c id #root. Этот блок – точка входа для react-приложения. Оно будет рендериться в этом блоке;

2) <script type="text/babel"> тег в body. Это то, где будет писаться React.js-код.

Компоненты

В данной библиотеке все является компонентом. Компоненты обычно принимают форму классов JavaScript. При разработке создается дочерний класс от React-Component класса. Ниже представлен пример react-класса Hello. См. листинг 2.

Листинг 2. React-класс Hello

В коде для компонента определяются методы. В этом примере у компонента только один метод – render(). Внутри render() возвращается то, что должно быть показано на странице. В вышеприведенном примере выводится <h1> тег с текстом Hello World!. Для того чтобы разрабатываемое приложение отрендерилось на экране, необходимо также использовать метод ReactDOM.render(). См. листинг 3.

Листинг 3. Отображение react-компонента

В вышеописанном месте компонент hello связывается с точкой входа в приложение. В результате на экране будет выведено следующее. См. рис. 1.

Рисунок 1. Отображение компонента в браузере

Обработка данных

В данной библиотеке есть два типа данных: props и state. Они различаются тем, что state приватен и может меняться из самого компонента. Props – это внешний тип данных, и они не контролируются самим компонентом. Он передается от компонентов, расположенных выше по иерархии, также контролирующих данные.

Компонент может менять свое внутреннее состояние напрямую, но не может менять props.

Props [1]

Вышеописанный компонент Hello статичен и выводит на экран одно сообщение. Значимая часть при работе с React – это возможность повторного использования компонентов. Это означает возможность написать компонент единожды и затем использовать его в других местах, например показывать разные сообщения.

Чтобы достигнуть такого рода повторного использования, добавляются props. См. листинг 4.

Листинг 4. Отправка props

Props имеет название message и имеет значение «my friend». К этому значению можно получить доступ внутри компонента Hello, ссылаясь на него через this.props.message. См. листинг 5.

Листинг 5. Взаимодействие c props

Результат см. на рис. 2.

Рисунок 2. Результат работы с props

Вышеприведенное обращение к props {this.props.message} сообщает JSX, что используется JavaScript-выражение. Это называется экранированием.

Таким образом мы получаем переиспользуемый компонент.

State [2]

State (или внутреннее состояние) представляет собой иной способ хранения данных компонента в react. Его отличие от props состоит в том, что он может быть изменен компонентом.

Если необходимо изменить что-то внутри компонента в зависимости от действий пользователя или пришедших данных, то используется state компонента.

Инициализация state

Для инициализации state необходимо вставить this.state в конструктор класса. State – это объект, который в нижеприведенном примере имеет только один ключ под названием message. См. листинг 6.

Листинг 6. Пример работы с state компонента

Перед инициализацией state нужно вызвать метод super() в конструкторе, так как this не инициализирован перед вызовом super() .

Изменение состояния

Для изменения state необходимо вызвать метод this.setState(), передав новое состояние объекту как аргумент. В нижеприведенном примере это сделано внутри метода, который называется updateMessage. См. листинг 7.

Листинг 7. Изменение state

Также стоит отметить отдельно, что требуется связать this с updateMessage-методом. В противном случае нельзя получить доступ к этому методу.

Вывод

На основании вышеизложенной информации можно сделать вывод, что данная библиотека отлично подойдет для современной frontend-разработки, так как имеет огромное количество преимуществ и полезных инструментов, которые будут очень сильно облегчать и ускорять разработку.

Список литературы:

1. Библиотека «learn-reactjs» / [Электронный ресурс]. – Режим доступа: https://learn-reactjs.ru/core/topics.
2. Библиотека «old.code.mu» / [Электронный ресурс]. – Режим доступа: http://old.code.mu/books/advanced/javascript/react/.