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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Section 1: Backend Programming with Spring Boot

Section 1: Backend Programming with Spring Boot

Setting Up the Environment and Tools - Backend

Setting Up the Environment and Tools - Backend

Technical requirements

Setting up the environment and tools

Further reading

Dependency Injection

Dependency Injection

Technical requirements

Further reading

Using JPA to Create and Access a Database

Using JPA to Create and Access a Database

Technical requirements

Basics of ORM, JPA, and Hibernate

Further reading

Creating a RESTful Web Service with Spring Boot

Creating a RESTful Web Service with Spring Boot

Technical requirements

Further reading

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

Further reading

Section 2: Frontend Programming with React

Section 2: Frontend Programming with React

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

Further reading

Getting Started with React

Getting Started with React

Technical requirements

Basic React components

JSX and styling

Props and the state

Component life cycle methods

Stateless components

Handling lists with React

Handling events with React

Handling forms with React

Further reading

Consuming the REST API with React

Consuming the REST API with React

Technical requirements

Using the fetch API

Using the axios library

Practical examples

Further reading

Useful Third-Party Components for React

Useful Third-Party Components for React

Technical requirements

Using third-party React components

Material-UI component library

Further reading

Section 3: Full Stack Development

Section 3: Full Stack Development

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

Further reading

Adding CRUD Functionalities

Adding CRUD Functionalities

Technical requirements

Creating the list page

The delete functionality

The add functionality

The edit functionality

Other functionalities

Further reading

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

Further reading

Testing Your Frontend

Testing Your Frontend

Technical requirements

Snapshot testing

Further reading

Securing Your Application

Securing Your Application

Technical requirements

Securing the backend

Securing the frontend

Further reading

Deploying Your Application

Deploying Your Application

Technical requirements

Deploying the backend

Deploying the frontend

Using Docker containers

Further reading

Best Practices

What to learn next

Further reading

Assessments

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Using Enzyme

Enzyme is a JavaScript library for testing React components' output, and was developed by Airbnb. Enzyme has a really nice API for DOM manipulation and traversing. If you have used jQuery, it is really easy to understand the idea of the Enzyme API.

To start using Enzyme, perform the following steps:

Install it by typing the following command in your Terminal. This will install the enzyme library and the adapter library for React version 16. There is an adapter available for older React versions:

npm install enzyme enzyme-adapter-react-16 --save-dev

Create a new test file (test suite) called AddCar.test.js in the src folder. Now, we are going to create an Enzyme shallow rendering test for our AddCar component. The first test case renders the component and checks that there are five TextInput components, as there should be. wrapper.find finds every node in the...