Ruby on Rails Integrating React.js with Rails Using Hyperloop Adding a simple react component (written in ruby) to your Rails app


Example

  1. Add the hyperloop gem to your rails (4.0 - 5.1) Gemfile
  2. bundle install
  3. Add the hyperloop manifest to the application.js file:
    // app/assets/javascripts/application.js
    ...
    //= hyperloop-loader
    
  4. Create your react components, and place them in the hyperloop/components directory
    # 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. Components act just like views. They are "mounted" using the render_component method in a controller:
    # somewhere in a controller:
      ...
      def hello_world
        render_component # renders HelloWorld based on method name
      end