React 30-Project 4: Building a User Feed App with React.js

Title image

Introduction

In this tutorial, we’ll create a user feed app using React.js. We’ll make an API request using Axios to fetch user data and display it as a scrollable feed on the page. This project will help us understand how to use the useEffect hook to make API calls in React applications.

App preview:-

Goals

1. Make API request using axios to below URL to get user feed data
https://randomuser.me/api/?results=50

2. Show the data fetched from API as scrollable feed in page

Try creating this UI using above API before proceeding with solution further.

Prerequisites

Make sure you have Node.js and npm (Node Package Manager) installed on your system

Step 1: Set Up a New React App

Open your terminal and run the following command to create a new React app:

npx create-react-app user-feed-app

Step 2: Install Axios

Navigate to the project folder in your terminal and run the following command to install Axios, a popular library for making HTTP requests:

npm install axios

Step 3: Create the Feed App

Navigate to the src folder in your project directory and open the App.js file. Replace its content with the following code:

import React, { useState, useEffect } from "react";
import axios from "axios";
import UserList from "./components/UserList";
import Header from "./components/Header";
export default function App() {
  const [data, updateData] = useState([])
  useEffect(()=>{
    // API call to get user list
    axios
      .get("https://randomuser.me/api/?results=50")
      .then(response => {
        const data = response.data.results;
        updateData(data);
      })
      .catch(error => {
        console.log(error);
      });
  },[]) 
  return (
      <div className="App">
        <Header title={"UserList"} />
        <div className="row d-flex justify-content-center">
          {data.map((item, index) => (
            <UserList key={index} item={item} />
          ))}
        </div>
      </div>
    );
}

Explanation

useEffect Hook

• The useEffect hook in React is used to perform side effects in function components.
• In our App component, we use useEffect to make an API call to https://randomuser.me/api/?results=50 when the component mounts.
• When the API call is successful, we update the data state with the received user data.

Making API Calls with Axios

• We import Axios and use it to make a GET request to the specified URL.
• The response from the API is processed in the .then() block and the data is set to the data state using updateData.

Next create a components folder in src and create a Header.js file within components folder

import React from "react";
export default function Header(props) {
  return (
    <nav className="navbar navbar-dark bg-dark">
      <div className="container">
        <div className="row m-auto">
          <i className="fa fa-hand-pointer-o fa-2x text-white mr-2" />
          <div className="text-light h2" data-testid="title">{props.title}</div>
        </div>
      </div>
    </nav>
  );
}

Now we can create `UserList.js` component with components folder with below code:-

import React from "react";

function UserList({ item }) {
  return (
    <div
      className="col-sm-12 d-flex justify-content-center"
      style={{ marginBottom: "15px" }}
    >
      <div className="card" style={{ width: "30rem" }}>
        <h5 className="card-header">User: {item.login.username}</h5>
        <div className="card-body">
          <div className="row">
            <div className="col">
              <h4 className="card-title">
                {item.name.title} {item.name.first} {item.name.last}
              </h4>
              <p className="card-text">Email: {item.email}</p>
            </div>
            <div className="col-3">
              <img
                src={item.picture.medium}
                className="img-fluid rounded mb-3 float-right"
              ></img>
            </div>
          </div>
          <div className="row d-flex flex-nowrap">
            <div className="col">
              <h5 className="card-text mb-0">
                User for {item.registered.age}{" "}
                {item.registered.age === 1 ? "year" : " years"}
              </h5>
              <p className="card-text mb-0">Age: {item.dob.age}</p>
              <p className="card-text mb-0">Nationality: {item.nat}</p>
              <p className="card-text mb-0">Phone : {item.phone}</p>
            </div>
            <div className="col text-right">
              <h6 className="card-text mb-0">Address:</h6>
              <p className="card-text mb-0">
                <small>
                  {item.location.street.number} {item.location.street.name},
                </small>
              </p>
              <p className="card-text mb-0 text-wrap">
                <small>
                  {item.location.state}, {item.location.country},
                </small>
              </p>
              <p className="card-text mb-0">
                <small>{item.location.postcode}</small>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
export default UserList;

Step 4: Styling the app

Add below stylesheet link in public/index.html head section to import Bootstrap CSS:

<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />

Github repo for the project:-
Github User Feed App

Codesandbox link:-
Codesandbox User Feed App

Conclusion

You’ve successfully built a user feed app using React.js! This project demonstrated how to use the useEffect hook to make API calls in React applications. The fetched data is displayed as a scrollable feed on the page. Feel free to explore and customize the app further to enhance your understanding of React. Have a nice day ahead!

For more content check out my Youtube channel:
SaurabhNative-Youtube

Check out next part in which we build image gallery below:

React30-Part5