react.js snippets

Getting Started With React.js and Rails

Tagged rails, react.js, components, coffeescript  Languages ruby

Why use React.js?

  • React ~35kb vs. Amber.js ~100kb
  • Easy to learn compared to Ember.js and Angular.js
  • Supports server-side rendering
  • Great performance
  • Angular.js documentation is horrible
  • Angular.js is the new EJB

Why shouldn't you use React.js?

  • React.js is difficult to integrate with JS libraries that move or create DOM elements, e.g. jQuery UI
  • React.js is still evolving. Expect API changes to break your app.



gem 'active_model_serializers' # You probably want this gem too...
gem 'react-rails', '~> 1.0.0.pre', github: 'reactjs/react-rails'

From the console run:

rails g react:install

Make sure you have this in app/assets/javascript/application.js:

# ...
#= require react
# For the <div data-react-class...> syntax
#= require react_ujs
#= require_tree components

Add this to config/environments/production.rb

Rails.config.react.variant = :production

And this to config/environments/development.rb

Rails.config.react.variant = :development

Hello World

Create app/assets/javascripts/components/ (note the file extension):

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

window.Hello = React.createClass
  render: ->


  <div data-react-class="Hello" data-react-props=<%= { name: 'John' }.to_json %>/>
  <%= react_component 'Hello', name: 'John' %>


  • Unexpected token '<' Error

Did you forget to add this to the top of your React component file (.js.jsx)?

/** @jsx React.DOM */

or this to your CoffeeScript component (

###* @jsx React.DOM ###
  • Target container is not a DOM element.

Does the DOM element exist?

Did you forget to call React.renderComponent in jQuery’s $(document).ready?

  • Adjacent XJS elements must be wrapped in an enclosing tag

Multiple nodes need a parent element:

<ul> // Doesn't work without <ul> wrapper
  • Still doesn’t work?

react-rails is not stable; expect it to break.


Solutions: React.js Google Group React.js and jQuery sortable React.js and select2 React.js and Bootstrap Modal React.js and Kendo UI

  • You need to change the HTML "class" attribute to "className" in JSX