Blog

Hey guys in this post, we will create React application and we will consume the REST end points which we created in the previous post to create full stack application.

Read Previous: Reactjs + Spring Boot CRUD full stack application – Create Spring boot REST API

Read More:

• Check the Complete Spring Boot Tutorials [100+ Examples]
• Check the Complete Spring Boot and Thymeleaf Tutorial
• Check the Complete AWS Tutorial
• Check the Complete JavaServer Faces (JSF) Tutorial
• Check the Complete Spring Data JPA Tutorial
• Check the Complete Spring Security Tutorial
• Check the Javascript Projects for Beginners
• Check the Spring Boot JdbcTemplate Tutorials

Create React Project

In order create react project, first we should install Node.js. Download the Node.js from the below link and install on your system

https://nodejs.org/en/download/

Once Node.js is installed on your system, you can verify it by executing the below command

node -v

Using npx

To create new react project, we can use create-react-app library. Open the command prompt, enter the following command

npx create-react-app my-app

Using npm

To create using node package manager, open the command prompt enter the following command

npm init react-app my-app

Using yarn

yarn is another package manager just like npm, to create react project using yarn, open the command prompt and enter the following command

yarn create react-app my-app

This will create react starter project. Next open this project in any text editor

Install axios library

On the root of the project, enter the following command to install axios library

npm install axios

• Axios is a simple promise based HTTP client for the browser and node.js.
• Axios provides a simple to use library in a small package with a very extensible interface.

Install React Router DOM library

On the root of the project, enter the following command to install react-router-dom library. We will use this library for routing.

npm install react-router-dom

Intall Bootstrap library

On the root of the project, enter the following command to install bootstrap library. We will use this library to style our react application using Bootstrap 4.

npm install bootstrap@4

Configure axios library

Inside src folder, create http-common.js file and add the following content –

import axios from "axios";

export default axios.create({
    baseURL: 'http://localhost:8080/api/v1',
    headers: {
        'Content-Type': 'application/json'
    }
});

Create Employee Service

Inside src/services folder, create employee.service.js file and add the following content –

import httpClient from "../http-common";

const getAll = () => {
    return httpClient.get('/employees');
}

const create = data => {
    return httpClient.post("/employees", data);
}

const get = id => {
    return httpClient.get(`/employees/${id}`);
}

const update = data => {
    return httpClient.put('/employees', data);
}

const remove = id => {
    return httpClient.delete(`/employees/${id}`);
}
export default { getAll, create, get, update, remove };

We will import httpClient from http-common.js and we will make the HTTP requests to Spring boot backend application.

Create EmployeeList Component

Create EmployeesList.js inside src/components folder and add the following content

import { useEffect, useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import employeeService from '../services/employee.service';

const EmployeeList = () => {

  const [employees, setEmployees] = useState([]);

  const init = () => {
    employeeService.getAll()
      .then(response => {
        console.log('Printing employees data', response.data);
        setEmployees(response.data);
      })
      .catch(error => {
        console.log('Something went wrong', error);
      }) 
  }

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

  const handleDelete = (id) => {
    console.log('Printing id', id);
    employeeService.remove(id)
      .then(response => {
        console.log('employee deleted successfully', response.data);
        init();
      })
      .catch(error => {
        console.log('Something went wrong', error);
      })
  }

  return (
    <div className="container">
      <h3>List of Employees</h3>
      <hr/>
      <div>
        <Link to="/add" className="btn btn-primary mb-2">Add Employee</Link>
        <table className="table table-bordered table-striped">
          <thead className="thead-dark">
            <tr>
              <th>Name</th>
              <th>Location</th>
              <th>Department</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
          {
            employees.map(employee => (
              <tr key={employee.id}>
                <td>{employee.name}</td>
                <td>{employee.location}</td>
                <td>{employee.department}</td>
                <td>
                  <Link className="btn btn-info" to={`/employees/edit/${employee.id}`}>Update</Link>
                  
                  <button className="btn btn-danger ml-2" onClick={() => {
                    handleDelete(employee.id);
                  }}>Delete</button>
                </td>
              </tr>
            ))
          }
          </tbody>
        </table>
        
      </div>
    </div>
  );
}

export default EmployeeList;

We have created init() method, which is responsible for fetching the list of records from API. We will call this method inside the useEffect() hook so this will call as soon as the component loads.

We also created handleDelete() method, to delete the employee based on their id. Inside this method, we will call spring boot REST api to delete an employee.

Create Add Employee Component

Create AddEmployee.js inside src/components folder and add the following content

import { useState } from "react";
import { Link, useHistory, useParams } from "react-router-dom";
import { useEffect } from "react/cjs/react.development";
import employeeService from "../services/employee.service";

const AddEmployee = () => {
    const[name, setName] = useState('');
    const[location, setLocation] = useState('');
    const[department, setDepartment] = useState('');
    const history = useHistory();
    const {id} = useParams();

    const saveEmployee = (e) => {
        e.preventDefault();
        
        const employee = {name, location, department, id};
        if (id) {
            //update
            employeeService.update(employee)
                .then(response => {
                    console.log('Employee data updated successfully', response.data);
                    history.push('/');
                })
                .catch(error => {
                    console.log('Something went wrong', error);
                }) 
        } else {
            //create
            employeeService.create(employee)
            .then(response => {
                console.log("employee added successfully", response.data);
                history.push("/");
            })
            .catch(error => {
                console.log('something went wroing', error);
            })
        }
    }

    useEffect(() => {
        if (id) {
            employeeService.get(id)
                .then(employee => {
                    setName(employee.data.name);
                    setLocation(employee.data.location);
                    setDepartment(employee.data.department);
                })
                .catch(error => {
                    console.log('Something went wrong', error);
                })
        }
    }, [])
    return(
        <div className="container">
            <h3>Add Employee</h3>
            <hr/>
            <form>
                <div className="form-group">
                    <input 
                        type="text" 
                        className="form-control col-4"
                        id="name"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        placeholder="Enter name"
                    />

                </div>
                <div className="form-group">
                    <input 
                        type="text" 
                        className="form-control col-4"
                        id="department"
                        value={department}
                        onChange={(e) => setDepartment(e.target.value)}
                        placeholder="Enter Department"
                    />

                </div>
                <div className="form-group">
                    <input 
                        type="text" 
                        className="form-control col-4"
                        id="location"
                        value={location}
                        onChange={(e) => setLocation(e.target.value)}
                        placeholder="Enter Location"
                    />
                </div>
                <div >
                    <button onClick={(e) => saveEmployee(e)} className="btn btn-primary">Save</button>
                </div>
            </form>
            <hr/>
            <Link to="/">Back to List</Link>
        </div>
    )
}

export default AddEmployee;

Inside the saveEmployee() method, we are checking for the id existance, if id is present then we are calling HTTP PUT request for updating the employee. If id is not present then we are calling HTTP POST request for creating new employee.

Create NotFound Component

Create NotFound.js inside src/components folder and add the following content

const NotFound = () => {
    return (
        <div>
            <p>The page you are looking is not yet developed.</p>
        </div>
    );
}
 
export default NotFound;

Configure React Router

Open App.js and add the following content

import { BrowserRouter, Switch, Route } from 'react-router-dom';
import EmployeeList from './components/EmployeesList';
import NotFound from './components/NotFound';
import 'bootstrap/dist/css/bootstrap.min.css';
import AddEmployee from './components/AddEmployee';

function App() {
  return (
    <BrowserRouter>
      <div>
        <div>
          <Switch>
            <Route exact path="/" component={EmployeeList} />
            <Route path="/add" component={AddEmployee} />
            <Route path="/employees/edit/:id" component={AddEmployee} />
            <Route path="*" component={NotFound} />
          </Switch>
        </div>
      </div>
    </BrowserRouter>
  );
}


export default App;

At the top, we are importing the bootstrap.min.css library to style the react components.

Run the React App

On the root of the project, open the command prompt, execute the following command

Using npm

npm start

Using yarn

yarn start

This will run the application on the port, localhost:3000

—

That’s it for this post, if you like this post, share this with your friends and colleagues or you can share this within your social media platform. Thanks, I will see you in our next post.