rwr-blogpost.md

Painless Rails & React integration using React-Webpack-Rails.

Here at Netguru we love working with both Rails & React and lately we find ourselves using putting those in our stack more & more, but often we found it hard to integrate them in easy and elegant manner, that’s why we came up with RWR which solved them immediately. In following article I will show you how we use it at our company and how easy it is for you to star integrating it in your own projects.

———————————————————————————————————————————————————————

Table of Contents

1. What is React_Webpack_Rails:

   • How does it work?
   • How does it help us?
   • How do we setup it?

2. General methodology (putting things in views, rather than mounting on one root node)

3. Useful plugins:

   • Alt
   • Redux
   • Router
   • View Helpers

4. Invite people to contribute to the project and give some insights about planned future updates / additions to the RWR.

———————————————————————————————————————————————————————

1. What is React-Webpack-Rails?

RWR is our powerful and lightweight solution for integrating Rails with React. It provides user with a lot of amazing functionality like: - passing data from Rails controllers down to React components, - integrate Rails routes with react-router, - server-side rendering using Node.js

It takes a lot of boilerplate code you would have to write otherwise when bootstrapping new project in Rails + React.

Installation is really easy, all you have to do is just add our gem to your Gemfile and run Rails’ generator.

# Your Gemfile
gem 'react_webpack_rails'

# In your terminal type:

$ bundle
$ rails g react_webpack_rails:install

2. Methodology and usage.

Before using RWR you need to understand our thought process during creation of it.

At Netguru we prefer to keep our rails views / layouts and to put React components / Redux containers directly inside of them. This makes it possible for us to rewrite our Ember / Angular parts of application one chunk at the time.

To start using your React components, all you have to do is register them in your JS file.

import RWR from 'react-webpack-rails';
import HelloWorld from 'components/HelloWorld';

RWR.run();

RWR.registerComponent({ HelloWorld });

And Voilà, now you can put it directly in your Rails view / controller with desired props.

<%= rwr_element ‘HelloWorld’, props: { user: ‘Joe’ } %>

def hello_world
  render react_component: ‘HelloWorld’, props: { user: ‘Joe’ }
end

As you can see, our biggest goal was to make it really powerful with still keeping it as easy to use as possible.

3. Useful plugins.

• rwr-alt: integration with alt stores / containers
• rwr-redux: integration with redux stores / containers / router
• rwr-react_router: integration with react-router
• rwr-view_helpers: handy view helpers, to be used directly in js

4. Contribution & Future improvements.

RWR and all of it’s plugins are dynamically developed by Netguru’s developers, but if you have any fixes / ideas for improvements we would love to hear from you and encourage you to contribute to our Github’s repositories.

Right now we’re working on providing easier ways to use our rwr-redux plugin in more complex scenarios and to pass data from Rails view to React in more performant manner, so make sure to star our repo and stay tuned for those amazing updates in near future.