Ruby on Rails
ハイパーループを使ったReact.jsとRailsの統合
サーチ…
前書き
このトピックでは、 Hyperclop gemを使用したReact.jsとRailsの統合について説明します。
ここで扱われていない他のアプローチは、反応レールまたはreact_on_rails宝石の使用です。
備考
コンポーネントクラスは、単に同等のjavascriptコンポーネントクラスを生成するだけです。
Rubyのコンポーネントクラスからjavascriptのコンポーネントやライブラリに直接アクセスすることもできます。
Hyperloopはビューサーバー側を「プリレンダー」して、初期ビューはERBまたはHAMLテンプレートのようにロードされます。一旦クライアントにロードされると、ユーザーからの入力、HTTPリクエスト、または着信Webソケットデータのために、状態の変化としてDOMが徐々に更新され、DOMが徐々に更新されます。
コンポーネントのほかに、Hyperloopには共有状態を管理するストア、同形ビジネスロジックをカプセル化する操作、標準AR構文を使用してクライアント上のActiveRecordモデルに直接アクセスできるモデルがあります。
詳細はこちら: 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を使用してコンポーネント間で状態を共有できることに注意してください
コールバック
# 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
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow