Web Requests using React
So after a pause I am again resuming writing on React. This time we shall be looking at how can we fetch data from an external service and display in React app. If you are unfamiliar with React, I recommend seeing: Let’s React and Lets React More. Its rather going to be a lengthy post so a cup of coffee or two would keep you going.
What we are building
We shall be building a React app that shall display users from an external web service and display in the list. To make things pretty, we shall be using Bootstrap. To fetch users, we shall be using: https://randomuser.me/ generator. There is a good documentation which can be read as needed. We shall also look at how we implement routing in React app. Below is what finally we shall build
First things first
To install bootstrap, using the command: npm install bootstrap — save. This shall install Bootstrap dependencies in your project.
React does not have any built in http calling feature, like Angular JS. So we shall be using external library called fetch. To install it, run the command npm install whatwg-fetch — save
Run the command npm start. If everything works perfect, the app shall start in the browser. Now we are complete with installing the dependencies. Good. Lets move forward.
Folder Structure
As we are using create-react-app to create the app, folder structure is already there. Just to be sure, have a look at the below image to see if you are missing something. Inside the src folder we shall be creating assets and components folder. Components folder shall contain any components that we create while assets folder is where our miscellaneous files shall go.
If you look into the code, you shall see some changes of CSS. Since this is not a CSS tutorial, I am omitting any such explanation. Feel free if you need help with CSS though.
Let’s code now
Create a new file called Constants.json. This is the file that shall contain any constants that shall be shared throughout the app.
Now create a file called “Service.js” under the assets folder. This is where we shall call the web service. If we look at it, we are importing the Constants from Constants.json file. Then we create a class called Service and add to it the fetchUsers method. This method accepts the number of users that need to be fetched. On line 9, we initialize the variable url with the api_url and attach the number of users as url parameter. You can see the complete documentation here. The method return promise that shall be handled in the calling class. Lastly we export the class to be used elsewhere.
Now open up the UserSummaryComponent.js file in the src/components folder. This component is responsible to display one user highlight. This means that if we were to display 100 users, this single component shall be looped 100 times. We shall see later on this later on:
What is going on here? Too simple. In the constructor we just initialize the User variable. Now in the render function we create the div with all the information to display. The <a> tag can be used for navigation. And finally we export it to be used elsewhere.
Now in the App.js file we have three functions. componentDidMount() which is event handler, displayUsers() that set the state and render() that renders the information on the page.
The componentDidMount() function is called when the component has been loaded completely. At that instant we fetch the users using our Service. On line 21, we have chained promises. If the fetching is completed, we call the displayUsers() function with the data. There we set the state. Setting state is required since we shall be rendering that data.
Now finally in the render() function we iterate over the Users field to initialize the list for UserSummary component. On line 53, we display it on the page.
The complete code for this app can be found at: https://github.com/umairk83/React-Magic/tree/master/hit-with-react
