В этом руководстве вы узнаете, как создать приложение 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 и почувствуйте разницу!!!
Спасибо за чтение. Если понравилось, жмите хлоп и делитесь :)