How React on Rails Works (with rails/webpacker)
Note, older versions of React on Rails pushed the Webpack bundles through the Asset Pipeline. This older method has many disadvantages, such as broken sourcemaps, performance issues, etc. If you need help migrating to the current way of bypassing the Asset Pipeline, email Justin.
/public directory. rails/webpacker provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly configuring your Webpack output. You will either use the standard Webpack configuration (recommended) or the
rails/webpacker setup for Webpack.
Ensure these generated bundle files are in your
.gitignore, as you never want to add the large compiled bundles to git.
Inside your Rails views, you can now use the
react_component helper method provided by React on Rails. You can pass props directly to the react component helper.
Optionally, you can also initialize a Redux store with the view or controller helper
redux_store so that the redux store can be shared amongst multiple React components.
Client-Side Rendering vs. Server-Side Rendering
In most cases, you should use the
prerender: false (default behavior) with the provided
prerender: true to your helper, or you can simply change the default in
HTML Source Code
If you open the HTML source of any web page using React on Rails, you'll see the 3 parts of React on Rails rendering:
- The wrapper div
<div id="HelloWorld-react-component-0"> specifies the div where to place the React rendering. It encloses the server-rendered HTML for the React component. If server rendering is not used (prerender: false), then the major difference is that the HTML rendered for the React component only contains the outer div:
<div id="HelloWorld-react-component-0"/>. The first specification of the React component is just the same.
You can see all this on the source for reactrails.com
Building the Bundles
rails/webpacker library also can ensure that your bundles are built.
For example, you might create a Procfile.dev.
On production deployments that use asset precompilation, such as Heroku deployments,
bin/webpacker in your app.
However, if you want to run a custom command to run webpack to build your bundles, then you will:
config.build_production_command in your config/initializers/react_on_rails.rb
Then React on Rails modifies the
assets:precompile task to run your
If you have used the provided generator, these bundles will automatically be added to your
.gitignore to prevent extraneous noise from re-generated code in your pull requests. You will want to do this manually if you do not use the provided generator.
You can stop React on Rails from modifying or creating the
assets:precompile task, by setting a
REACT_ON_RAILS_PRECOMPILE environment variable to