react-rails Build Status Code Climate

react-rails is a ruby gem which makes it easier to use React and JSX in your Ruby on Rails application.

This is done in 2 ways:

  1. making it easy to include react.js as part of your dependencies in application.js.
  2. transforming JSX into regular JS on request, or as part of asset precompilation.


We're specifically targeting versions of Ruby on Rails which make use of the asset pipeline, which means Rails 3.1+.

As with all gem dependencies, we strongly recommend adding react-rails to your Gemfile and using bundler to manage your application's dependencies.

# Gemfile

gem 'react-rails', '~>'



In order to use React client-side in your application, you must make sure the browser requests it. One way to do that is to drop react.js into app/assets/javascript/ and by default your application manifest will pick it up. There are downsides to this approach, so we made it even easier. Once you have react-rails installed, you can just add a line into your config file (see Configuring) and require react directly in your manifest:

You can require it in your manifest:

// app/assets/application.js

//= require react

Alternatively, you can include it directly as a separate script tag:

# app/views/layouts/application.erb.html

<%= javascript_include_tag "react" %>


To transform your JSX into JS, simply create .js.jsx files, and ensure that the file has the /** @jsx React.DOM */ docblock. These files will be transformed on request, or precompiled as part of the assets:precompile task.



There are 2 variants available. :development gives you the unminified version of React. This provides extra debugging and error prevention. :production gives you the minified version of React which strips out comments and helpful warnings, and minifies.

# config/environments/development.rb
MyApp::Application.configure do
  config.react.variant = :development

# config/environments/production.rb
MyApp::Application.configure do
  config.react.variant = :production


Beginning with React v0.5, there is another type of build. This build ships with some "add-ons" that might be useful - take a look at the React documentation for details. In order to make these available, we've added another configuration (which defaults to false).

MyApp::Application.configure do
  config.react.addons = true


It is possible to use JSX with CoffeeScript. The caveat is that you will still need to include the docblock. Since CoffeeScript doesn't allow /* */ style comments, we need to do something a little different. We also need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:

###* @jsx React.DOM ###

Component = React.createClass
  render: ->
    `<ExampleComponent videos={this.props.videos} />`