In the first phase, we will create the list page to show cars with paging, filtering, and sorting features. Run your Spring Boot backend, the cars can be fetched by sending the GET request to the http://localhost:8080/api/cars URL, as shown in Chapter 3, Creating a RESTful Web Service with Spring Boot.

Let's inspect the JSON data from the response. The array of cars can be found in the _embedded.cars node of the JSON response data:

Now, once we know how to fetch cars from the backend, we are ready to implement the list page to show the cars. The following steps describe this in practice:

1. Open the carfront React app with the VS Code (the React app created in the previous chapter).
2. When the app has multiple components, it is recommended to create a folder for them. Create a new folder, called components, in the src folder. With the VS Code, you can create a folder by right-clicking the folder in the sidebar file explorer and selecting New Folder from the menu:

3. Create a new file, called Carlist.js, in the components folder and now your project structure should look like the following:

4. Open the Carlist.js file in the editor view and write the base code of the component, shown as follows:

import React, { Component } from 'react';

class Carlist extends Component {
  
  render() {
    return (
      <div></div>
    );
  }
}

export default Carlist;

5. We need a state for the cars that are fetched from the REST API, therefore, we have to add the constructor and define one array-type state value:

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

6. Execute fetch in the componentDidMount() life cycle method. The cars from the JSON response data will be saved to the state, called cars:

  componentDidMount() {
    fetch('http://localhost:8080/api/cars')
    .then((response) => response.json()) 
    .then((responseData) => { 
      this.setState({ 
        cars: responseData._embedded.cars,
      }); 
    })
    .catch(err => console.error(err)); 
  }

7. Use the map function to transform car objects into table rows in the render() method and add the table element:

render() {
  const tableRows = this.state.cars.map((car, index) => 
    <tr key={index}>
      <td>{car.brand}</td>
      <td>{car.model}</td>
      <td>{car.color}</td>
      <td>{car.year}</td>
      <td>{car.price}</td>
    </tr>
  );

  return (
    <div className="App">
      <table>
        <tbody>{tableRows}</tbody>
      </table>
    </div>
  );
}

Now, if you start the React app with the npm start command, you should see the following list page:

The URL server can repeat multiple times when we create more CRUD functionalities, and it will change when the backend is deployed to a server other than the localhost. Therefore, it is better to define it as a constant. Then, when the URL value changes, we have to modify it only in one place. Let's create a new file, called constants.js, in the root folder of our app. Open the file in the editor and add the following line into the file:

export const SERVER_URL = 'http://localhost:8080/'

Then, we will import it to our Carlist.js file and use it in the fetch method:

//Carlist.js
// Import server url (named import)
import {SERVER_URL} from '../constants.js'

// Use imported constant in the fetch method
fetch(SERVER_URL + 'api/cars')

Finally, your Carlist.js file source code should look like the following:

import React, { Component } from 'react';
import {SERVER_URL} from '../constants.js'

class Carlist extends Component {
  constructor(props) {
    super(props);
    this.state = { cars: []};
  }

  componentDidMount() {
    fetch(SERVER_URL + 'api/cars')
    .then((response) => response.json()) 
    .then((responseData) => { 
      this.setState({ 
        cars: responseData._embedded.cars,
      }); 
    })
    .catch(err => console.error(err)); 
  }
  
  
  render() {
    const tableRows = this.state.cars.map((car, index) => 
      <tr key={index}><td>{car.brand}</td>
       <td>{car.model}</td><td>{car.color}</td>
       <td>{car.year}</td><td>{car.price}</td></tr>);

    return (
      <div className="App">
        <table><tbody>{tableRows}</tbody></table>
      </div>
    );
  }
}

export default Carlist;

Now we will use React Table to get the paging, filtering, and sorting features out of the box. Stop the development server by pressing Ctrl + C in the terminal, and type the following command to install React Table. After the installation, restart the app:

npm install react-table --save

Import react-table and the style sheet to your Carlist.js file:

import ReactTable from "react-table";
import 'react-table/react-table.css';

Then remove table and tableRows from the render() method. The data prop of React Table is this.state.cars, which contains fetched cars. We also have to define the columns of the table, where accessor is the field of the car object and header is the text of the header. To enable filtering, we set the filterable prop of the table to true. See the source code of the following render() method:

  render() {
    const columns = [{
      Header: 'Brand',
      accessor: 'brand'
    }, {
      Header: 'Model',
      accessor: 'model',
    }, {
      Header: 'Color',
      accessor: 'color',
    }, {
      Header: 'Year',
      accessor: 'year',
    }, {
      Header: 'Price €',
      accessor: 'price',
    },]

    return (
      <div className="App">
        <ReactTable data={this.state.cars} columns={columns} 
          filterable={true}/>
      </div>
    );
  }

With the React Table component, we acquired all the necessary features to our table with a small amount of coding. Now the list page looks like the following: