Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Full Stack Development with Spring Boot 3 and React
  • Table Of Contents Toc
Full Stack Development with Spring Boot 3 and React

Full Stack Development with Spring Boot 3 and React - Fourth Edition

By : Juha Hinkula
4.4 (18)
Buy this Book
close
close
Full Stack Development with Spring Boot 3 and React

Full Stack Development with Spring Boot 3 and React

4.4 (18)
By: Juha Hinkula
Buy this Book

Overview of this book

If you’re an existing Java developer who wants to go full stack or pick up another frontend framework, this book is your concise introduction to React. In this three-part build-along, you’ll create a robust Spring Boot backend, a React frontend, and then deploy them together. This new edition is updated to Spring Boot 3 and includes expanded content on security and testing. For the first time ever, it also covers React development with the in-demand TypeScript. You’ll explore the elements that go into creating a REST API and testing, securing, and deploying your applications. You’ll learn about custom Hooks, third-party components, and MUI. By the end of this book, you'll be able to build a full stack application using the latest tools and modern best practices.
Table of Contents (23 chapters)
close
close
close
Preface
Icon
Preface
Icon
Who this book is for
Icon
What this book covers
Icon
To get the most out of this book
Icon
Get in touch
1
Part I: Backend Programming with Spring Boot
Icon
Part I: Backend Programming with Spring Boot
Lock Free Chapter
2
Setting Up the Environment and Tools – Backend
Icon
Setting Up the Environment and Tools – Backend
Icon
Technical requirements
Icon
Installing Eclipse
Icon
Understanding Gradle
Icon
Using Spring Initializr
Icon
Installing MariaDB
Icon
Summary
Icon
Questions
Icon
Further reading
3
Understanding Dependency Injection
Icon
Understanding Dependency Injection
Icon
Technical requirements
Icon
Introducing dependency injection
Icon
Using dependency injection in Spring Boot
Icon
Summary
Icon
Questions
Icon
Further reading
4
Using JPA to Create and Access a Database
Icon
Using JPA to Create and Access a Database
Icon
Technical requirements
Icon
Basics of ORM, JPA, and Hibernate
Icon
Creating the entity classes
Icon
Creating CRUD repositories
Icon
Adding relationships between tables
Icon
Setting up a MariaDB database
Icon
Summary
Icon
Questions
Icon
Further reading
5
Creating a RESTful Web Service with Spring Boot
Icon
Creating a RESTful Web Service with Spring Boot
Icon
Technical requirements
Icon
Basics of REST
Icon
Creating a RESTful web service with Spring Boot
Icon
Using Spring Data REST
Icon
Documenting a RESTful API
Icon
Summary
Icon
Questions
Icon
Further reading
6
Securing Your Backend
Icon
Securing Your Backend
Icon
Technical requirements
Icon
Understanding Spring Security
Icon
Securing your backend with a JSON Web Token
Icon
Role-based security
Icon
Using OAuth2 with Spring Boot
Icon
Summary
Icon
Questions
Icon
Further reading
7
Testing Your Backend
Icon
Testing Your Backend
Icon
Technical requirements
Icon
Testing in Spring Boot
Icon
Creating test cases
Icon
Test-driven development
Icon
Summary
Icon
Questions
Icon
Further reading
8
Part II: Frontend Programming with React
Icon
Part II: Frontend Programming with React
9
Setting Up the Environment and Tools – Frontend
Icon
Setting Up the Environment and Tools – Frontend
Icon
Technical requirements
Icon
Installing Node.js
Icon
Installing Visual Studio Code
Icon
Creating and running a React app
Icon
Debugging a React app
Icon
Summary
Icon
Questions
Icon
Further reading
10
Getting Started with React
Icon
Getting Started with React
Icon
Technical requirements
Icon
Creating React components
Icon
Useful ES6 features
Icon
JSX and styling
Icon
Props and state
Icon
Conditional rendering
Icon
React hooks
Icon
The Context API
Icon
Handling lists with React
Icon
Handling events with React
Icon
Handling forms with React
Icon
Summary
Icon
Questions
Icon
Further reading
11
Introduction to TypeScript
Icon
Introduction to TypeScript
Icon
Technical requirements
Icon
Understanding TypeScript
Icon
Using TypeScript features with React
Icon
Creating a React app with TypeScript
Icon
Summary
Icon
Questions
Icon
Further reading
12
Consuming the REST API with React
Icon
Consuming the REST API with React
Icon
Technical requirements
Icon
Promises
Icon
Using the fetch API
Icon
Using the Axios library
Icon
Practical examples
Icon
Handling race conditions
Icon
Using the React Query library
Icon
Summary
Icon
Questions
Icon
Further reading
13
Useful Third-Party Components for React
Icon
Useful Third-Party Components for React
Icon
Technical requirements
Icon
Installing third-party React components
Icon
Working with AG Grid
Icon
Using the Material UI component library
Icon
Managing routing with React Router
Icon
Summary
Icon
Questions
Icon
Further reading
14
Part III: Full Stack Development
Icon
Part III: Full Stack Development
15
Setting Up the Frontend for Our Spring Boot RESTful Web Service
Icon
Setting Up the Frontend for Our Spring Boot RESTful Web Service
Icon
Technical requirements
Icon
Mocking up the UI
Icon
Preparing the Spring Boot backend
Icon
Creating the React project for the frontend
Icon
Summary
Icon
Questions
Icon
Further reading
16
Adding CRUD Functionalities
chevron up
Icon
Adding CRUD Functionalities
Icon
Technical requirements
Icon
Creating the list page
Icon
Adding the delete functionality
Icon
Adding the add functionality
Icon
Adding the edit functionality
Icon
Exporting the data to CSV
Icon
Summary
Icon
Questions
Icon
Further reading
17
Styling the Frontend with MUI
Icon
Styling the Frontend with MUI
Icon
Technical requirements
Icon
Using the MUI Button component
Icon
Using the MUI Icon and IconButton components
Icon
Using the MUI TextField component
Icon
Summary
Icon
Questions
Icon
Further reading
18
Testing React Apps
Icon
Testing React Apps
Icon
Technical requirements
Icon
Using Jest
Icon
Using the React Testing Library
Icon
Using Vitest
Icon
Firing events in tests
Icon
End-to-end testing
Icon
Summary
Icon
Questions
Icon
Further reading
19
Securing Your Application
Icon
Securing Your Application
Icon
Technical requirements
Icon
Securing the backend
Icon
Securing the frontend
Icon
Summary
Icon
Questions
Icon
Further reading
20
Deploying Your Application
Icon
Deploying Your Application
Icon
Technical requirements
Icon
Deploying the backend with AWS
Icon
Deploying the frontend with Netlify
Icon
Using Docker containers
Icon
Summary
Icon
Questions
Icon
Further reading
21
Other Books You May Enjoy
Icon
Other Books You May Enjoy
22
Index
Icon
Index

Adding the edit functionality

We will implement the edit functionality by adding the Edit button to each table row. When the row Edit button is pressed, it opens a modal form where the user can edit the existing car and save their changes. The idea is that we pass car data from the grid row to the edit form, and the form fields are populated when the form is opened:

  1. First, create a file called EditCar.tsx in the components folder. We have to define a FormProps type for our props, and this can be defined inside our component because we don’t need this type anywhere else. The type of data that will be passed to the EditCar component is the CarResponse type. We will also create a state for car data like we did in the add functionality section. The code for the EditCar.tsx file looks like the following: 
    // EditCar.tsx
import { useState } from 'react';
import { Car, CarResponse } from '../types';
type FormProps = {
  cardata: CarResponse;
...
Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Full Stack Development with Spring Boot 3 and React
End of Section 16
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon