Ruby gem for automatically transforming JSX and using React in Middleman.
Ruby JavaScript Gherkin CoffeeScript Other
Clone or download
Pull request Compare This branch is 4 commits ahead of plasticine:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

middleman-react Gem Version Build Status Code Climate

Use React JSX transformations with Middleman.

Inspired (and pretty much a clone of really) the react-rails gem for Middleman. This gem allows you to write and use *.jsx assets inside Middleman.


  1. gem install middleman-react
  2. activate :react in config.rb

It is also possible to pass options through to the JSX compiler if that’s your thing:

activate :react do |config|
  config.harmony = true
  config.strip_types = true

Sprockets loading react-source

In your Middleman config.rb add the following:

after_configuration do
  sprockets.append_path File.dirname(::React::Source.bundled_path_for('react.js'))

Now you can Sprockets include React:

//= require react

Or with addons:

//= require react-with-addons

React Helper & Server Rendering

react_component is a helper that will let you pass in data from ruby code and have it rendered via React. This rendering can be done on the client (default), or on the server, which is handy for SEO.

<%= react_component "Book", {data: book } %>

For server prerendering you need to include the react_ujs javascript component to wire up the prendered content. So:

<%= react_component "Book", {data: book }, {prerender: true} %>

In your main .js file:

//= require react_ujs

And in config.rb:

after_configuration do
  sprockets.append_path File.dirname(Middleman::React::react_ujs_path)

A note on versioning

The version for this gem will reflect that of the underlying version of react-source, meaning that using 0.12.1 of this gem will give you version 0.12.1 of React. This is the same approach that react-rails takes. If updates to the gem code are required that do not alter the react-source version in use need to be made they will be released with a .x version appended, eg: 0.12.1.x.

Developing / Contributing

  1. Fork it!
  2. Get set up: ./script/bootstrap
  3. ...?
  4. Run specs: ./script/spec
  5. Pull request!