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:
- making it easy to include
react.js
as part of your dependencies inapplication.js
. - 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', '~> 0.4.1.0'
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 applcation 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 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
end
# config/environments/production.rb
MyApp::Application.configure do
config.react.variant = :production
end