react-sinatra

react-sinatra makes it easy to use React in your Sinatra and Padrino application.

Please see a sample.

Add this line to your application's Gemfile:

gem 'react-sinatra'

And then execute:

$ bundle

Or install it yourself as:

$ gem install react-sinatra

react-sinatra does not:

• transform .jsx files or JSX syntax.
• transpile asset using babel.
• support asset-pipeline.
• have generator for registering this extension.

I think those features should be solved by using webpack, or other build tools.

It's easy to register react-sinatra in your application, next section will describe three steps for introduction.

source 'https://rubygems.org'

gem 'react-sinatra'
gem 'execjs'
gem 'mini_racer' # also `therubyracer` may be available, but mini_racer is simpler and faster.

class App < Sinatra::Base
  register React::Sinatra

  configure do
    React::Sinatra.configure do |config|
      # configures for bundled React.js
      config.use_bundled_react = true
      config.env = ENV['RACK_ENV'] || :development
      config.addon = true

      # The asset should be able to be compiled by your server side runtime.
      # react-sinatra does not transform jsx into js, also ES2015 may not be worked through.
      config.asset_path = File.join('client', 'dist', 'server.js')
      config.runtime = :execjs
    end
  end
end

<%= react_component('Hello', { name: 'namusyaka' }, prerender: true) %>

get '/:name' do |name|
  component = react_component('Hello', { name: name }, prerender: true)
  # ...
end

The react component must be able to be referred from global scope, so you should be careful for your asset javascript. In the above example, you need to provide an asset that puts the component called Hello in a state that it can be referred to from the global.

class Hello extends React.Component {
  render() {
    return (
      <div className="hello">
        Hello, {this.props.name}!
      </div>
    );
  }
}

global.Hello = Hello;

You can use bundled React.js by specifying configurations.

React::Sinatra.configure do |config|
  config.use_bundled_react = true # Defaults to false
end

You can also specify addon and env for each environments.

React::Sinatra.configure do |config|
  config.addon = false # Defaults to false
  config.env = ENV['RACK_ENV'] || :development
end

If you want to use your own react, you must include React.js and react-server source code in the asset.

React::Sinatra.configure do |config|
  config.asset_path = 'client/dist/*.js'
end

• Support nodejs as a runtime

Bug reports and pull requests are welcome on GitHub at https://github.com/namusyaka/react-sinatra.

The gem is available as open source under the terms of the MIT License.