Let’s have a brief introduction to Webpacker and React JS. If you are familiar with React JS and Webpacker directly go to Implementation section.
What is React JS?
- React allows developers to create large web-applications that use data and can change over time without reloading the page.
- It aims primarily to provide speed, simplicity and scalability. React processes only user interfaces in applications.
- It corresponds to View in the Model-View-Controller (MVC) pattern.
Yeahhh.. That’s cool !!!
Why React JS?
- Simplicity: No complex two-way data flow.
- Uses simple one-way reactive data flow.
- Performance: React is fast!
- Real DOM is slow.
- Using virtual DOM objects enables fast batch updates to real DOM, with great productivity gains over frequent cascading updates of DOM tree.
If your page uses a lot of fast updating data or real time data — React is the way to go.
That’s a small introduction about React JS.
What is webpacker?
- However, it is possible to use Webpacker for CSS, images and fonts assets as well, in which case you may not even need the asset pipeline.
That was a small introduction to webpacker. Now let’s start creating the rails app.
Technology: Ruby on Rails
Versions: Rails: 5.1.5 , Ruby: 2.4.1
$ rails new rails-react-webpacker
$ cd rails-react-webpacker
react-rails to your Gemfile and run the installers
$ bundle install
$ rails webpacker:install
$ rails webpacker:install:react
$ rails generate react:install
After the successful completion the of the above commands. You will have the directory structure like below image.
All of our React components shall go to
The content of
var componentRequireContext = require.context(“components”, true) makes the react components available to our rails app.
Now we just need to add the above file into our application layout file at
Let’s create a home controller with index method. We will mount our first react component to
$ rails g controller home index
Now let’s create our first React Component.
rails g react:component GreetUser name:string
Running the above command will create our first react component at
Now replace contents of
In above file the
GreetUser component is expecting
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.
localhost:3000/home/index you should see following screen.
If you have added React Developer Tools to your browser. Then you must see the output as the following snap.
You can find the whole github code here.
So start using React JS with Rails and feel the difference!!!
Thanks for reading. If you liked it, press the clap & share :)