Full Stack Project with React and Spring Boot – Add React Router [Part 2]





Hey guys this is the continuation of the Full stack project with React and Spring Boot series. In this post, we will add React router to the React application.

Read More:

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

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

This will create react starter project. Next open the 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

npm install react-router-dom

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');
}

export default { getAll };

Create EmployeeList Component


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

import { useEffect, useState } from 'react';
import employeeService from '../services/employee.service';

const EmployeeList = () => {

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

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

  return (
    <div>
      <h3>List of Employees</h3>
      <div>
        <table border="1">
          <tr>
            <th>Name</th>
            <th>Location</th>
            <th>Department</th>
          </tr>
          {
            employees.map(employee => (
              <tr key={employee.id}>
                <td>{employee.name}</td>
                <td>{employee.location}</td>
                <td>{employee.department}</td>
              </tr>
            ))
          }
        </table>
      </div>
    </div>
  );
}

export default EmployeeList;

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';

function App() {
  return (
    <BrowserRouter>
      <div>
        <div>
          <Switch>
            <Route exact path="/" component={EmployeeList} />
            <Route path="*" component={NotFound} />
          </Switch>
        </div>
      </div>
    </BrowserRouter>
  );
}


export default App;

Run the React app


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

npm start

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

Screenshot-2021-09-05-at-7-08-55-PM

Now try navigate to the route which is not configured localhost:3000/abc

Screenshot-2021-09-05-at-11-13-55-PM

What’s Next?


In the next part of this series, we will learn how to apply Bootstrap styling to the react application.

Read Next: Full stack project with React and Spring boot [Part 3]

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.




Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

Leave a Reply