Рубрики
Без рубрики

Как создать рельсы проекта с помощью фронта реагирования и Redux

Mark Hopson Как создать проект Rails с интерфейсом React и Redux (Plus Typection!) Полное руководство по настройке одностраничного приложения JavaScript с React и Redux внутри рельсов Project.Update (17 марта 2019 г.) : Добавлен типограф на последний шаг этого проекта. Это руководство

Автор оригинала: FreeCodeCamp Community Member.

Марк Хопсон

Полное руководство по настройке одностраничного приложения JavaScript с React и Redux внутри проекта Rails.

Обновление (17 марта 2019 г.): добавлено Машинопись на последний шаг этого проекта.

Этот учебник покажет вам, как создать Однострановое приложение С реагированием (и redux и семантический интерфейс ) внутри проекта рельсов.

Этот учебник также включает в себя:

Боковая заметка № 1. я видел это чудесный гид Недавно и вдохновил меня писать один для рельсов.

Боковая заметка № 2. Здесь законченный учебник Отказ То История совершения Соответствует (вроде) с шагами в этом руководстве.

Обзор

Чтобы дать вам ощущение того, что мы собираемся построить, и как все будет работать, см. 2 диаграммы ниже.

Диаграмма 1: обрабатывать первый HTTP-запрос (I.E. Запросы от браузера в наше приложение Rails)

Диаграмма ниже иллюстрирует ваше приложение raction внутри вашего проекта Rails, а также путь (твердая черная линия), что первый запрос берет, чтобы вернуть React App Вернуться к клиенту (браузер).

Диаграмма 2: Обработка последующих HTTP-запросов (I.E. Запросы от нашего приложения React в наше приложение Rails)

После загруженного приложения rac ract загружено в браузере пользователя, приложение RACT будет нести ответственность за отправку запросов в приложение Rails (сплошная черная линия). Другими словами, после нагрузки реагирования запросы на рельсы приступят от JavaScript Code, а не браузера.

Другие важные заметы, прежде чем мы начнем кодировать

  • Думайте о вашем приложении React AS отдельно от вашего приложения Rails. Приложение React App строго для интерфейса и работает в браузере пользователя. Часть рельсов строго для задней части и работает на сервере. Приложение Rails ничего не знает о приложении React, за исключением случаев, когда возвращать свои статические активы (WebPack скомпилирован HTML, JS и CSS).
  • После того, как вашему браузеру загружено вашим браузером, вся логика для создания HTTP-запросов (извлекать данные и переключить эти данные в представление) выполняется в переднем конце (I.E. браузера).
  • Приложение вашего рельсов эффективно не обслуживает никаких представлений, за исключением того, что обслуживает ваше приложение React. В этом руководстве единственные рельсы вид на /app/views/static/index.html.erb.
  • Все /API/* Пути проходят обработанные приложением Rails, в то время как все остальные пути обрабатываются путем реагирования внутри браузера (после того, как ваш браузер загрузил первый запрос). Например, http://your-app.com/something Будут отправляться в приложение Rails, а затем вернулись обратно в ваше приложение raction (HTML/JS/CSS, которые уже загружены в браузере), который решит, что показать на экране.
  • Соображения для построения одностраничного приложения Отказ Не нужно для этого учебника, но полезно.
  • Реагистрационные компоненты дизайн шаблонов Отказ Опять не нужно, но полезно.

Системные Требования

FYI вот моя система конфигурации. Не говорите, что вам это нужно, но что-то подобное сделает этот учебный опыт более гладким.

  • MacOS 10.13.6 (Высокая Сьерра)
  • Ruby 2.5.1
  • Рельсы 5.2.1 (и Bundler 1.16.6)
  • – GEM Install Bundler -v 1.16.6
  • Узел 9.8.0

Наконец, на код!

Шаг 1: Создайте новый проект Rails с помощью WebPack и реагируете

Создайте новое приложение Rails. Я назвал мой Rails-React-Tustorial Отказ

rails new rails-react-tutorial --webpack=react

Посмотреть здесь Для получения дополнительной информации о --webpack = React Флаг введен в рельсы 5.1.

Шаг 2: Убедитесь, что установлены драгоценные камни WebPacker и Reac Rails

Проверьте, если WebPacker и React-Rails Драгоценные камни в вашем Gemfile Отказ Если драгоценные камни не там, то добавьте его:

Теперь запустите эти команды, чтобы установить все.

bundle install
# This command might not be necessary.# If already installed, then it will# ask you to override some files.rails webpacker:install
rails webpacker:install:react  rails generate react:installyarn install                   

Сейчас беги Rails Server -P 3000 и посетить http://localhost: 3000 Чтобы убедиться, что наш проект работает.

Pro Tip # 1 : беги ./bin/webpack-dev-server В отдельном окне во время кодирования, чтобы иметь какие-либо изменения, автоматически строить и перезагрузите браузер.

Pro Tip # 2 : Если вы получите эту ошибку Не могу активировать SQLite3 (~> 1.3.6), уже активировал SQLite3-1. 4.0 Тогда DD GEM 'SQLite3', '~> 1,3,6 ‘до драгоценного момента. Посмотреть Thi S Ссылка для получения дополнительной информации.

Шаг 3: Добавьте класс контроллера и маршрут, в наше приложение Rails

Добавьте новый маршрут в наше приложение Rails. Для этого примера мы добавим Получить/v1/Вещи Конечная точка в config/marross.rb `

Этот новый маршрут потребует вещей контроллера. Создать новый Приложение/Контроллеры/V1/Вещи_Controller.rb файл. Помните, что это должно быть в v1 Папка, потому что она принадлежит к нашим рельсам API.

Наши вещей контроллер вернет жесткий ответ на Получить/v1/Вещи Отказ

На данный момент вы должны быть в состоянии повторно запустить Rails Server -P 3000 и посетить http://localhost: 3000/v1/Вещи Отказ

Далее мы создадим новый комментарий реагирования.

Шаг 4: Создайте новый компонент реагирования

Создать компонент HellowOrld React, который принимает строковый параметр с именем приветствие Запустив следующую команду:

rails generate react:component HelloWorld greeting:string

Файл должен быть создан: Приложение/JavaScript/Компоненты/helloworld.js Отказ

Шаг 5: Используйте наш компонент HellowOrld

Чтобы использовать и увидеть наш новый компонент HellowOrld, нам нужно 2 вещи: создать представление встраивает этот компонент и добавить маршрут, чтобы указать на этот вид.

Чтобы создать представление, создать файл Приложение/Views/Static/index.html.erb и добавьте следующее:

Для нашего нового маршрута добавьте следующую строку в нашу Маршруты.rb Файл и пустой StaticController для его поддержки.

Добавьте это в Приложение/Контроллеры/Static_Controller.rb :

Теперь вы должны быть в состоянии повторно запустить Rails Server -P 3000 и посетить http://localhost: 3000/ Чтобы увидеть ваш новый компонент React React (не забудьте запустить ./bin/webpack-dev-server В отдельном окне, чтобы изменения JavaScript автоматически упаковываются на WebPack).

Теперь, когда у нас есть компонент реагирования, который оказывает на наш взгляд, давайте расширим наше приложение для поддержки нескольких просмотров с Реагистрационный маршрутизатор Отказ

Шаг 6: Добавить React-Router

Сначала запустите эту команду, чтобы добавить React-Router-DOM , который включает и экспортирует все Реагистрационный маршрутизатор и некоторые дополнительные помощники для просмотра веб-просмотра. Больше информации здесь Отказ

npm install --save react-router-domyarn install

Эта команда должна добавить следующую строку на ваш Package.json файл. Примечание, здесь использовалось 4.2.2, но ваша версия может быть разной.

Теперь давайте будем использовать React Router, чтобы сделать несколько маршрутов для нашего React Front-End.

Шаг 6: Использование React-Router

Реагистрационный маршрутизатор Позволяет нам управлять всеми нашими маршрутами UI строго с JavaScript. Это означает, что нам понадобится один компонент «приложение», который инкапсулирует все наше приложение. «Приложение» также будет использовать React-маршрутизатор для представления правильной «страницы» компонента для запрошенного URL-адреса.

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

rails generate react:component App

Далее откройте файл для вновь созданного компонента React, Приложение/JavaScript/Компоненты/App.js и добавьте следующее …

Теперь измените index.html.erb Чтобы указать на наш новый компонент приложения.

Наконец, отредактируйте свой Маршруты.rb Чтобы рельсы отправляют все запросы, которые не являются для API для нашего компонента приложения (через StaticController # Index ).

Теперь мы можем запустить Rails Server -P 3000 и посетить http://localhost/ и http://localhost/ Привет Свидеть работать React-маршрутизатор (помните ./bin/webpack-dev-server включает автосигнал).

Далее нам нужно будет установить некоторые дополнительные зависимости, прежде чем мы сможем подключить наш RACT-интерфейс до наших Rails API.

Шаг 7: Добавление Redux, Sagas, Babel Polyfill и Axios

Теперь давайте добавим следующие библиотеки JavaScript для нашего интерфейса.

  • Redux управлять глобальным состоянием нашей заявки.
  • Babel-Polyfill, чтобы включить причудливые функции JavaScript, которые могут не быть доступны на старых веб-браузерах.
  • Повторно повторно и React-redux Чтобы сделать работу с Redux проще.

Чтобы установить все, выполните следующие действия:

npm install --save redux babel-polyfill reselect react-reduxyarn install

Теперь мы будем использовать эти инструменты для настройки состояния Statux redux, а затем добавить некоторые действия и редукторы для его использования.

Шаг 8: Настройка State State Redux

На этом этапе мы настроим государственный магазин Redux для нашего приложения со следующим шаблоном (мы добавим и удалим «вещи» на следующие шаги).

{  "things": [    {      "name": "...",      "guid": "..."    }  ]}

Сначала создайте ConfigureStore.js файл. Это инициализирует наш магазин Redux.

Теперь импортируйте и используйте ConfigureStore () В компоненте приложения для создания состояния Redux и подключите его к нашему приложению.

Теперь у вас установлен redux в вашем приложении! Далее мы создадим действие и редуктор и начните писать и читать из нашего состояния redux.

Шаг 9: Добавьте действие и редуктор

Теперь, когда приложение имеет состояние redux, мы добавим <Прицвета На> к Helloworld, который отправляет действие (что мы будем определять здесь), которые будут получены B y укоренистый Uber ().

Сначала добавьте Получение () Определение действия и импорт CreateStroucturectrector () и Подключиться () в компонент TheHelloworld. Это карты частей штата Redux, а действия (то есть диспетчеризация Getthings () ), к опору HellowOrld.

Далее добавьте <Прицвета на> helloworld, что Dispatc он получая ons () Действие (от ./4/indexex.js) во всех кликах.

После того, как все добавлено в Helloworld, перейдите в http://localhost: 3000/hello Откройте консоль и щелкните кнопку «GetHinging», чтобы увидеть, как называются ваши функции действия и редукторы.

Теперь, когда вы можете отправить действие, которое может быть получено редуктором, давайте увидим редуктор изменять состояние Redux.

Шаг 10: есть HellowOrld прочитайте состояние реагирования и отображать «вещи»

Вставьте список < ul> в helloworld и заполнить его “вещами” из вашего состояния redux.

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

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

Шаг 11: Установить Redux-Thunk

Нам понадобится Redux-Thunk Разрешить Async WorksPlows (как HTTP-запрос) для отправки действий.

Установить Redux-Thunk Запустив эту команду:

npm install --save redux-thunkyarn install

Теперь давайте будем использовать Thunk в наших действиях!

Шаг 12: Используйте Redux-Thunk и Fetch (), чтобы запросить API и установить состояние реагирования с результатами

Во-первых, давайте импортируем Redux-Thunk в ConfigureStore.js И установите его наш магазин Redux, поэтому наше приложение может обрабатывать действия «Thunk».

Теперь проверьте, что все работает, запустив приложение и загрузка страницы.

Далее давайте изменим Получение () Действие для возврата функции, которая выполняет следующее (вместо возврата объекта действия):

  1. Отправить оригинальный объект действий
  2. Позвоните на наши Rails API.
  3. Отправить новое действие GetthingsSuccess (JSON) Когда звонок добивается успеха.

Для этого шага нам также нужно добавить GetthingsSuccess (JSON) Действие.

Конечно, это ничего не делает к государству redux, поскольку наш редуктор не приносит никаких изменений. Чтобы исправить это, измените редуктор, чтобы обработать Get_things_success Действие и вернуть новое состояние (с ответом от Rails API).

Теперь, если вы начнете свое приложение, перейдите к localhost: 3000/Hello и нажмите кнопку, ваш список должен измениться!

Там у вас есть. Rails API подключен к приложению React + Redux.

(Бонус) Шаг 13: Установка инструментов redux dev

Может быть, я должен был положить этот шаг раньше, но Redux dev tools Важно для отладки действий, которые ваше приложение отправляет, и как эти действия меняют ваше состояние.

Вот как вы его устанавливаете. Сначала установите правильное расширение для вашего браузера ( Chrome , Firefox).

Далее убедите следующую, чтобы установить библиотеку.

npm install --save-dev redux-devtools-extensionyarn install

Теперь используйте его для инициализации вашего State State State.

После всего этого сделано, вы сможете увидеть новую вкладку, Redux, в инструментах DEV Chrome (или Firefox), которые позволяют вам увидеть, какие действия были отправлены, и как каждый изменил состояние приложения. Вкладка RACT также покажет вам все ваши компоненты и их реквизиты и состояния.

Счастливая отладки!

(Бонус) Шаг 14: семантический интерфейс

Semantic – отличная библиотека для компонентов пользовательских интерфейсов, которая делает его очень легко построить красивые веб-сайты быстро.

Чтобы установить эту библиотеку, выполните следующие действия.

npm install --save semantic-ui-css semantic-ui-reactyarn install

Добавьте это в Приложение/JavaScript/Packs/application.js :

import 'semantic-ui-css/semantic.min.css';

И добавьте это в Приложение/Views/Static/index.html.erb :

<%= stylesheet_pack_tag "application", :media => 'all' %

(Бонус) Шаг 15: Используя разумную структуру каталогов

Этот шаг полностью необязательно, и он не имеет ничего общего с функцией приложения. Просто мое мнение о том, как вы должны организовать ваши файлы.

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

app|-- javascript   |-- actions      |-- index.js      |-- things.js   |-- components   |-- packs   |-- reducers      |-- index.js      |-- things.js

(Бонус – 17 марта 2019 г. Обновление) Шаг 16: Установите Typescript!

Tymdercript как JavaScript, но с видами! Он описывается как « строгий синтаксический суперсент JavaScript », что означает, что JavaScript считается действительным Tearscript, а «Функции типа» являются необязательными.

IMO Typectscript – это фантастический для крупных проектов JavaScript, таких как большой фронт реагирования. Ниже приведены инструкции о том, как установить его и небольшую демонстрацию его внутри нашего проекта.

Во-первых, запустите следующие команды (взятые из WebPacker Readme ):

bundle exec rails webpacker:install:typescriptyarn add @types/react @types/react-dom

Теперь, чтобы увидеть это в действии, давайте переименовать Приложение/JavaScript/Редукторы/Things.js к Things.tsx и добавьте следующие строки в верхнюю часть файла:

После добавления Интерфейс вещь Давайте будем использовать его, имея Const InitialState Используйте этот тип (видно на скриншоте выше) и укажите, что Темногенераторы вернуть массив типа Вещь (Также видно на скриншоте).

Все еще должно работать, но чтобы увидеть TeampScript в действии, давайте добавим по умолчанию Корпус к Темногенераторы и добавить Вернуться 1 Отказ С 1 не Вещь Тип мы увидим вывод ./bin/webpack-dev-server потерпеть неудачу со следующим:

Вот и все! Теперь вы можете добавить TeampScript .tsx Файлы к вашему проекту и начните использовать типы с вашим проектом.

Вот отличный обзор Tymdercript и почему вы должны использовать его Отказ

Конец

Ты сделал это! Вы сделали приложение Rails, которое использует React и Redux. Это в значительной степени это для учебника. Я надеюсь, что вы веселились и узнали что-то по пути.

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

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