サーチ…


前書き

このトピックでは、 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アプリケーションに単純な反応コンポーネント(ルビーで書かれている)を追加する

  1. あなたのレールにハイパーループの宝石を追加する(4.0 - 5.1)Gemfile
  2. bundle install
  3. ハイパーループマニフェストをapplication.jsファイルに追加します。
    // app/assets/javascripts/application.js
    ...
    //= hyperloop-loader
    
  4. 反応コンポーネントを作成し、 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
    
  5. コンポーネントはビューのように機能します。コントローラ内の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