Book Image

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

By : Juha Hinkula
5 (1)
Book Image

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

5 (1)
By: Juha Hinkula

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)
1
Part I: Backend Programming with Spring Boot
8
Part II: Frontend Programming with React
14
Part III: Full Stack Development
21
Other Books You May Enjoy
22
Index

Using the MUI TextField component

In this section, we’ll change the text input fields in the modal forms to the MUI TextField and Stack components:

  1. Add the following import statements to the CarDialogContent.tsx file. Stack is a one-dimensional MUI layout component that we can use to set spaces between text fields:
    import TextField from '@mui/material/TextField';
    import Stack from '@mui/material/Stack';
    
  2. Then, change the input elements to the TextField components in the add and edit forms. We are using the label prop to set the labels of the TextField components. There are three different variants (visual styles) of text input available, and we are using the outlined one, which is the default variant. The other variants are standard and filled. You can use the variant prop to change the value. The text fields are wrapped inside the Stack component to get some spacing between the components and to set the top margin: ...