# Integrating React.js with Rails Using Hyperloop

This topic covers integrating React.js with Rails using the Hyperloop (opens new window) gem

Other approaches not covered here are using the react-rails or react_on_rails gems.

# Adding a simple react component (written in ruby) to your Rails app

  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
    

# Callbacks

# Declaring component parameters (props)

# HTML Tags

# Event Handlers

# States

Note that states can be shared between components using Hyperloop::Stores (opens new window)

# Remarks

Component classes simply generate the equivalent javascript component classes.

You can also access javascript components and libraries directly from your ruby component classes.

Hyperloop will "prerender" the view server side so your initial view will load just like ERB or HAML templates. Once loaded on the client react takes over and will incrementally update the DOM as state changes due to inputs from the user, HTTP requests or incoming web socket data.

Besides Components, Hyperloop has Stores to manage shared state, Operations to encapsulate isomorphic business logic, and Models which give direct access to your ActiveRecord models on the client using the standard AR syntax.

More info here: http://ruby-hyperloop.io/ (opens new window)