Creating a ReactJS Employee CRUD Interface using API: Managing Single and Multiple Objects

In this tutorial, we will learn how to build an Employee CRUD (Create, Read, Update, Delete) application in ReactJS using an API to handle single and multiple objects. This tutorial assumes that you have a basic understanding of ReactJS and JavaScript.

Step 1: Create a new ReactJS project

First, we need to create a new ReactJS project. Open your terminal and run the following command:

npx create-react-app employee-crud

This command will create a new ReactJS project called employee-crud.

Step 2: Install Axios

Next, we need to install Axios, which is a popular JavaScript library for making HTTP requests. You can install Axios by running the following command in your terminal:

npm install axios

Step 3: Create a new component for Employee CRUD

Now, let’s create a new component for our Employee CRUD application. Create a new file called EmployeeCrud.js in the src/components directory and add the following code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const EmployeeCrud = () => {

    const [employees, setEmployees] = useState([]);
    const [employee, setEmployee] = useState({});

    useEffect(() => {
        fetchEmployees();
    }, []);

    const fetchEmployees = async () => {
        try {
            const response = await axios.get('http://api.example.com/employees');
            setEmployees(response.data);
        } catch (error) {
            console.error(error);
        }
    };

    const fetchEmployee = async (id) => {
        try {
            const response = await axios.get(`http://api.example.com/employees/${id}`);
            setEmployee(response.data);
        } catch (error) {
            console.error(error);
        }
    };

    const createEmployee = async (employeeData) => {
        try {
            const response = await axios.post('http://api.example.com/employees', employeeData);
            fetchEmployees();
        } catch (error) {
            console.error(error);
        }
    };

    const updateEmployee = async (id, employeeData) => {
        try {
            const response = await axios.put(`http://api.example.com/employees/${id}`, employeeData);
            fetchEmployees();
        } catch (error) {
            console.error(error);
        }
    };

    const deleteEmployee = async (id) => {
        try {
            const response = await axios.delete(`http://api.example.com/employees/${id}`);
            fetchEmployees();
        } catch (error) {
            console.error(error);
        }
    };

    return (
        <div>
            <h1>Employee CRUD</h1>
            <button onClick={() => fetchEmployees()}>Fetch Employees</button>
            <ul>
                {employees.map((emp) => (
                    <li key={emp.id}>{emp.name}</li>
                ))}
            </ul>
            <input
                type="text"
                placeholder="Employee Name"
                value={employee.name}
                onChange={(e) => setEmployee({ ...employee, name: e.target.value })}
            />
            <button onClick={() => createEmployee(employee)}>Create Employee</button>
        </div>
    );
};

export default EmployeeCrud;

In this code snippet, we have created a functional component called EmployeeCrud that makes use of React Hooks to manage the state of employees and employee objects. We have also defined functions to fetch employees, fetch a single employee, create a new employee, update an employee, and delete an employee using Axios to make API calls.

Step 4: Import and use the EmployeeCrud component

Now, let’s import and use the EmployeeCrud component in our App.js file. Update the App.js file with the following code:

import React from 'react';
import EmployeeCrud from './components/EmployeeCrud';

function App() {
  return (
    <div>
      <EmployeeCrud />
    </div>
  );
}

export default App;

Step 5: Run the ReactJS application

Finally, let’s run our ReactJS application by running the following command in your terminal:

npm start

This command will start the development server and open your default web browser to view the Employee CRUD application.

Congratulations! You have successfully built an Employee CRUD application in ReactJS that handles single and multiple objects using an API. You can now further customize and enhance this application by adding more features like editing employees, deleting employees, etc.