Ruby on Rails
하이퍼 루프를 사용하여 React.js와 레일스 통합하기

소개

비고

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