Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/namusyaka/react-sinatra
React on Sinatra Integration, Server Side Rendering
https://github.com/namusyaka/react-sinatra
padrino react ruby sinatra
Last synced: 18 days ago
JSON representation
React on Sinatra Integration, Server Side Rendering
- Host: GitHub
- URL: https://github.com/namusyaka/react-sinatra
- Owner: namusyaka
- License: mit
- Created: 2016-12-31T09:58:33.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-19T23:13:22.000Z (over 6 years ago)
- Last Synced: 2024-10-14T19:42:44.247Z (about 1 month ago)
- Topics: padrino, react, ruby, sinatra
- Language: Ruby
- Homepage:
- Size: 250 KB
- Stars: 42
- Watchers: 5
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# react-sinatra
[](https://travis-ci.org/namusyaka/react-sinatra)
[](https://gemnasium.com/github.com/namusyaka/react-sinatra)
[](https://badge.fury.io/rb/react-sinatra)
[](https://github.com/namusyaka/react-sinatra/issues)
[](https://raw.githubusercontent.com/namusyaka/react-sinatra/master/LICENSE.txt)
`react-sinatra` makes it easy to use React in your Sinatra and Padrino application.
Please see [a sample](https://github.com/namusyaka/react-sinatra-sample).
## Installation
Add this line to your application's Gemfile:
```ruby
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](https://webpack.js.org/), 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
```ruby
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.
```ruby
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.
```erb
<%= react_component('Hello', { name: 'namusyaka' }, prerender: true) %>
```
```ruby
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.
```javascript
class Hello extends React.Component {
render() {
return (
Hello, {this.props.name}!
);
}
}
global.Hello = Hello;
```
### React.js
#### Bundled React.js
You can use bundled React.js by specifying configurations.
```ruby
React::Sinatra.configure do |config|
config.use_bundled_react = true # Defaults to false
end
```
You can also specify `addon` and `env` for each environments.
```ruby
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.**
```ruby
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](http://opensource.org/licenses/MIT).