Простой способ создания гибридного веб-приложения 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. Если вам нужен более продвинутый вариант использования, взгляните на эту статью.
Это все на сегодня. Спасибо за прочтение. Если у вас есть предложения, не стесняйтесь обращаться к нам.