Skip to content

Commit dc06704

Browse files
committed
react-rails blog post
1 parent 5ef3c1b commit dc06704

File tree

1 file changed

+54
-0
lines changed

1 file changed

+54
-0
lines changed
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
title: "Use React and JSX in Ruby on Rails"
3+
layout: post
4+
author: Paul O'Shannessy
5+
---
6+
7+
Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: [react-rails](https://github.com/facebook/react-rails).
8+
9+
10+
This gem has 2 primary purposes:
11+
12+
1. To package `react.js` in a way that's easy to use and easy to update.
13+
2. To allow you to write JSX without an external build step to transform that into JS.
14+
15+
16+
## Packaging react.js
17+
18+
To make `react.js` available for use client-side, simply add `react` to your manifest, and declare the variant you'd like to use in your environment. When you use `:production`, the minified and optimized `react.min.js` will be used instead of the development version. For example:
19+
20+
```ruby
21+
# config/environments/development.rb
22+
23+
MyApp::Application.configure do
24+
config.react.variant = :development
25+
# use :production in production.rb
26+
end
27+
```
28+
29+
```js
30+
// app/assets/javascript/application.js
31+
32+
//= require react
33+
```
34+
35+
36+
## Writing JSX
37+
38+
When you name your file with `myfile.js.jsx`, `react-rails` will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.
39+
40+
```js
41+
/** @jsx React.DOM */
42+
React.renderComponent(<MyComponent/>, document.body)
43+
```
44+
45+
46+
## Asset Pipeline
47+
48+
`react-rails` takes advantage of the [asset pipeline](http://guides.rubyonrails.org/asset_pipeline.html) that was introduced in Rails 3.1. A very important part of that pipeline is the `assets:precompile` Rake task. `react-rails` will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.
49+
50+
51+
## Installation
52+
53+
Installation follows the same process you're familiar with. You can install it globally with `gem install react-rails`, though we suggest you add the dependency to your `Gemfile` directly.
54+

0 commit comments

Comments
 (0)