How do you use react-rails react_component with webpacker gem rails 5.1?

Active3 hr before
Viewed126 times

8 Answers


Rails 5.1 shipped with native support for Webpack and therefore, React, Angular, Vue.js and other libraries, through the webpacker gem.,The starting point code with react-rails is here and the final code with webpacker is here:,Then run the webpacker install script:,Now let’s change our calendar appointments app to use webpacker.

For installing yarn, see the official documentation. On Max OS X you can install it with brew:

brew install yarn
load more v

First you need to install node- I used nvm,,and install yarn- link.,Then, add these lines to your Gemfile:,Find centralized, trusted content and collaborate around the technologies you use most.

Then, add these lines to your Gemfile:

gem 'webpacker', '~> 2.0'
gem 'react-rails'

then run

bundle install
rails webpacker: install
rails webpacker: install: react
rails generate react: install

That's it. Now you can use

< %= react_component('MyComponent', @controller_value) % >
load more v

[ webpack-dev-server tracks changes within app/javascript directory and rebuild the front end on the fly ],At this point, Rails has created a javascript friendly app for us. Rails 5.1 comes with out-of-the-box support for SPA frameworks like React/Angular/Vue.js. It includes a webpacker gem which makes it easy to use Webpack to manage JavaScript modules within Rails app. You should have a webpacker now in your Gemfile.,Rails app is going to be treated as an API which communicates with the front-end side. Rails API leaves React to handle the UI.,Let’s get started. First, generate a new Rails app by running:

Let’s get started. First, generate a new Rails app by running:

rails new app_name--webpack = react
load more v

After the bundle installs completed we need to run react-rails installation script using rails generator.,react on rails webpackconfigloader,react-rails gem is one of the easiest way to start using react in Rails application. It uses Ruby on Rails asset pipeline to automatically transform JSX into Ruby on Rails compatible assets using the Ruby Babel Transpiler. Now add the react-rails gem into Gemfile.,Integrating react with rails

Make sure you have already installed Ruby and Rails in your system. If you are not installed you can follow this Link for details instructions and install Ruby and Rails. Once you have installed, now you can start to create rails application using the following command.

$ rails new react_integration
load more v

React on Rails course, The latest news, articles, and resources, sent to your inbox weekly.

$ rails new myapp--webpack = react
load more v

Add webpacker and react-rails to your Gemfile and run the installers.,Now, to add the component to view we need to use the react_component helper. So change the contents of app/views/home/index.html.erb to match below.,Now, this calls our GreetUser component and passes the name (here ‘Ankur‘) as a props to our component.,This tutorial will guide you on how to create a Ruby on Rails application and add the power of webpacker and React JS to it.

$ rails new rails - react - webpacker
$ cd rails - react - webpacker
load more v

IMPORTANT UPDATE (6 July 2017): With the release of Rails 5.1, Rails now has native support for using React via the webpacker gem. Check out the free lesson on how to do this in the Free React on Rails course or see this blog post. ,We're using foreman to run Webpack, in addition to the Rails server.,Then, start the Rails server with foreman: ,The react-rails gem is the simplest and quickest way to start using React inside your Rails app.

gem 'react-rails'</pre>
load more v

My app crashes with react-rails, so I've included the stack trace and the exact steps which make it crash.,Help us help you! Please choose one:,And in the main app (Webpacker 3, Rails 5.1.4, unreleased react-rails coming from master branch):,Could you add something to the Readme as a starter under an "Engine" header? You deserve the contributor badge with a great solution like that.

import React from 'react'

class HelloWorld extends React.Component {
  render() {
    return <div>HELLO WORLD</div>;

export default HelloWorld;
load more v

Other "webpacker-rails" queries related to "How do you use react-rails react_component with webpacker gem rails 5.1?"