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](https://docs.angularjs.org/guide/concepts?)
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.
Installation
------------
Gemfile:
```ruby
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:
```ruby
bundle
rails g react:install
```
Make sure you have this in app/assets/javascript/application.js:
```ruby
# ...
#= require react
# For the
syntax
#= require react_ujs
#= require_tree components
```
Add this to config/environments/production.rb
```ruby
Rails.config.react.variant = :production
```
And this to config/environments/development.rb
```ruby
Rails.config.react.variant = :development
```
Hello World
-----------
Create app/assets/javascripts/components/hello.jsx.coffee (note the file extension):
```ruby
###* @jsx React.DOM ###
window.Hello = React.createClass
render: ->
{this.props.name}
```
app/views/layouts/application.html.erb
```ruby
…
/>
or:
<%= react_component 'Hello', name: 'John' %>
....
```
Troubleshooting
---------------
- Unexpected token '<' Error
Did you forget to add this to the top of your React component file (.js.jsx)?
```ruby
/** @jsx React.DOM */
```
or this to your CoffeeScript component (.jsx.coffee):
```ruby
###* @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:
```ruby
- // Doesn't work without
- wrapper