В этом руководстве вы узнаете, как создать приложение Ruby on Rails и добавить к нему возможности webpacker и React JS.

Давайте кратко познакомимся с Webpacker и React JS. Если вы знакомы с React JS и Webpacker, сразу переходите к разделу Реализация.

Что такое Реакт JS?

  • React JS — это библиотека JavaScript для создания пользовательских интерфейсов, разработанная Facebook.
  • React позволяет разработчикам создавать большие веб-приложения, которые используют данные и могут меняться со временем без перезагрузки страницы.
  • В первую очередь он направлен на обеспечение скорости, простоты и масштабируемости. React обрабатывает только пользовательские интерфейсы в приложениях.
  • Соответствует View в паттерне Model-View-Controller (MVC).

Вы можете найти список сайтов, которые используют React JS здесь. Он включает в себя Facebook, Instagram, Netflix, Khan Academy, Asana и т. д., и это лишь некоторые из них.

Дааааа.. Классно!!!

Почему React JS?

  • Простота: нет сложного двустороннего потока данных.
  • Использует простой односторонний реактивный поток данных.
  • Производительность: React работает быстро!
  • Настоящий DOM работает медленно.
  • JavaScript работает быстро.
  • Использование объектов виртуальный DOM обеспечивает быстрое пакетное обновление реального DOM с большим приростом производительности по сравнению с частыми каскадными обновлениямидерева DOM.

Если ваша страница использует много быстро обновляемых данных или данных в реальном времени — React — это то, что вам нужно.

Это небольшое введение в React JS.

Что такое вебпакер?

По своей сути webpacker представляет собой сборщик статических модулей для современных приложений JavaScript. Он отвечает за объединение всего нашего кода .jsx, .sass, .hbs и т. д. в обычные js и css, которые наш браузер понимает после необходимой предварительной компиляции.

  • Webpacker упрощает использование препроцессора JavaScript и сборщика webpack 3.x.x+ для управления JavaScript в Rails, похожем на приложение.
  • Он сосуществует с конвейером ресурсов, поскольку основной целью веб-пакета является JavaScript, подобный приложению, а не изображения, CSS или даже JavaScript Sprinkles (все это продолжает жить в приложении/активах).
  • Однако Webpacker можно использовать и для ресурсов CSS, изображений и шрифтов, и в этом случае вам может даже не понадобиться конвейер ресурсов.
  • Это в основном актуально при использовании исключительно компонентных фреймворков JavaScript.

Это было небольшое введение в webpacker. Теперь приступим к созданию приложения rails.

Выполнение

Технология: Ruby on Rails

Версии: Rails: 5.1.5, Ruby: 2.4.1

Репозиторий Git:https://github.com/AnkurVyas-BTC/rails-react-webpacker

$ rails new rails-react-webpacker
$ cd rails-react-webpacker

Добавьте webpacker и react-rails в свой Gemfile и запустите установщики.

$ bundle install
$ rails webpacker:install 
$ rails webpacker:install:react
$ rails generate react:install

После успешного завершения вышеуказанных команд. У вас будет структура каталогов, как показано ниже.

Все наши компоненты React должны находиться в каталоге app/javascript/components/.

Содержание app/javascript/packs/application.js следующее.

Строка var componentRequireContext = require.context(“components”, true) делает компоненты реакции доступными для нашего приложения rails.

Теперь нам просто нужно добавить вышеуказанный файл в файл макета нашего приложения по адресу app/views/layouts/application.html.erb.

Давайте создадим домашний контроллер с помощью метода index. Мы смонтируем наш первый реагирующий компонент в файл app/views/home/index.html.erb.

$ rails g controller home index

Теперь давайте создадим наш первый компонент React.

rails g react:component GreetUser name:string

Выполнение приведенной выше команды создаст наш первый компонент реакции по адресу app/javascript/components/GreetUser.js.

Теперь замените содержимое app/javascript/components/GreetUser.js на приведенное ниже.

В файле выше компонент GreetUser ожидает name props.

Теперь, чтобы добавить компонент для просмотра, нам нужно использовать помощник react_component. Поэтому измените содержимое app/views/home/index.html.erb, чтобы оно соответствовало приведенному ниже.

Теперь это вызывает наш компонент GreetUser и передает name (здесь ‘Ankur’) в качестве props нашему компоненту.

Теперь посетите localhost:3000/home/index, вы должны увидеть следующий экран.

Если вы добавили Инструменты разработчика React в свой браузер. Затем вы должны увидеть результат в виде следующей привязки.

Вы можете найти весь код github здесь.

Так что начните использовать React JS с Rails и почувствуйте разницу!!!

Спасибо за чтение. Если понравилось, жмите хлоп и делитесь :)