Chapter 10. Adding CRUD Functionalities

This chapter describes how to implement CRUD functionalities to our frontend. We are going to use the components that we learned about in Chapter 8, Useful Third-Party Components for React. We will fetch data from our backend and present the data in a table. Then, we will implement delete, edit, and add functionalities. In the final part, we will add features to export data to a CSV file.

In this chapter, we will look at the following:

• How to fetch data from the backend and present it in the frontend
• How to delete, add, and update data using the REST API
• How to show toast messages to the user
• How to export data to the CSV file from the React app

Technical requirements

The Spring Boot application that we created in Chapter 4, Securing and Testing Your Backend is needed with the modification from the previous chapter (the unsecured backend).

We also need the React app that we created in the previous chapter (carfront).

Creating the list page

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...

Summary

In this chapter, we implemented all the functionalities for our app. We started with fetching the cars from the backend and showing these in React Table, which provides paging, sorting, and filtering features. Then we implemented the delete functionality and used the toast component to give feedback to the user. The add functionality was implemented using the React Skylight modal-form component. In the edit functionality, we utilized the React Table feature that makes tables editable. Finally, we implemented the ability to export data to a CSV file. In the next chapter, we will start to polish our user interface using the Material UI component library. In the next chapter, we are styling our frontend using React Material-UI component library.

Questions

1. How should you fetch and present data using the REST API with React?
2. How should you delete data using the REST API with React?
3. How should you add data using the REST API with React?
4. How should you update data using the REST API with React?
5. How should you show toast messages with React?
6. How should you export data to a CSV file with React?

Further reading

Packt has other great resources for learning about React:

• https://www.packtpub.com/web-development/getting-started-react
• https://www.packtpub.com/web-development/react-16-essentials-second-edition