Full Stack Development with Spring Boot 3 and React: Build modern web applications using the power of Java, React, and TypeScript. 4 Ed

Cover....1

Copyright....3

Contributors....4

Tabel of Contents....8

Preface....16

Part 1: Backend Programming with Spring Boot....22

Chapter 1: Setting Up the Environment and Tools – Backend....24

Technical requirements....25

Installing Eclipse....25

Understanding Gradle....27

Using Spring Initializr....28

Creating a project....29

Running the project....31

Spring Boot development tools....36

Logs and problem-solving....37

Installing MariaDB....39

Summary....42

Questions....43

Further reading....43

Chapter 2: Understanding Dependency Injection....44

Technical requirements....44

Introducing dependency injection....44

Using dependency injection in Spring Boot....46

Summary....48

Questions....49

Further reading....49

Chapter 3: Using JPA to Create and Access a Database....50

Technical requirements....50

Basics of ORM, JPA, and Hibernate....51

Creating the entity classes....51

Creating CRUD repositories....62

Adding relationships between tables....70

Setting up a MariaDB database....80

Summary....83

Questions....83

Further reading....83

Chapter 4: Creating a RESTful Web Service with Spring Boot....84

Technical requirements....84

Basics of REST....85

Creating a RESTful web service with Spring Boot....86

Using Spring Data REST....93

Documenting a RESTful API....104

Summary....106

Questions....106

Further reading....107

Chapter 5: Securing Your Backend....108

Technical requirements....108

Understanding Spring Security....108

Securing your backend with a JSON Web Token....123

Securing the login....125

Securing the other requests....133

Handling exceptions....136

Adding a CORS filter....139

Role-based security....141

Using OAuth2 with Spring Boot....143

Summary....145

Questions....145

Further reading....145

Chapter 6: Testing Your Backend....146

Technical requirements....146

Testing in Spring Boot....146

Creating test cases....147

Testing with Gradle....154

Test-driven development....156

Summary....157

Questions....158

Further reading....158

Part II: Frontend Programming with React....160

Chapter 7: Setting Up the Environment and Tools – Frontend....162

Technical requirements....162

Installing Node.js....162

Installing Visual Studio Code....164

VS Code extensions....165

Creating and running a React app....167

Modifying a React app....170

Debugging a React app....172

Summary....174

Questions....174

Further reading....174

Chapter 8: Getting Started with React....176

Technical requirements....176

Creating React components....177

Examining our first React app....181

Useful ES6 features....184

Constants and variables....185

Arrow functions....186

Template literals....187

Object destructuring....187

Classes and inheritance....188

JSX and styling....189

Props and state....190

Props....190

State....191

Stateless components....194

Conditional rendering....195

React hooks....196

useState....196

Batching....198

useEffect....200

useRef....204

Custom hooks....204

The Context API....207

Handling lists with React....208

Handling events with React....212

Handling forms with React....213

Summary....220

Questions....220

Further reading....221

Chapter 9: Introduction to TypeScript....222

Technical requirements....222

Understanding TypeScript....222

Common types....223

Functions....228

Using TypeScript features with React....230

State and props....230

Events....235

Creating a React app with TypeScript....236

Vite and TypeScript....240

Summary....240

Questions....240

Further reading....241

Chapter 10: Consuming the REST API with React....242

Technical requirements....242

Promises....243

async and await....245

Using the fetch API....245

Using the Axios library....247

Practical examples....248

OpenWeather API....248

GitHub API....255

Handling race conditions....263

Using the React Query library....264

Summary....272

Questions....272

Further reading....272

Chapter 11: Useful Third-Party Components for React....274

Technical requirements....274

Installing third-party React components....274

Working with AG Grid....279

Using the Material UI component library....286

Managing routing with React Router....297

Summary....303

Questions....303

Further reading....303

Part III: Full Stack Development....304

Chapter 12: Setting Up the Frontend for Our Spring Boot RESTful Web Service....306

Technical requirements....306

Mocking up the UI....307

Preparing the Spring Boot backend....308

Creating the React project for the frontend....310

Summary....314

Questions....314

Further reading....314

Chapter 13: Adding CRUD Functionalities....316

Technical requirements....316

Creating the list page....317

Fetching data from the backend....319

Using environment variables....325

Adding paging, filtering, and sorting....328

Adding the delete functionality....331

Displaying a toast message....336

Adding a confirmation dialog window....338

Adding the add functionality....339

Adding the edit functionality....349

Exporting the data to CSV....357

Summary....360

Questions....360

Further reading....360

Chapter 14: Styling the Frontend with MUI....362

Technical requirements....362

Using the MUI Button component....363

Using the MUI Icon and IconButton components....365

Using the MUI TextField component....370

Summary....372

Questions....372

Further reading....372

Chapter 15: Testing React Apps....374

Technical requirements....374

Using Jest....375

Using the React Testing Library....376

Using Vitest....378

Installing and configuring....378

Running our first test....379

Testing our Carlist component....382

Firing events in tests....386

End-to-end testing....389

Summary....389

Questions....389

Further reading....390

Chapter 16: Securing Your Application....392

Technical requirements....392

Securing the backend....393

Securing the frontend....395

Creating a login component....396

Implementing REST API calls....402

Refactoring duplicate code....404

Displaying an error message....406

Logging out....407

Summary....411

Questions....411

Further reading....411

Chapter 17: Deploying Your Application....412

Technical requirements....412

Deploying the backend with AWS....413

Deploying our MariaDB database....414

Deploying our Spring Boot application....420

Deploying the frontend with Netlify....428

Using Docker containers....433

Summary....437

Questions....438

Further reading....438

PacktPage....440

Other Books You May Enjoy....442

Index....446

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.

What you will learn

• Make fast and RESTful web services powered by Spring Data REST
• Create and manage databases using ORM, JPA, Hibernate, and more
• Explore the use of unit tests and JWTs with Spring Security
• Employ React Hooks, props, states, and more to create your frontend
• Harness the Material UI component library to customize your frontend
• Use the fetch API, Axios, and React Query for networking
• Add CRUD functionality to your apps
• Deploy your apps using AWS and Docker

Who this book is for

This book is for Java developers who have basic familiarity with Spring Boot but don't know where to start when it comes to building full stack applications. Basic knowledge of JavaScript and HTML will help you to follow along.

You'll also find this book useful if you're a frontend developer with knowledge of JavaScript basics and looking to learn full stack development, or a full stack developer experienced in other technology stacks looking to learn a new one.