This blog is targetted to beginners who are learning React JS. It is going to be a short blog in which I will talk about making an API request in React JS. I will link the core concepts required to make API calls to the official documentation of react as we encounter them in the story.

First of all, create a react project. To do so, you can use the create-react-app package provided by Facebook. I am assuming that you know how to do so. If you don’t, use the following steps to do so. Open the terminal and type the following commands (not the ones on BLOCK letters).

Creating a new react app

Project Structure The create-react-app creates all the necessary boilerplate code for us. Open the project in your favourite text editor. Mine happens to be Visual Studio Code. The project structure will look like this

You can get rid of most of the files here but I am not going to talk about it. Now we are going to talk about the actual thing we’re planning to do.

Let’s Code

Open App.js and remove the unnecessary code (you can copy the codes below). The code should look like this:

App.js file till this point

Now, we want to initialize the application state inside the App component. To do so, we can simply initialize state as an empty object. The code must look like the following:

WHAT EXACTLY IS A STATE?

A state is a property of React Components with the help of which we can make them interactive, dynamic. We can assign different behavior according to the available application state.
For example: In many applications such as an online store, you can enter the product name as a search query. Until the data is loaded, we can see some pre loading animations. As soon as the data is available the preloader disappears and we can see our result. This can be achieved with the help of state change.

Read more about states on the official documentation.

Inside the render method, I have logged the application state to the console (first line on the render method). If you go to http://localhost:3000 on your browser and see the console, you’ll find an empty object {}.

Lifecycle Methods

A react component goes through mounting, updating and unmounting phases. To deal with these, we have these methods called lifecycle methods which act handy to do something if something happens to the component like mounting, unmounting, change of state, receiving props etc.

Read more about Lifecycle Methods on the official documentation.

Mounting Mounting of react components simply means rendering the component in the page. We have componentDidMount(), that gets called as soon as the component gets mounted in the view.
Mounting and unmounting process of a react component:
*1. Render the content returned by the render() method.
2. Check componentDidMount() method to see anything that happens after mounting action occurs.
3. Update the component if the application state changes. (re-rendering)
4. Unmount*

So we use componentDidMount lifecycle method to make AJAX request to this URL and change the application state.

The code above makes an API request to the given URL, then it parses the response as json then we pass the data to this.setState() which sets the state of the application with the data we get from the request. If you check the console now, in few seconds you will see objects with data of 10 users logged on the console.

Now you can do anything you want with the data. Try to do something with it. You can find the source code on my GitHub. Here’s the link.

Thank you for reading.