Простой способ создания гибридного веб-приложения React / Rails

Хотя в Интернете есть множество статей о настройке React в Rails (я рекомендую использовать webpacker и react_rails), я хочу погрузиться глубже и изучить некоторые из замечательных вещей, которые вы можете делать с React.

Давайте начнем.

Если у вас еще не настроен Ruby on Rails для разработки, взгляните на это руководство.

Предположим, вы уже установили webpacker и react_rails. В файле записи пакета вам нужно будет включить рендеринг компонентов React:

В папке app/javascript я сделал отдельную папку для компонентов React. Вот диаграмма используемой мной файловой структуры:

.
├── app
│   ├─── controllers
│   └─── javascript
│       ├── packs
│           └─── application.js
│       └── react
│           └─── SeriesDetails
│               └─── index.js

На стороне Rails react_rails поставляется с помощником представления для рендеринга компонента. Снимок экрана ниже создается с помощью следующей команды:

= react_component 'SeriesDetails/index', { series: SeriesSerializer.new(@series).as_json }

Давайте разберем это:

  • У помощника представления react_component есть три аргумента: имя компонента (имейте в виду, что в application.js мы определили контекст для компонентов, которые должны быть в /react), атрибуты, которые должны быть переданы компоненту (поэтому значения хэша должны быть строками ), а третий аргумент - с параметрами HTML для оболочки.
  • Мы используем ActiveModelSerializers, чтобы определить, как объект серии должен быть сериализован как объект JSON.

Хотите узнать, какие комментарии находятся в верхней части этого файла? Это жемчужина аннотаций в Rails. Зацени.

Давайте сразу перейдем к компоненту. Сериализованная серия будет передана как параметры этому компоненту, поэтому нам не нужно десериализовать объект JSON.

Стили опущены для краткости. Давайте разберемся:

  • Мы используем базовый компонент Card из Material-UI.
  • Компонент SeriesStatus использует Чип-компонент в Material-UI.
  • Компонент EpisodeCard использует простой компонент Card.

Заключение

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

Это все на сегодня. Спасибо за прочтение. Если у вас есть предложения, не стесняйтесь обращаться к нам.