Spring Boot with ReactJs project for beginners

Home » SpringBoot » Spring Boot with ReactJs project for beginners

In this project, we will learn how to integrate ReactJs with spring. We are using backend as springboot and frontend as reactjs. In this springboot with react tutorial we have used H2 database to pull data from database and display it on browser. In this springboot with reactjs project we will also learn about axios and ComponentDidMount method (component did mount) and how it works.

Backend Code: You Can download from the link given at the end of the page.

Front End Code:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js

import logo from './logo.svg';
import './App.css';
import UserComponents from './components/UserComponents';

function App() {
  return (
    <div className="App">
      <UserComponents/>
    </div>
  );
}

export default App;

UserComponents.js

import React from 'react';
import userservice from '../services/UserServices';
import {Navbar, Nav,Form,FormControl,Button}  from 'react-bootstrap';

class UserComponents extends React.Component{

    constructor(props){
        super(props)
        this.state ={
            users:[]
        }
        
    }
    componentDidMount(){
        userservice.getUsers().then((Response) =>{
            this.setState({users:Response.data})
        });
    }
    render(){
        return(
            <div>
                <Navbar bg="dark" variant="dark">
                  <Navbar.Brand href="#home">TecnoTab</Navbar.Brand>
                        <Nav className="mr-auto">
                            <Nav.Link href="#home">Home</Nav.Link>
                            <Nav.Link href="#features">Features</Nav.Link>
                            <Nav.Link href="#pricing">Pricing</Nav.Link>
                        </Nav>
                        <Form inline>
                            <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                            <Button variant="outline-info">Search</Button>
                        </Form>
                </Navbar>
                <h1 className = "text-center">Users List</h1>
                <table className = "table table-striped">
                    <thead>
                        <tr>
                            <th>User Id</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>email Id</th>
                        </tr>
                    </thead>

                    <tbody>
                        {
                            this.state.users.map(
                                user =>
                                <tr key = {user.id}>
                                    <td>{user.id}</td>
                                    <td>{user.firstName}</td>
                                    <td>{user.lastName}</td>
                                    <td>{user.email}</td>
                                </tr>
                            )
                            }
                    </tbody>
                </table>
            </div>
        )
    }
}
export default UserComponents

UserServices.js

import axios from 'axios'

const USER_REST_API_URL = 'http://localhost:8080/userslist'
class UserServices{

    getUsers(){
        return axios.get(USER_REST_API_URL);
    }


}
export default new UserServices();