My first Ruby on Rails + React App in just 15 minutes

How to create Ruby on Rails application with React

React + Ruby on Rails

Today I learned ruby and had some time to experiment with Ruby on Rails. As I am already familiar with React, I decided to create a simple CRUD application with RoR and React.

So if you want to learn how to use React with RoR then follow along. if you just want the code directly then checkout this for my github repo.

Tutorial

Step-1: Work Environment

Let’s Setup the work environment. I assume you have already installed ruby. so let’s install other dependencies.

if you do not have sqlite3 already installed then use below commands or find one on official website,

brew install sqlite3
yum install sqlite-devel
apt-get install libsqlite3-dev

Install rails

gem install rails

We are going to start by creating a new Rails app, running the following command:

rails new react-ror-app

Next head to Gemfile and add gem 'react-rails', next run

bundle install

then

rails g react:install

React:install generator that we are using here automatically adds React JS library to your asset pipeline.

Step-2: Creating API in RoR

It’s time to create the model and controller in RoR to create a CRUD Api.

Model

Run below command to create a new model named Article,

rails g model Article title:string text:text

Migrate and seed your database,

rake db:migrate && rake db:seed

Controllers

We need to make only one adjustment to our Application Controller. So inside app/controllers/application_controller.rb paste the following line of code,

Our application is API-based and so controllers folders structure require us following namespace convention with API version specification, like so: app/controllers/api/v1. Versioning the API means that changes can be made to it in future without damaging the original version.

So let’s create these two descending folders (api and v1) inside app/controllers, and a new file inside them calledarticles_controller.rb

we will define CRUD actions in our Article’s controller,

Connecting the Route with our Article’s controller

Let’s navigate config/routes.rb and set up all the necessary routes for CRUD:

if you go to http://localhost:3000/api/v1/articles.json in your browser, you will see the JSON containing our article/s.

Now create one more controller called Home in a corresponding new file app/controllers/home_controller.rb that will be responsible for just one index page, this will be responsible for our React integration.

Now return to the config/routes.rb and add our Home index page to be the root of our App:

Now all our index page need is a corresponding view. Create a new ‘home’ folder inside app/views and add index.html.erb file to it:

app/views/home/index.html.erb

This file will only contain one line that takes advantage of react_component view helper that comes with ‘react-rails’ gem. It’s not going to work right now, but it all will make sense in a moment.

<%= react_component 'Main' %>

Step-3: Creating our React Components

we will use container and component structure for our component.

container/smart component: contains all the login and state

component/dumb component: contains only representation.

Create a file named app/assets/javascripts/components/_main.js.jsx

We are going to follow the usual syntax for creating a stateless/presentational/dumb React Component that we will call Main:

_main.js.jsx

If you go to http://localhost:3000, you will see our Main component on the home page. Remember our index.html.erb?

we imported Main react component in our index.html.erb

Let’s create our Article component

Create a file named app/assets/javascripts/components/_article.js.jsx

This will be a [dumb] component that we will use to display articles.

here, we use editable state property to show and hide the input fields when edit button is clicked. as this component is dumb, it won’t perform the actual update or delete but it will call the methods passed through props.

_article.js.jsx

Now let’s create a higher order component or parent component that will take all articles via props and display all the articles using Article created above.

Create a file named app/assets/javascripts/components/_all_articles.js.jsx

_all_articles.js.jsx

This two components will take care of the Read, Update and Delete but what about Create?

So let’s create a new component which will contain a form with two input fields. title and text.

Create a file named app/assets/javascripts/components/_new_article.js.jsx

Now it’s time to use above three components into our container(_articles_container.js.jsx). this is the last component and we will add this into main and magic will happen! our whole app will come alive and will have all CRUD operations in it.

Create a file named app/assets/javascripts/components/_articles_container.js.jsx

_articles_container.js.jsx

Just bear with me for last time, we have use this container in our main component to load it into the website.

Add this component in ourapp/assets/javascripts/components/_main.js.jsx

_main.js.jsx

That’s it! Now You can perform all CRUD actions with your articles. There was a lot of code in this blog post, so if you’d like to see the full code of the finished app, please checkout this github repo:

https://github.com/drex44/react-ror-crud-app

Thank you for reading! please leave comments if you have any suggestions or if you noticed any mistakes/typos!

Lastly, If you found this article helpful, clap! 👏👏👏.