/rwr-test

React Webpack Rails

React Webpack Rails brings power of React and ES6 modules into Rails views through Webpack. Our goal is to make React components (and ReactRouter/Flux libs) fully integrated with Rails. This way Developers boost Rails views with powerful JS.

What you get:

  • React <-> Rails integration
  • JS side helpers - for registering, creating and using React components JS side
  • Integrations:
    • alt
    • redux
    • react-router
  • Generator that can:
    • initialize project with up-to-date package.json and files structure
    • generate HelloWorld example component
    • create ready to use karma/mocha based testing environment
    • setup eslint and integrate it wich specs
  • Turbolinks support
  • Modular integrations/plugins system

Why it's special? Focusing on full Rails integration our redux and alt integration allow developers to share store(s) between components.

Installation

Add this line to your application's Gemfile:

gem 'react_webpack_rails'

Execute:

$ bundle

Or install it yourself as:

$ gem install react_webpack_rails

Then run installation:

$ rails g react_webpack_rails:install

This will create following files:

├── app
│   ├── react
│   │   ├── components
│   │   │   ├── hello-world.jsx
│   │   │   └── hello-world-test.jsx
│   │   └── index.js
│   ├── views
│   │   └── layouts
│   │       └── _react_hot_assets.html.erb
│   └── assets
│       └── javascripts
│           └──react_bundle.js
├── webpack
│   ├── dev.config.js
│   ├── hot-dev.config.js
│   ├── production.config.js
│   └── tests.config.js
├── .babelrc
├── karma.conf.js
├── package.json
└── webpack.config.js

You can read more about generator here: [TODO]

Establish the node packages (may take a few moments)

$ npm install    # you may see warnings to consider updating the provided package.json file with license and repository

And require integration and bundle files in application.js

//= require react_integration
//= require react_bundle

Now you are ready to go. Checkout Guides to learn how register and use components and more.