Используйте React Today в Ruby, отправившись на Кубу

 if (typeof(Opal) !== 'undefined') {
  Opal.mark_as_loaded("opal");
  Opal.mark_as_loaded("corelib/runtime.self");
  Opal.mark_as_loaded("jquery.self");
  Opal.mark_as_loaded("sources/react.self");
  Opal.load("react");
}

Это обрабатывает загрузку сторонних библиотек, включая React и jQuery, и позволяет транспортеру обслуживать JS, сгенерированный из нашего кода Ruby. Это не работает без этой строки.

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

 # react.rb:
require 'opal'
require 'jquery'
require 'opal-jquery'
require 'reactive-ruby'

class HelloWorld
  include React::Component
  def render
    h1 {"Hello, World!"}
  end
end

Это простой divh1Hello, World Это эквивалент следующего JSX:

 ReactDOM.render(<h1>Hello World</h1>, document.getElementById('content'));

Мы будем использовать событие document.ready Это требует добавления jQuery в ваш проект:

 Document.ready? do
  React.render(React.create_element(HelloWorld), Element["#content"])
end

Далее нам нужно добавить метод загрузчика в наш экземпляр Cuba. Это можно сделать, добавив этот код в свой класс Кубы:

 # app.rb
require 'opal'
def loader
  opal = Opal::Server.new {|s|
    s.append_path 'js'
    s.main = 'react'
  }
  Opal::Processor.load_asset_code(opal.sprockets, 'react')
end

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

 # config.ru
require 'bundler'
require_relative 'app'

Bundler.require

opal = Opal::Server.new {|s|
  s.append_path 'js'
  s.main = 'app'
}

sprockets   = opal.sprockets
maps_prefix = '/__OPAL_SOURCE_MAPS__'
maps_app    = Opal::SourceMapServer.new(sprockets, maps_prefix)

# Monkeypatch sourcemap header support into sprockets
::Opal::Sprockets::SourceMapHeaderPatch.inject!(maps_prefix)

map maps_prefix do
  run maps_app
end

map '/assets' do
  run sprockets
end

run(Cuba)

Это запускает сервер Opal, устанавливает точки входа для транспилятора, внедряет поддержку заголовков в звездочки и выполняет все это из каталога активов.

Момент истины: перейдите к 127.0.0.1:9292

 `Hello, World`

Поздравляем; Теперь вы используете передовые технологии Javascript в микросхемах!

Примечания

Это удивительно большой объем работы по интеграции чего-либо в ваш проект. Нам пришлось настраивать транспортеры, устанавливать точки монтирования, определять точки входа, писать HTML. и все для «Hello World!». Я быстро устал от этого и написал Gem под названием cuba_react, чтобы сделать все это для вас. Я бы рекомендовал использовать этот драгоценный камень вместо того, чтобы тратить часы на консоль отладки Pry, пытаясь выяснить, по какой причине ваш транспортер не видит исходные файлы или не возвращает то, что вы думаете.

Что еще более важно, самоцвет автоматизирует все это и позволит вам пропустить скучные вещи и просто начать играть с React! Добавьте cuba_reactGemfile , bundle installcuba_react generate Документацию можно найти здесь .

Расширяя наш пример

Естественно, «Hello, World!» Практически бесполезен в реальном мире, поэтому вам следует немного расширить наш пример. Ознакомьтесь с превосходными документами о реакторе для некоторых примеров того, что возможно, но вот простой класс входа в систему:

 class Nav < React::Component::Base
  def render
    div do
      input(class: :handle, type: :text, placeholder: "Enter Your Handle")
      button(type: :button) { "login!" }.on(:click) do
        alert("#{Element['input.handle'].value} logs in!")
      end
    end
  end
end

Что касается следующих шагов, я бы посоветовал ознакомиться с официальным руководством по началу работы с React, которое не является лучшей документацией, которую я когда-либо видел, но, безусловно, познакомит вас с некоторыми концепциями. Все примеры приведены в JSX, так что читателю нужно перевести их на Ruby, но это должно быть довольно просто и приятное руководство для React. После этого я бы порекомендовал « Отреагировать» для начинающих. Это отличная серия видеороликов, в которых объясняются концепции, лежащие в основе фреймворка, и пошаговое руководство, в котором рассказывается, как создать относительно сложное приложение. Есть и несколько отличных egghead.io React видео тоже.

Я надеюсь, что это было полезным занятием, и теперь вы в лучшем положении, чтобы включить React в проект на Кубе. Удачного кодирования!