Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search 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
  • Feedback & Rating feedback
Full Stack Development with Spring Boot 3 and React

Full Stack Development with Spring Boot 3 and React

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
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
chevron up
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
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

Creating a React app with TypeScript

Now, we will create a React app using Vite, and we will use TypeScript instead of JavaScript. We will use TypeScript later when we develop the frontend for our car backend. As we mentioned earlier, Vite comes with built-in TypeScript support:

  1. Create a new React app using the following command: 
    npm create vite@latest
  2. Next, name your project tsapp, and select the React framework and the TypeScript variant:

Figure 9.7: React TypeScript app

  1. Then, move to your app folder, install dependencies, and run your app using the following commands: 
    cd tsapp
npm install
npm run dev
  2. Open your app folder in VS Code, and you will see that the filename of our App component is App.tsx:

    Figure 9.8: App.tsx

    The file extension of TypeScript React files is .tsx (combining JSX with TypeScript). The regular file extension of TypeScript files is .ts.

  1. Locate the tsconfig...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
End of Section 5
Next Section

Create a Note

Modal Close icon
You need to login to use this feature.
notes
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Delete Note

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Edit Note

Modal Close icon
Write a note (max 255 characters)
Cancel
Update Note

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