bmorelax / react-sinatra

React on Sinatra Integration, Server Side Rendering

react-sinatra

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

Please see a sample.

Installation

Add this line to your application's Gemfile:

gem 'react-sinatra'

And then execute:

$ bundle

Or install it yourself as:

$ gem install react-sinatra

Anti-Features

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.

Usage

Sinatra Plug-in

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

1. Add react-sinatra and runtime into your Gemfile

source 'https://rubygems.org'

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

2. Register react-sinatra and configure.

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

3. Use react_component on your view or sinatra application.

<%= 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;

React.js

Bundled React.js

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

Note

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

TODO

• Support nodejs as a runtime

Contributing

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

License

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