React app works with the Rails 5.1 API

Set up the Rails 5.1 API

Start by building the Rails API. We will use Rails’ built-in feature to build API-only applications.

Make sure you have version 5.1 or higher of the installed Rails gem.

Next, create a Rails API app with the flag --api

Next create the data model. We only need one data model to use for ideas, with those two fields being title and body, both of which have a type of string .

Start and run migration:

So we have a table for Ideas, and let’s write some sample data so we can show it.

In db/seeds.rb file, add the following code:

You can replace other content you desire.

Then run the command:

Then, create a IdeasController with the index action in the file: app/controllers/api/v1/ideas_controller.rb :

Notice that the controller is inside the app/controllers/api/v1 folder because we are setting the version for our API. This is a good way to avoid errors caused by changes and to meet backward compatibility for our API.

Then add resource ideas in config/routes.rb

OK, now let’s test our first API endpoint:

Run the command:

Then, check the endpoint to get the data of all ideas with curl :

And we will see the Ideas data returned as JSON:

We can also test this endpoint in a browser by opening the link: http: // localhost: 3001 / api / v1 / ideas

Set up the Front-end application using the Create React App

Now that we have a basic API, set up the Front-end React application using the Create React App .

Create React App is a Facebook project, which helps you get started with React app quickly without any setup.

First, make sure you have Node.js and npm installed. You can download the installer from the Node.js website. Then install Create React App by running the command:

Then leave Rails directory and run the following command:

Next, run React app:

You will be directed to the http: // localhost: 3000 page

This React application has a default page with a React component called the App to display React logo.

The content of the page is rendered via React component in the src/App.js file

The first React Component

Our next step is to revise this file to use the API we just created and the list lists all the ideas on the page.

Let’s start by changing the Welcome message with a <h1> tag containing the title of our application: “Idea Board”.

We will also add a component called IdeasContainer . We need to import it and enter it in function render:

We continue to create the IdeasContainer component within a new file: IdeasContainer.js inside the directory: src/components :

Let’s also change the style of App.css to have a white header and black text, and we also remove the styles we don’t need:

The new component will need to communicate with our Rails API end point to get information about Ideas list and display them.

Get API data by axios

We will create an Ajax call to the API inside the lifecycle method componentDidMount () of the IdeasContainer component and the ideas store in the state of the component.

And we will update state in componentDidMount() .

Please use the axios library to implement API calls. You can also use jQuery if you prefer that way.

Install axios by npm:

Then import it into IdeadsContainer :

And use it in componentDidMount ():

However, this time we will get an error because our API is located on another port (3001 compared to 3000), and we still have not enabled Cross Origin Resource Sharing (CORS).

Enabling Cross Origin Resource Sharing (CORS)

First, enable CORS using the gem rack-cors on our Rails app:

Add gem to Gemfile:

Install it

Then, add the middleware configuration to the config/application.rb file.

We limit origins to only include our front-end app at http: // localhost: 3000 and allow access to the REST API standard endpoint methods for all resouces.

Now we need to restart the Rails server, and if we refresh the browser, we will not have CORS errors anymore.

The website will be loaded successfully and we can see that API data from Rails is logged in the console.

So we already know that we can get the ideas from API and use it in our React component.

We can change the render function to run a loop around the ideas list from state and display all.

Note the attributes key of div className is tile .

We need to include it when creating the list of elements. Keys help React identify which items have been changed, added or removed.

Now let’s add some styles in App.css to make the idea items look like a tile.

Stateless functional components

Before we continue, refactor the code and move the JSX portion of the tile ideas to a separate component called Idea

This is a stateless functional componet (also known as a “dumb” component), which means it has no state at all. It is just a function that accepts input data and returns JSX.

And in the map function of IdeasContainer, we can return the new Idea component created as follows:

Also don’t forget to import Idea :

So we have completed the first part of the application. We have an API with an endpoint to get ideas and have a React app to display them.

Source : Viblo