Installation and setup of Rails 5 app with react-rails gem

Linked Projects:

Calreact

✨ 3 people thanked Hrishi Mittal for this tutorial.

👍 Send Thanks
 
Note: This lesson was created before Rails 5.1 was released, which has some big changes. Please use Rails gem version 5.0 to make sure everything works. If you use 5.1 or higher, jQuery is not included automatically.

Lesson links:

Ruby Version Manager (RVM) - http://rvm.io/

react-rails gem - https://github.com/reactjs/react-rails

React Developer Tools Chrome Extension - https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

In this lesson, we're going to look at how to use react inside a rails app. We are going to get started by doing the installation and setup of the 'react-rails' gem in a Rails 5 app. This is just one of the simplest methods to get started using react in rails. There are many other gems and ways of using react inside rails but this is the simplest one and so we are going to go ahead with that now. Later on the course, we will be looking at other methods of using react in Rails. So let's get started installing and creating a new Rails 5 app and then installing the react-rails gem in it. 

Now before we created a new Rails 5 app and install the gem, we need to make sure we have the right version of Ruby. We would like to use Ruby version 2.3.3, which is the latest stable version at this moment. We want to make sure we have that so we are going to install that using RVM. RVM is Ruby Version Manager. It a useful utility for making sure different versions of Ruby are available for all your different projects and maintained properly. If you don't already have RVM, you can install it by going to this website rvm.io and then follow the instructions. There are just a couple of commands you need to run in your terminal and then you'll have RVM. 

Assuming you already installed RVM, we are then going to run:

rvm install 2.3.3
Once you run that command, base on how fast your internet connection is and your computer, it'll take a few minutes for it to download and install that version of Ruby. Now that's finished we can check to see if it's installed and here I can see 2.3.3 has been installed but it's not in use at this moment. The one being used is 2.3.2 and that's also the default. So we are going to use 2.3.3 and also set that as the default.

rvm use 2.3.3 --default

Next, we want to install the rails gem. So we are going to run:

gem install rails -v 5.0.1
Which I believe is the latest at the moment. That'll take a few seconds and once that is installed we can now create our Rails app. So we are going to run:

rails new calreact
We are going to build a calendar app for making appointments. For this step, just to setup this app, we are going to build a very basic skeleton and just show the title of the app on the home page.

Once that's done, we can cd into that directory.

cd calreact

and run to start the app.

rails s
Then we can go to localhost:3000 and there the defaults Rails homepage. Now Rails 5 is all setup. Next, we want to install the 'react-rails' gem, which is the easiest way to start using react in rails. You can find the code for that on GitHub. All we need to do is add 'react-rails' to our gem file.

We are going to do that by opening a new terminal and opening up our code and then we can find the 'Gemfile' and add to the bottom.

gem 'react-rails'
Now we can go back to terminal and type:

bundle
 which will install that gem. This will take a few seconds. Okay, that's done.

One other thing I'd like to mention is, I like to specify the version of Ruby inside my Gemfile, so we going to just add this one line there.

ruby '2.3.3'

Now the 'react-rails' gem comes with an installation script, which we can run by running:

rails g react:install
This will install all necessary configuration and create the files that we need. Okay so when that is done, you will see it has created a bunch of files. One file and a folder and edited the 'application.js' file. So it creates a 'components' folder under the javascript assets directory and it also creates 'components.js' which is a manifest file. So if we look under app/assets/javascript, you'll see a 'component.js' file, which basically requires the components directory. Which is here and this is where all our react components will go. The other change that the installation script did was add these lines to 'application.js' file. And that's the setup of 'react-rails' gem done. 

Okay, to test if our setup actually has been completed properly we are going to create our very first react component. A very basic thing which simply displays the name of the application on its homepage.

Let's create a controller with one view. We are going to call it appointments. Run this:

rails g controller Appointments index
That'll create an appointments controller for us and associate an index view file with it.

Now we're going to open up the files the controller and the index file. We going to point the route of the application to this URL. So we are going to find our 'routes' directory and change this to:

root 'appointments#index'
Now when we reload the page, we get this error. Which reminds me that we need to restart our application for react to load.

Now if we reload the page. Great, now we can see our new homepage which is just the default template for the new index page for the controller. 

So now we are going to replace this markup on the homepage with a react component. We are going to make a component called 'appointments' which is going to be a JSX file.

Create a new file under components and save it as 'appointments.jsx' and we're going to make a react component.  

var Appointments = React.createClass({
  render: function() {
   return (
     <h1>CalReact</h1>
   )
  }
})

With a single function, the render function if you remember from the first introductory lesson, which is simply going to return the name of our application in a h1 tag. That will simply be there and will display on the page. All we are doing is creating a very basic react component called 'appointments' with a single render method function which returns a headline tag call CalReact, the name of our application. We are going to take that component and use that in this index view instead of this text here. I'm going to delete this markup and replace it with a call to react_component, which is a helper method for rendering a react component in the view that you place it in.

<%= react_component 'Appointments' %>

So we simply call react component and pass the name of our component to it which we define in this JSX file here. Now if I refresh the page, I should see the new h1 title on this page. 

Now that our very first react component display there. Of course, this is just a trivial example to make sure the setup is done. Just one more thing before we finish the setup lesson, I highly recommend getting the react developer tools extension for chrome. I believe there are other versions available for other browsers like Firefox. This is extremely helpful for debugging your react code and make use of it in the following lessons. I highly recommend adding this to chrome. Once you've installed it, you can access it through the developer tools. You can see there's a new tab called React. When I click on it, it loads the data from our web app. It lists all the components that we have available. So here we can see the appointments component is available. It shows a number of other useful property and things which we can use to debug our app which we will see later on. This is a handy extension to have so go ahead and install it.

So that completes our lesson for installing and setting up react inside in a Rails 5 app.

In the next lesson, we are going to build up our Appointments app and use real react components to display appointments and create them.

Liked this tutorial? Get more like this in your inbox