Book Image

Full Stack Development with Spring Boot and React - Third Edition

By : Juha Hinkula
Book Image

Full Stack Development with Spring Boot and React - Third Edition

By: Juha Hinkula

Overview of this book

Getting started with full stack development can be daunting. Even developers who are familiar with the best tools, such as Spring Boot and React, can struggle to nail the basics, let alone master the more advanced elements. If you’re one of these developers, this comprehensive guide covers everything you need! This updated edition of the Full Stack Development with Spring Boot 2 and React book will take you from novice to proficient in this expansive domain. Taking a practical approach, this book will first walk you through the latest Spring Boot features for creating a robust backend, covering everything from setting up the environment and dependency injection to security and testing. Once this has been covered, you’ll advance to React frontend programming. If you’ve ever wondered about custom Hooks, third-party components, and MUI, this book will demystify all that and much more. You’ll explore everything that goes into developing, testing, securing, and deploying your applications using all the latest tools from Spring Boot, React, and other cutting-edge technologies. By the end of this book, you'll not only have learned the theory of building modern full stack applications but also have developed valuable skills that add value in any setting.

Related Content you might be interested in

Current Title:

Small book image
Full Stack Development with Spring Boot and React - Third Edition
Juha Hinkula
Apr, 2022 | 378 pages
Small book image
Spring Boot and Angular
Seiji Ralph Villafranca | Devlin Basilan Duldulao
Dec, 2022 | 438 pages
Small book image
Learning Spring Boot 3.0
Greg L Turnquist
Dec, 2022 | 270 pages
Small book image
Modern API Development with Spring and Spring Boot
Sourabh Sharma
Jun, 2021 | 582 pages
Table of Contents (22 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Code in Action
Download the color images
Conventions used
Get in touch
Share Your Thoughts
1
Part 1: Backend Programming with Spring Boot
Part 1: Backend Programming with Spring Boot
Free Chapter
2
Chapter 1: Setting Up the Environment and Tools – Backend
Chapter 1: Setting Up the Environment and Tools – Backend
Technical requirements
Installing Eclipse
Understanding Maven
Using Spring Initializr
Installing MariaDB
Summary
Questions
Further reading
3
Chapter 2: Understanding Dependency Injection
Chapter 2: Understanding Dependency Injection
Technical requirements
Introducing DI
Using DI in Spring Boot
Summary
Questions
Further reading
4
Chapter 3: Using JPA to Create and Access a Database
Chapter 3: Using JPA to Create and Access a Database
Technical requirements
Basics of ORM, JPA, and Hibernate
Creating the entity classes
Creating CRUD repositories
Adding relationships between tables
Setting up a MariaDB database
Summary
Questions
Further reading
5
Chapter 4: Creating a RESTful Web Service with Spring Boot
Chapter 4: Creating a RESTful Web Service with Spring Boot
Technical requirements
Basics of REST
Creating a RESTful web service
Using Spring Data REST
Summary
Questions
Further reading
6
Chapter 5: Securing and Testing Your Backend
Chapter 5: Securing and Testing Your Backend
Technical requirements
Understanding Spring Security
Securing your backend using a JWT
Testing in Spring Boot
Creating unit tests
Summary
Questions
Further reading
7
Part 2: Frontend Programming with React
Part 2: Frontend Programming with React
8
Chapter 6: Setting Up the Environment and Tools – Frontend
Chapter 6: Setting Up the Environment and Tools – Frontend
Technical requirements
Installing Node.js
Installing VS Code
Creating and running a React app
Summary
Questions
Further reading
9
Chapter 7: Getting Started with React
Chapter 7: Getting Started with React
Technical requirements
How to create React components
Useful ES6 features
JSX and styling
Props and state
Stateless components
Conditional rendering
React hooks
Custom hooks
The Context API
Handling lists with React
Handling events with React
Handling forms with React
Summary
Questions
Further reading
10
Chapter 8: Consuming the REST API with React
Chapter 8: Consuming the REST API with React
Technical requirements
Using promises
Using the fetch API
Using the axios library
Working on practical examples
OpenWeatherMap API
Summary
Questions
Further reading
11
Chapter 9: Useful Third-Party Components for React
Chapter 9: Useful Third-Party Components for React
Technical requirements
Using third-party React components
Working with AG Grid
Using the MUI component library
Managing routing in React
Summary
Questions
Further reading
12
Part 3: Full Stack Development
Part 3: Full Stack Development
13
Chapter 10: Setting up the Frontend for Our Spring Boot RESTful Web Service
Chapter 10: Setting up the Frontend for Our Spring Boot RESTful Web Service
Technical requirements
Mocking up the UI
Preparing the Spring Boot backend
Creating the React project for the frontend
Summary
Questions
Further reading
14
Chapter 11: Adding CRUD Functionalities
Chapter 11: Adding CRUD Functionalities
Technical requirements
Creating the list page
The delete functionality
The add functionality
The edit functionality
Other functionalities
Summary
Questions
Further reading
15
Chapter 12: Styling the Frontend with React MUI
Chapter 12: Styling the Frontend with React MUI
Technical requirements
Using the Button component
Using icon components
Using the TextField components
Summary
Questions
Further reading
16
Chapter 13: Testing Your Frontend
Chapter 13: Testing Your Frontend
Technical requirements
Using Jest
Firing events in tests
Understanding snapshot testing
Summary
Questions
Further reading
17
Chapter 14: Securing Your Application
Chapter 14: Securing Your Application
Technical requirements
Securing the backend
Securing the frontend
Summary
Questions
Further reading
18
Chapter 15: Deploying Your Application
Chapter 15: Deploying Your Application
Technical requirements
Deploying the backend
Deploying the frontend
Using Docker containers
Summary
Questions
Further reading
19
Chapter 16: Best Practices
Chapter 16: Best Practices
What to learn next
Best practices
Summary
Questions
Further reading
20
Assessments
Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Chapter 13
Chapter 14
Chapter 15
Chapter 16
Why subscribe?
21
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Share Your Thoughts

Creating the React project for the frontend

Before we start coding the frontend, we have to create a new React app:

  1. Open PowerShell, or any other suitable terminal. Create a new React app by typing the following command:
    npx create-react-app carfront
  2. Move to the project folder and install the Material-UI component library by typing the following commands:
    cd carfront
npm install @mui/material @emotion/react @emotion/styled
  3. Run the app by typing the following command in the project's root folder:
    npm start

Alternatively, if you are using yarn, type in the following:

yarn start
  1. Open the src folder with Visual Studio Code, remove any superfluous code, and use the MUI AppBar component in the App.js file to get the toolbar for your app. Following the modifications, your App.js file source code should appear as follows:
    import './App.css';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar&apos...
Previous Section
End of Section 5
Next Section