middleman-react

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.

Usage

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

Options

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
end

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'))
end

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)
end

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!