Connecting Spring Boot with React.js with Class Components

Spring boot is a Java-based framework used to create RESTful APIs as microservice. In this tutorial we are only going to connect our RESTful APIs with React.js, so you should already know how to create a Spring Boot project with REST services.

So after creating your React.js project you need to have a component to consume those REST services. We will assume that there is a backend service that provides trip booking details stored in some kind of database like MongoDB.

We are going to create a class component called DisplayBill to list all the booking details.

import React, { Component } from 'react';

export default class DisplayBill extends Component {

    constructor(props) {
        super(props);
       
    }


    render() {
        return (
            <div>
                <h1></h1>
            </div>
        )
    }
}

We need to define all the fields to list the GET response as props. So through the GET response, we are going to get all vehicle's names stored with the trip type, duration and charge.

import React, { Component } from 'react';

const Booking = props => (
    <tr>
        <td>{props.booking.vehicle}</td>
        <td>{props.booking.tripType}</td>
        <td>{props.booking.duration}</td>
        <td>{props.booking.charge}</td>
    </tr>
)

export default class DisplayBill extends Component {

    constructor(props) {
        super(props);
        this.state = { bookings: [] };
    }


    render() {
        return (
            <div>
                <h3>Bookings List</h3>
                <table className="table">
                    <thead className="thead-light">
                    <tr>
                        <th>Vehicle</th>
                        <th>Type</th>
                        <th>Duration</th>
                        <th>Charge</th>
                    </tr>
                    </thead>
                    <tbody>
                    
                    </tbody>
                </table>
            </div>
        )
    }
}

Now inside the constructor of the class, we need to declare an empty array to define initial state of the bookings array.

Then we are using the componentDidMount() method to use the GET request provided by port 8080. For that initially, we need to install the axios library.

npm install axios

Then we can import axios library and use axios.get() to get all the booking details.

import React, { Component } from 'react';
import axios from 'axios';

const Booking = props => (
    <tr>
        <td>{props.booking.vehicle}</td>
        <td>{props.booking.tripType}</td>
        <td>{props.booking.duration}</td>
        <td>{props.booking.charge}</td>
    </tr>
)

export default class DisplayBill extends Component {

    constructor(props) {
        super(props);
        this.state = { bookings: [] };
    }

    componentDidMount() {
        axios.get('http://localhost:8080/tripCharge')
            .then(response => {
                this.setState({ bookings: response.data });
            })
            .catch(function (error) {
                console.log(error);
            })
    }

    bookingList() {
        return this.state.bookings.map(function (currentBooking, i) {
            return <Booking booking={currentBooking} key={i} />;
        })
    }

    render() {
        return (
            <div>
                <h3>Bookings List</h3>
                <table className="table">
                    <thead className="thead-light">
                    <tr>
                        <th>Vehicle</th>
                        <th>Type</th>
                        <th>Duration</th>
                        <th>Charge</th>
                    </tr>
                    </thead>
                    <tbody>
                    {this.bookingList()}
                    </tbody>
                </table>
            </div>
        )
    }
}

So now you be able to list bookings through this component.

I hope this would help you in connecting Spring Boot with react Class component.