Creating a UserList Component in React to Consume User REST API
Title: Creating a UserList Component in React to Consume User REST APICreating a UserList Component in React to Consume User REST API
Introduction:
Welcome to CodecraftersCampus! In this blog post, we will guide you through creating a UserList component in React that fetches user data from a REST API and displays it in a beautifully styled table. This tutorial is part of our series on building a comprehensive user management system.
Preview of the User REST API:
Before we dive into the React component, let’s quickly review the User REST API we’ll be using. This API provides endpoints to get, create, update, and delete users. Here’s a brief overview of the API routes:
- GET
/api/users– Fetch all users - POST
/api/users– Create a new user - PUT
/api/users/:id– Update a user by ID - DELETE
/api/users/:id– Delete a user by ID
Step-by-Step Guide
Step 1: Create the UserList Component
First, let’s create the UserList component. Inside the src folder of your React project, create a new file called UserList.js.
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './UserList.css';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
axios.get('http://localhost:5000/api/users')
.then(response => {
setUsers(response.data);
})
.catch(error => {
console.error('There was an error fetching the users!', error);
});
}, []);
return (
<div className="user-list-container">
<h2>User List</h2>
<table className="user-table">
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
{users.map(user => (
<tr key={user.id}>
<td>{user.id}</td>
<td>{user.username}</td>
<td>{user.email}</td>
<td>{user.phone}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default UserList;
Step 2: Update the App Component
Next, we need to include the UserList component in our main app. Open src/App.js and update it as follows:
import React from 'react';
import './App.css';
import UserList from './UserList';
const App = () => {
return (
<div className="App">
<header className="App-header">
<h1>User Management System</h1>
</header>
<main>
<UserList />
</main>
</div>
);
};
export default App;
Step 3: Style the Component
To make our table look nice, let’s add some styling. Create a new file called UserList.css in the src folder and add the following styles:
/* src/UserList.css */
.user-list-container {
padding: 20px;
margin: 0 auto;
max-width: 800px;
}
.user-list-container h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.user-table {
width: 100%;
border-collapse: collapse;
margin: 0 auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.user-table th, .user-table td {
padding: 12px;
border: 1px solid #ddd;
text-align: left;
}
.user-table th {
background-color: #f4f4f4;
color: #333;
}
.user-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.user-table tr:hover {
background-color: #f1f1f1;
}
Also, update src/App.css with the following styles for better overall appearance:
/* src/App.css */
.App {
text-align: center;
}
.App-header {
background-color: #282c34;
padding: 20px;
color: white;
margin-bottom: 20px;
}
main {
padding: 20px;
}
Step 4: Run the Application
Now it’s time to run our application. Open your terminal and run:
npm start
Open your browser and navigate to http://localhost:3000. You should see a table displaying the list of users fetched from the API, styled beautifully..
