React on Sinatra Integration, Server Side Rendering
Ruby JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib bump version to 0.1.1 Jan 19, 2017
test initial import Jan 9, 2017
.gitignore initial import Jan 9, 2017
.travis.yml add .travis.yml Jan 14, 2017
.yardopts initial import Jan 9, 2017
Gemfile initial import Jan 9, 2017
LICENSE.txt initial import Jan 9, 2017
README.md modify webpack's link [ci skip] Jan 15, 2017
Rakefile initial import Jan 9, 2017
react-sinatra.gemspec initial import Jan 9, 2017

README.md

react-sinatra

Build Status Dependency Status Gem Version GitHub issues GitHub license

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.