Учебник по React: Начало работы с React, Express и Socket.io

В последнее время я много экспериментирую с React. Например, вы могли видеть пост, который я написал о том, как настроить React, Webpack и Babel для кода на ES6. Создание этого поста доставило массу удовольствия, но я не хотел останавливаться на достигнутом и продолжил разработку. В этой статье я покажу, как использовать React для создания переиспользуемых и композитных компонентов, чтобы отображать и поддерживать состояние данных в реальном приложении.

Отслеживание статуса телефонного звонка — отличный пример, чтобы показать, как React работает с управлением состоянием. Для этого давайте создадим панель мониторинга, которая будет отслеживать звонки с помощью событий прогресса вызова для Twilio Voice. Если вы хотите сосредоточиться только на создании клиентской части приложения на React, код для серверной части этой панели можно найти здесь.

Серверная часть использует Express для получения запросов от Twilio при изменении статуса звонка, а также для обслуживания нашего React-приложения. Socket.IO применяется для обмена данными между клиентом и сервером в реальном времени.

Если вы хотите узнать, как шаг за шагом создавалась серверная часть, ознакомьтесь с этими ресурсами:

— Небольшое приложение для отслеживания событий прогресса вызова взято из моего предыдущего поста в блоге.

— Socket.IO используется для синхронизации данных между клиентом и сервером. Вы можете прочитать этот пост в блоге, чтобы узнать, как добавить Socket.IO в наше серверное приложение.

— Вы можете следовать моему руководству по настройке, чтобы убедиться, что Webpack и Babel работают правильно.

**Готовимся ответить на звонок**

Чтобы запустить код, который питает наше приложение для мониторинга звонков, вам понадобится установить Node.js и npm. На момент написания этой статьи у меня установлены Node v4.0 и npm v2.10.1.

Вам также нужно создать аккаунт в Twilio и приобрести номер телефона с возможностями голосовой связи. Вы можете пройти через этот пост, используя пробный аккаунт, но вам придется подтверждать каждый номер телефона, на который вы звоните через API. Обновление аккаунта позволит вам совершать звонки без предварительного подтверждения номера.

Настройте серверную часть панели локально, введя следующие команды в терминал. Возможно, вам потребуется ввести свои учетные данные GitHub:

Вы можете проверить, что всё работает, запустив `node index.js` в терминале и перейдя по адресу http://localhost:3000. Посмотрев на консоль в терминале, вы увидите, что соединение через сокет установлено.

Теперь, когда все зависимости для работы с существующей версией этого приложения установлены, нам нужно установить `react` для создания компонентов и `react-dom` для их рендеринга в DOM:

**Создаем наши React-компоненты**

React, описанный на своей главной странице как V в MVC, позволяет создавать переиспользуемые компоненты интерфейса и упрощает поддержку изменений состояния данных, абстрагируя DOM браузера.

Для нашей панели мониторинга состояния звонков будет два React-компонента для отслеживания телефонных звонков. Один будет родительским компонентом, содержащим список всех звонков, а другой — для отображения данных каждого отдельного звонка.

Родительский компонент будет содержать массив всех звонков, и всякий раз, когда статус звонка изменится, это обновление будет внесено в наш массив и передано дочернему компоненту в качестве свойства. При работе с React-компонентами лучше всего, чтобы самый верхний родительский компонент содержал фактические данные и передавал их вниз в виде свойств своим дочерним компонентам.

Начнем с создания компонента для одного телефонного звонка. В директории проекта `static` откройте файл `PhoneCall.jsx` и добавьте следующий код:

Это позволяет нам определить, как должны выглядеть данные одного звонка при рендеринге. Обратите внимание, что это определение класса ES6, который наследует свой прототип непосредственно от `React.Component`, поэтому больше нет необходимости вызывать `React.createClass`.

Мы еще не закончили, но давайте убедимся, что всё работает, отрендерив наш компонент с некоторыми фиктивными данными. Добавьте еще две строки в конец `static/PhoneCall.jsx`:

Библиотека ReactDOM может монтировать React-компоненты к конкретным элементам DOM. В этом примере компонент PhoneCall с фиктивными данными монтируется к div на странице, чтобы убедиться, что всё работает.

Теперь, прежде чем всё будет отрендерено, Webpack нужен входной файл для JavaScript, чтобы собрать всё для браузера. Это должно быть знакомо, если вы следовали моему предыдущему посту о настройке React. Откройте файл `bundleEntry.js` и добавьте следующую строку:

Не забудьте убедиться, что файл bundle.js, сгенерированный Webpack, включен в ваш HTML, как мы делали раньше.

Теперь соберите всё с помощью Webpack и запустите сервер, чтобы увидеть наши фиктивные данные, отрендеренные на веб-странице. Вы можете сделать это, запустив скрипт start:

Вы можете удалить последние две строки из `static/PhoneCall.jsx`, так как позже мы добавим код для рендеринга наших компонентов в другом месте.

**Создание родительского компонента для хранения данных**

Теперь перейдем к обработке состояния всех звонков. Каждый раз, когда статус звонка меняется, элемент в списке, представляющий этот звонок, будет обновлен, а затем состояние родительского компонента обновится, чтобы содержать новый список. Таким образом, каждый раз, когда создается звонок, он будет добавлен на нашу панель.

Создайте контейнерный компонент для хранения всех происходящих звонков. Откройте файл в директории `static` под названием `PhoneCallBox.jsx` и добавьте следующий код:

Вы заметите, что класс содержит конструктор, определяющий начальное состояние наших данных, и функцию render, определяющую, как данные выглядят при рендеринге. Также есть вызов `ReactDOM.render` для монтирования этого компонента к элементу phone-calls.

Функция `render` компонента PhoneCallBox сопоставляет каждый объект звонка в нашем массиве с компонентом PhoneCall, обернутым в `