Book Image

Hands-On Full Stack Development with Spring Boot 2.0 and React

By : Juha Hinkula
Book Image

Hands-On Full Stack Development with Spring Boot 2.0 and React

By: Juha Hinkula

Overview of this book

Apart from knowing how to write frontend and backend code, a full-stack engineer has to tackle all the problems that are encountered in the application development life cycle, starting from a simple idea to UI design, the technical design, and all the way to implementing, testing, production, deployment, and monitoring. This book covers the full set of technologies that you need to know to become a full-stack web developer with Spring Boot for the backend and React for the frontend. This comprehensive guide demonstrates how to build a modern full-stack application in practice. This book will teach you how to build RESTful API endpoints and work with the data access Layer of Spring, using Hibernate as the ORM. As we move ahead, you will be introduced to the other components of Spring, such as Spring Security, which will teach you how to secure the backend. Then, we will move on to the frontend, where you will be introduced to React, a modern JavaScript library for building fast and reliable user interfaces, and its app development environment and components. You will also create a Docker container for your application. Finally, the book will lay out the best practices that underpin professional full-stack web development.
Table of Contents (24 chapters)
Title Page
Copyright and Credits
Dedication
Packt Upsell
Contributors
Preface
Index

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