Сегодняшняя работа над проектом возрождения 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, ознакомьтесь с этим репозиторием прямо здесь ».
Спасибо за чтение!