Book Image

Hands-On Full Stack Development with Spring Boot 2 and React - Second Edition

By : Juha Hinkula
Book Image

Hands-On Full Stack Development with Spring Boot 2 and React - Second Edition

By: Juha Hinkula

Overview of this book

React Hooks have changed the way React components are coded. They enable you to write components in a more intuitive way without using classes, which makes your code easier to read and maintain. Building on from the previous edition, this book is updated with React Hooks and the latest changes introduced in create-react-app and Spring Boot 2.1. This book starts with a brief introduction to Spring Boot. You’ll understand how to use dependency injection and work with the data access layer of Spring using Hibernate as the ORM tool. You’ll then learn how to build your own RESTful API endpoints for web applications. As you advance, the book introduces you to other Spring components, such as Spring Security to help you secure the backend. Moving on, you’ll explore React and its app development environment and components for building your frontend. Finally, you’ll create a Docker container for your application by implementing the best practices that underpin professional full stack web development. By the end of this book, you’ll be equipped with all the knowledge you need to build modern full stack applications with Spring Boot for the backend and React for the frontend.

Related Content you might be interested in

Current Title:

Small book image
Hands-On Full Stack Development with Spring Boot 2 and React - Second Edition
Juha Hinkula
May, 2019 | 316 pages
Small book image
React Material-UI Cookbook
Adam Boduch
Mar, 2019 | 534 pages
Small book image
React 16 Tooling
Adam Boduch
Apr, 2018 | 298 pages
Small book image
Spring Boot 2.0 Projects
Mohamed Shazin Sadakath
Jul, 2018 | 336 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
Get in touch
Free Chapter
1
Section 1: Backend Programming with Spring Boot
Section 1: Backend Programming with Spring Boot
2
Setting Up the Environment and Tools - Backend
Setting Up the Environment and Tools - Backend
Technical requirements
Setting up the environment and tools
Summary
Questions
Further reading
3
Dependency Injection
Dependency Injection
Technical requirements
Introducing DI
Summary
Questions
Further reading
4
Using JPA to Create and Access a Database
Using JPA to Create and Access a Database
Technical requirements
Basics of ORM, JPA, and Hibernate
Summary
Questions
Further reading
5
Creating a RESTful Web Service with Spring Boot
Creating a RESTful Web Service with Spring Boot
Technical requirements
Basics of REST
Summary
Questions
Further reading
6
Securing and Testing Your Backend
Securing and Testing Your Backend
Technical requirements
Spring Security
Securing your backend using JWT
Testing in Spring Boot
Creating unit tests
Summary
Questions
Further reading
7
Section 2: Frontend Programming with React
Section 2: Frontend Programming with React
8
Setting Up the Environment and Tools - Frontend
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
Getting Started with React
Getting Started with React
Technical requirements
Basic React components
Basics of ES6
JSX and styling
Props and the state
Component life cycle methods
Stateless components
React hooks
Handling lists with React
Handling events with React
Handling forms with React
Summary
Questions
Further reading
10
Consuming the REST API with React
Consuming the REST API with React
Technical requirements
Using promises
Using the fetch API
Using the axios library
Practical examples
Summary
Questions
Further reading
11
Useful Third-Party Components for React
Useful Third-Party Components for React
Technical requirements
Using third-party React components
React Table
Material-UI component library
Routing
Summary
Questions
Further reading
12
Section 3: Full Stack Development
Section 3: Full Stack Development
13
Setting Up the Frontend for Our Spring Boot RESTful Web Service
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
Adding CRUD Functionalities
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
Styling the Frontend with React Material-UI
Styling the Frontend with React Material-UI
Technical requirements
Using the Button component
Using the Grid component
Using the TextField components
Summary
Questions
Further reading
16
Testing Your Frontend
Testing Your Frontend
Technical requirements
Using Jest
Snapshot testing
Using Enzyme
Summary
Questions
Further reading
17
Securing Your Application
Securing Your Application
Technical requirements
Securing the backend
Securing the frontend
Summary
Questions
Further reading
18
Deploying Your Application
Deploying Your Application
Technical requirements
Deploying the backend
Deploying the frontend
Using Docker containers
Summary
Questions
Further reading
19
Best Practices
Best Practices
What to learn next
Best practices
Summary
Questions
Further reading
20
Assessments
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
21
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Setting Up the Frontend for Our Spring Boot RESTful Web Service

This chapter explains the steps that are required to start the development of the frontend part. We will first define the functionalities that we are developing. Then, we will do a mock-up of the UI. As a backend, we will use our Spring Boot application from Chapter 5, Securing and Testing Your Backend. We will begin development using the unsecured version of the backend. Finally, we will create the React app, which we will use in our frontend development.

In this chapter, we will cover the following topics:

  • Why a mock-up is necessary and how to go about it
  • Preparing our Spring Boot backend for frontend development
  • Creating the React app for the frontend
Previous Section
End of Section 1
Next Section