Connecting your Rails API with React

If you know Rails , you know that you can have a Web API up and running in minutes (or maybe you don’t, in that case go read my article on matter). But what about connecting that Back-End to an SPA Front-End? or more specifically with an SPA using React ? Stick to this article and you’ll know exactly how to do that. I am assuming you already have that Rails API created and if you don’t take a quick look at my article then come back to this one.

Setting up React

To set up React, we don’t have a better friend than create-react-app. It should be installed with the command npm install -g create-react-app. Npm comes with Node JS so you should have it installed on your machine as well. Having all these steps done, you can now do :

create-react-app your-application-name

This will create a bunch of files inside a folder with the name you gave to your application and start a server automatically.

Where the magic happens

Having a Rails Web API already you should first be sure to launch it on a separate port. Rails uses localhost with port 3000 by default so to start it on a separate port use this command:

rails s -p portnumber

This will start Rails on the specified port and not interfere with port 3000 which is React’s default port (in fact, the server wouldn’t launch at all if something is already running on the specified port).

Now make sure that on every route of the API you want to access you have JSON being served. When going to these links on the browser you should see JSON being rendered instead of HTML.

Now that your API did that properly you will have no problem at all connecting it with React. How would you do that? The exact same way you would do it with vanilla Javascript! There’s no secret way specific only to React to do this. You can use `fetch` or if you are really lazy (as I am) you can use axios a third-party package to make network requests. Basically fetch works like so:

fetch(“/your-api-route”)
.then((responseFromServer)=> responseFromServer.json()) 
// to convert the response to json
.then((jsonResponse)=>{
// Do whatever the heck you want with the data
})

Now caution, when using React you can’t place this code wherever you want. You can’t place it in the render method because it get calls again and again every time React updates the component. You want the call to the database to be done once then to have your data rendered inside the component when available. The better would be to have it fired even before the render function gets executed. How do you that? Using component life cycles. The one we want to use is `componentDidMount` that get called exactly when the component is being mounted in the DOM. For the example sake, let’s say that we are fetching a list of lessons (lesson has title and content) and displaying it the users on the Front End:

import React from ‘react’;
class App extends React.Component{
 state={
   lessons:[]
 }
  componentDidMount(){
    fetch(“/lessons”)
     .then((response)=> response.json())
     .then((jsonReponse)=>{
          this.setState({
           lessons: jsonReponse
      })
     })
  }
render(){
   <div>
      <ul>
        {this.state.users.map((user)=>{
          return (
             <li>{lesson.title}</li>
          )
        })}
     </ul>
   <div/>
  }
}
export default App;

Paste this code in your file and test it. Everthing should be ok. Repeat the process for each route of your app.

Thank you for reading!