Сегодняшняя работа над проектом возрождения MySpace была прервана срочным сообщением от нашего «клиента»:

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

Наша работа над нашим полностью рельсовым сайтом должна была перейти к сервису, работающему только с API, с которым будет взаимодействовать отдельное интерфейсное приложение.

Оба эти требования были для нас совершенно новыми. Мы никогда раньше не создавали проект только для Rails API, не говоря уже о преобразовании из полного стека, и мы никогда не использовали React.js.

Благодаря длинным выходным мы забыли о хорошей практике в отношении ценностей Agile, которую мы выработали на прошлой неделе, и на короткое время команда пришла в замешательство.

Мы вернулись в нужное русло и решили разделиться на две команды: одна для преобразования в API, а другая для реализации интерфейса React.

Ускоренный курс по React

К счастью, я раньше работал с учебником w3schools React (настоятельно рекомендую!), И я подумал, что это будет хорошее место для команды, с которой можно начать.

Чтобы доказать себе, что я учусь, а не просто слепо следую руководству, я создал очень простое веб-приложение, которое демонстрирует некоторые ключевые концепции в реакции.

Нерешительное веб-приложение

Вот index.js из созданного мной приложения, где происходят важные вещи.

У нас есть класс Header, который расширяет компонент React.

У него есть конструктор, в котором его состояние установлено с favouritecolor красного цвета.

Метод рендеринга возвращает код JSX (выглядит как HTML, но позволяет вставлять в него Javascript аналогично ERB). Возвращаемый JSX - это div, который содержит h1, в который вставлено this.state.favouritecolour (т.е. красный).

Внизу:

ReactDOM.render(<Header />, document.getElementById('root'));

Это ищет элемент с идентификатором root в index.html, который отображается браузером, и помещает его в компонент заголовка. Вставка чего-либо в DOM называется в React «монтированием».

Также существует метод componentDidMount, который вызывается сразу после того, как компонент монтируется в DOM. В этом случае он устанавливает тайм-аут на 1000 мс, а затем устанавливает для this.state.favouritecolour желтый цвет.

Когда состояние изменяется в компоненте React, это вызывает обновление. Во время обновления React сравнивает свою виртуальную модель DOM (хранящуюся в памяти) с реальной моделью DOM в браузере и на основе любых различий повторно визуализирует компонент. В этом случае, когда this.state.favouritecolour изменился с красного на желтый, он обновит визуализированный JSX с новой версией с желтым цветом.

Также существует метод componentDidUpdate, который вызывается после обновления. В этом случае он устанавливает тайм-аут, а затем задает this.state.favouritecolour цвет, случайно выбранный из массива цветов.

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

Если вы хотите увидеть больше примеров базовых концепций React, ознакомьтесь с этим репозиторием прямо здесь ».

Спасибо за чтение!