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.
Table of Contents (22 chapters)
Free Chapter
1
Section 1: Backend Programming with Spring Boot
7
Section 2: Frontend Programming with React
12
Section 3: Full Stack Development

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
  1. Install the Material-UI component library by typing the following command in the project's root folder:
npm install @material-ui/core
  1. Run the app by typing the following command in the project's root folder:
npm start

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

yarn start
  1. Open the src folder with VS Code, remove any superfluous code, and use the Material-UI Appbar 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 React from 'react';
import './App.css';
import AppBar from '@material-ui/core/AppBar...