SlideShare utilise les cookies pour améliorer les fonctionnalités et les performances, et également pour vous montrer des publicités pertinentes. Si vous continuez à naviguer sur ce site, vous acceptez l’utilisation de cookies. Consultez nos Conditions d’utilisation et notre Politique de confidentialité.
SlideShare utilise les cookies pour améliorer les fonctionnalités et les performances, et également pour vous montrer des publicités pertinentes. Si vous continuez à naviguer sur ce site, vous acceptez l’utilisation de cookies. Consultez notre Politique de confidentialité et nos Conditions d’utilisation pour en savoir plus.
React on Rails
React + Redux + React-Router on Rails Views via Webpack/NPM
including Server Rendering
• React + Redux + React-Router + Webpack + Babel Rock!
• Ruby on Rails Rocks!
• Let’s put them together!
• Both a Ruby Gem react_on_rails and a NPM Package react-on-rails!
• Used by Pivotal Tracker, Blink Inc, and others, listed here.
• 1200 ⭐ as of March 18, 2016
Why React Inside a Rails App?
• You need a rich client interface…You decide on React (smart)
• Rails only as an API server? Or all Node.js tooling?
• Nah! We ❤ Rails for both front and back-end development. In a
• That’s the sweet spot: the ability to mix and match simple Rails
screens with React where and when you need it, with ease!
How about the react-rails gem?
• react-rails is based on the standard asset pipeline inclusion of
• Simpler for newbies and those used to doing this the Rails way.
• Code organization is very much the Rails way, if you like that. (I’d
Why not the react-rails gem?
• The custom setup via the Rails asset pipeline is just not anything like
• How do you integrate Redux and React-Router?
• This is what led me to custom Webpack integration of Rails with
React, and eventually React on Rails!
• I just wanted to use an npm package react-bootstrap, and there was
no obvious way to do that with react-rails in 2014.
React on Rails: Key Parts
• All ﬁles for the client side under /client
• Webpack + Babel + NPM: packages ﬁles for the browser (for
distribution via the Rails asset pipeline or a server for hot reloading
• Redux + React-Router: Key major JS components to use with React,
supported by React on Rails
• ESLint, JSCS, Flow, CSS-Modules, etc.: Many other cutting edge
and not the Rails way!
React on Rails Integration with Rails
assets that are used by the asset pipeline, like any other JS and
• Development: Can either use statically created JS and CSS ﬁles,
or special view helpers can grab “hot-reloadable” versions of the
JS and CSS from a Webpack Development Server.
Hot Module Reloading in Rails
• Statically created assets always used for production and tests.
• Why HMR in development? No page refresh to see changes in JS and Sass code!
env_stylesheet_link_tag conﬁgure getting assets either from HMR server or
regular static ﬁles.
• Procfile.hot sets ENV value so Rails knows and starts HMR server for assets
on port 3500, client/server-rails-hot.js
• More details: Hot Reloading of Assets for Rails Development
React on a Rails View via React On Rails
• redux_store: Rails helper method, sets up a registered redux store,
either in controller or on the view, usable by react components,
initialized with props from Rails. If deﬁned on the view and server
rendering used, it must go before the react_component call.
• react_component: Rails view helper to put a registered component
on a Rails View. This component may talk to a registered redux store, or
it may create a redux store, getting initialized by props from Rails.
components (actually functions that generate them).
Client Side Rendering
HTML, using class matchers on hidden HTML elements, and does initialization, passing in props
from rails that is placed in a HTML data attribute.
1. Initialize any Redux Stores, via controller helper or view helper with props from Rails. Note
the use of <% and NOT <%= for the ERB call:
<% redux_store("SharedReduxStore", props: @app_props_server_render %>
2. Render any react components, optionally with props from Rails. Note the use of <%=
<%= react_component("HelloWorld", props: @app_props_server_render %>
• You don’t need Redux for React on Rails! It’s an option. You also don’t need the redux_store
API. You can initialize your redux stores with your components if you have a 1:1 mapping of a
redux store to a component. You do this with a “generator function” which is a function that takes
props and returns a Redux component attached to a store.
Server Side Rendering
• First, don’t try server rendering until client rendering is working without bugs!
• Set option prerender: true in the call to react_component
• React on Rails Server side rendering of React roughly does:
2. Create code to hydrate stores for the view
3. Create initialization code to server render react component, maybe passing props.
5. Returns a HTML string placed on the Rails view
Shared Redux Stores
Header React Component Body React Component Footer React Component
• Many React components communicating with the same redux store
• Supports server rendering and react-router
Shared Redux Stores
Header React Component
Body React Component Body Rails Partial
• Allows a header React component to be paired with either a body react
component or a body Rails partial.
• Header React component can be dynamic! Notiﬁcations indicators!
• Why use Rails views? Sometimes Rails is good enough! and WAY less code!
Header React Component
• react-router is supported including server rendering.
• If your server rendered router does a redirect, React on Rails
handles this by doing a redirect on the client side.
• More details are here.
techniques for Sass, images, etc. Advantage: simple
2. Webpack Generated CSS: More complex, but not hard to setup with our
1. CSS Modules. This is huge. Once you try this, you won’t go back. What is
it? Allows very simple CSS class names with small CSS ﬁles right next to
2. Hot Reloading. You can change the your Sass ﬁles, save, and then you’ll
see the browser update, without reloading. For conﬁguration of hot
reloading, see Hot Reloading of Assets For Rails Development.
• Fragment caching of Server Rendering: The fast way to generate
the HTML is to have it cached!
• React on Rails provides a test helper to optimize building the static
assets only when needed.
• This is a huge convenience!
• Be sure to setup conﬁg/initializers/react_on_rails.conﬁg
• Conﬁgure rails_helper:
RSpec.configure do |config|
# Ensure that if we are running js tests, we are using latest webpack assets
# This will use the defaults of :js and :server_rendering meta tags
• Read The React on Rails Doctrine
• Lots of great docs at github.com/shakacode/react_on_rails
• Follow a simple tutorial
• Study example apps:
• Simple, no DB: test/demo app: github.com/shakacode/react_on_rails/
• A more complex example at www.reactrails.com with code: https://
Want Personalized Help?
• ShakaCode offers consulting on React on Rails, from a modestly priced
starter pack of usage help ($1500) to full app development. We’re experts
• Check out forum.shakacode.com for code discussions.
• Ask Justin for a Slack invite.
• Get in touch with Justin: email@example.com.
• Follow @railsonmaui for updates on React on Rails.
• Aloha from Justin and the ShakaCode Team!