Ruby on Rails
Интеграция React.js с рельсами с использованием Hyperloop
Поиск…
Вступление
В этом разделе рассматривается интеграция React.js с Rails с использованием Hyperloop gem
Другие подходы, не охватываемые здесь, - использование ременных рельсов или камней реакции_он_ра.
замечания
Классы компонентов просто генерируют эквивалентные классы компонентов javascript.
Вы также можете получить доступ к компонентам и библиотекам javascript непосредственно из ваших классов компонентов ruby.
Hyperloop будет «prerender» на стороне сервера просмотра, поэтому ваше начальное представление будет загружаться так же, как шаблоны ERB или HAML. После загрузки на клиент реакции берет на себя и будет постепенно обновлять DOM по мере изменения состояния из-за входов от пользователя, HTTP-запросов или входящих данных веб-сокета.
Помимо компонентов, Hyperloop имеет магазины для управления общим состоянием, операции для инкапсуляции изоморфной бизнес-логики и модели, которые дают прямой доступ к вашим моделям ActiveRecord на клиенте с использованием стандартного синтаксиса AR.
Подробнее здесь: http://ruby-hyperloop.io/
Добавление простого реагирующего компонента (написанного в рубине) в ваше приложение Rails
- Добавьте гиперлоп-жемчужину в ваши рельсы (4.0 - 5.1) Gemfile
-
bundle install
- Добавьте манифест гиперлопа в файл application.js:
// app/assets/javascripts/application.js ... //= hyperloop-loader
- Создайте свои реагирующие компоненты и поместите их в
hyperloop/components
# app/hyperloop/components/hello_world.rb class HelloWorld < Hyperloop::Component after_mount do every(1.second) { mutate.current_time(Time.now) } end render do "Hello World! The time is now: #{state.current_time}" end end
- Компоненты действуют так же, как и представления. Они «монтируются» с использованием метода
render_component
в контроллере:# somewhere in a controller: ... def hello_world render_component # renders HelloWorld based on method name end
Объявление параметров компонента (реквизита)
class Hello < Hyperloop::Component # params (= react props) are declared using the param macro param :guest render do "Hello there #{params.guest}" end end # to "mount" Hello with guest = "Matz" say Hello(guest: 'Matz') # params can be given a default value: param guest: 'friend' # or param :guest, default: 'friend'
HTML-теги
# HTML tags are built in and are UPCASE class HTMLExample < Hyperloop::Component render do DIV do SPAN { "Hello There" } SPAN { "Welcome to the Machine!" } end end end
Обработчики событий
# Event handlers are attached using the 'on' method class ClickMe < Hyperloop::Component render do DIV do SPAN { "Hello There" } A { "Click Me" }.on(:click) { alert('you did it!' } end end end
состояния
# States are read using the 'state' method, and updated using 'mutate' # when states change they cause re-render of all dependent dom elements class StateExample < Hyperloop::Component state count: 0 # by default states are initialized to nil render do DIV do SPAN { "Hello There" } A { "Click Me" }.on(:click) { mutate.count(state.count + 1) } DIV do "You have clicked me #{state.count} #{'time'.pluralize(state.count)}" end unless state.count == 0 end end end
Обратите внимание, что состояния могут делиться между компонентами с помощью Hyperloop :: Stores
Callbacks
# all react callbacks are supported using active-record-like syntax class SomeCallBacks < Hyperloop::Component before_mount do # initialize stuff - replaces normal class initialize method end after_mount do # any access to actual generated dom node, or window behaviors goes here end before_unmount do # any cleanups (i.e. cancel intervals etc) end # you can also specify a method the usual way: before_mount :do_some_more_initialization end