32,36 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
A comprehensive guide to building full stack applications covering frontend and server-side programming, data management, and web security
Key Features
- Unleash the power of React Hooks to build interactive and complex user interfaces
- Build scalable full stack applications designed to meet demands of modern users
- Understand how the Axios library simplifies CRUD operations
Book Description
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.
What you will learn
- Create a RESTful web service with Spring Boot
- Grasp the fundamentals of dependency injection and how to use it for backend development
- Discover techniques for securing the backend using Spring Security
- Understand how to use React for frontend programming
- Benefit from the Heroku cloud server by deploying your application to it
- Delve into the techniques for creating unit tests using JUnit
- Explore the Material UI component library to make more user-friendly user interfaces
Who this book is for
If you are a Java developer familiar with Spring, but are new to building full stack applications, this is the book for you.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 230
Veröffentlichungsjahr: 2019
Ähnliche
Hands-On Full Stack Development with Spring Boot 2 and React Second Edition
Copyright © 2019 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editor: Richa TripathiAcquisition Editor:Shriram ShekharContent Development Editor:Divya VijayanTechnical Editor:Pradeep SahuCopy Editor: Safis EditingProject Coordinator:Prajakta NaikProofreader: Safis EditingIndexer:Pratik ShirodkarGraphics:Jisha ChirayilProduction Coordinator:Aparna Bhagat
First published: June 2018 Second edition: May 2019
Production reference: 1200519
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-83882-236-1
www.packtpub.com
Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
Packt.com
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.
Contributors
About the author
Juha Hinkula is a software development lecturer at Haaga-Helia University of Applied Sciences in Finland. He received an MSc degree in computer science from the University of Helsinki. He has over 15 years of industry experience in software development. Over the past few years, he has focused on modern full stack development. He is also a passionate mobile developer with Android-native technology, and nowadays also uses React Native.
About the reviewer
Krunal Patel has over 10 years of experience in enterprise application development using Java, Spring, Hibernate, and Liferay Portal. He has expertise in domains such as healthcare, insurance, and hospitality. He has executed many enterprise projects based on Liferay Portal that use Elasticsearch and LDAP integration. He was a co-author of Java 9 Dependency Injection, published by Packt Publishing, and also was a technical reviewer for books such as Mastering Apache Solr 7.x and Spring 5.0 Blueprints. He received an ITIL® Foundation Certificate in IT Service Management in 2015, a Liferay 6.1 Developer Certification in 2013, was Brainbench Java 6 certified in 2013, and received a MongoDB for Java Developers certification in 2013.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
Table of Contents
Title Page
Copyright and Credits
Hands-On Full Stack Development with Spring Boot 2 and React Second Edition
Dedication
About Packt
Why subscribe?
Packt.com
Contributors
About the author
About the reviewer
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
Section 1: Backend Programming with Spring Boot
Setting Up the Environment and Tools - Backend
Technical requirements
Setting up the environment and tools
Installing Eclipse
The basics of Eclipse and Maven
Creating a project with Spring Initializr
How to run the project
Spring Boot development tools
Logs and problem solving
Installing MariaDB
Summary
Questions
Further reading
Dependency Injection
Technical requirements
Introducing DI
DI in Spring Boot
Summary
Questions
Further reading
Using JPA to Create and Access a Database
Technical requirements
Basics of ORM, JPA, and Hibernate
Creating the entity classes
Creating CRUD repositories
Relationships between tables
Setting up the MariaDB database
Summary
Questions
Further reading
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
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
Section 2: Frontend Programming with React
Setting Up the Environment and Tools - Frontend
Technical requirements
Installing Node.js
Installing VS Code
VS Code extension
Creating and running a React app
Modifying a React app
Summary
Questions
Further reading
Getting Started with React
Technical requirements
Basic React components
Basics of ES6
Understanding constants
Arrow functions
Template literals
Classes and inheritance
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
Consuming the REST API with React
Technical requirements
Using promises
Using the fetch API
Using the axios library
Practical examples
Summary 
Questions
Further reading
Useful Third-Party Components for React
Technical requirements
Using third-party React components
React Table
Material-UI component library
Routing
Summary
Questions
Further reading
Section 3: Full Stack Development
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
Adding CRUD Functionalities
Technical requirements
Creating the list page
The delete functionality
The add functionality
The edit functionality
Other functionalities
Summary
Questions
Further reading
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
Testing Your Frontend
Technical requirements
Using Jest
Snapshot testing
Using Enzyme
Summary
Questions
Further reading
Securing Your Application
Technical requirements
Securing the backend
Securing the frontend
Summary
Questions
Further reading
Deploying Your Application
Technical requirements
Deploying the backend
Deploying the frontend
Using Docker containers
Summary
Questions
Further reading
Best Practices
What to learn next
HTML 
CSS
HTTP
JavaScript
A backend programming language
Some frontend libraries and frameworks
Databases
Version control
Useful tools
Security
Best practices
Coding conventions
Choosing the proper tools
Choosing the proper technologies
Minimizing the amount of coding
Summary
Questions
Further reading
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
Other Books You May Enjoy
Leave a review - let other readers know what you think
Preface
In this book, we will create a modern web application using Spring Boot 2.0 and React. We will start from the backend and develop a RESTful web service using Spring Boot and MariaDB. We will also secure the backend and create unit tests for it. The frontend will be developed using the React JavaScript library. Different third-party React components will be used to make the frontend more user friendly. Finally, the application will be deployed to Heroku. The book also demonstrates how to Dockerize our backend.
Who this book is for
This book is written for the following audiences:
Frontend developers who want to learn full stack development
Backend developers who want to learn full stack development
Full stack developers who have used some other technologies
Java developers who are familiar with Spring, but haven't ever built a full-stack application
What this book covers
Chapter 1, Setting Up the Environment and Tools – Backend, explains how to install the software needed for backend development and how to create your first Spring Boot application.
Chapter 2, Dependency Injection, introduces dependency injection and explains how to use it with Spring Boot.
Chapter 3, Using JPA to Create and Access a Database, introduces Java Persistence API (JPA)and explains how to create and access databases with Spring Boot.
Chapter 4, Creating a RESTful Web Service with Spring Boot, shows how to create RESTful web services using Spring Data REST.
Chapter 5, Securing and Testing Your Backend, explains how to secure your backend using Spring Security and JSON Web Token (JWT).
Chapter 6, Setting Up the Environment and Tools – Frontend, explains how to install the software needed for frontend development.
Chapter 7, Getting Started with React, introduces the basics of the React library.
Chapter 8, Consuming the REST API with React, shows how to use REST APIs with React using the fetch API.
Chapter 9, Useful Third-Party Components for React, demonstrates some handy components that we'll use in our frontend development.
Chapter 10, Setting Up the Frontend for Our Spring Boot RESTful Web Service, explains how to set up the React app and Spring Boot backend for frontend development.
Chapter 11, Adding CRUD Functionalities, shows how to implement CRUD functionalities with the React frontend.
Chapter 12, Styling the Frontend with React Material-UI, shows how to polish the user interface using the React Material-UI component library.
Chapter 13, Testing Your Frontend, explains the basics of React frontend testing.
Chapter 14, Securing Your Application, explains how to secure the frontend using JWT.
Chapter 15, Deploying Your Application, demonstrates how to deploy an application to Heroku and how to use Docker containers.
Chapter 16, Best Practices, explains the basic technologies that are needed to become a full stack developer, and covers some basic best practices for software development.
To get the most out of this book
The reader should possess the following:
Basic knowledge of using a terminal, such as PowerShell
Basic knowledge of Java and JavaScript programming
Basic knowledge of SQL databases
Basic knowledge of HTML and CSS
Download the example code files
You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
www.packt.com
.
Select the
SUPPORT
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR/7-Zip for Windows
Zipeg/iZip/UnRarX for Mac
7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Hands-On-Full-Stack-Development-with-Spring-Boot-2-and-React-Second-Edition. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/9781838822361_ColorImages.pdf.
Get in touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packt.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Reviews
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packt.com.
Section 1: Backend Programming with Spring Boot
The reader will be familiar with the basics of Spring Boot. This section focuses on the knowledge and skills required to use databases and create RESTful web services.
This section covers the following chapters:
Chapter 1
,
Setting Up the Environment and Tools – Backend
Chapter 2
,
Dependency Injection
Chapter 3
,
Using JPA to Create and Access a Database
Chapter 4
,
Creating a RESTful Web Service with Spring Boot
Chapter 5
,
Securing and Testing Your Backend
Setting Up the Environment and Tools - Backend
In this chapter, we will set up the environment and tools needed for backend programming with Spring Boot. Spring Boot is a modern Java-based backend framework that makes development faster than traditional Java-based frameworks. With Spring Boot, you can make a standalone web application that has an embedded application server.
In this chapter, we will look into the following topics:
Building an environment for Spring Boot development
The basics of the Eclipse IDE and Maven
Creating and running Spring Boot projects
Problem solving when running Spring Boot applications
Technical requirements
The Java SDK, version 8 or higher, is necessary to use the Eclipse IDE. In this book, we are using the Windows operating system, but all tools are available for Linux and macOS as well.
Download the code for this chapter from GitHub: https://github.com/PacktPublishing/Hands-On-Full-Stack-Development-with-Spring-Boot-2-and-React-Second-Edition/tree/master/Chapter01.
Setting up the environment and tools
There are a lot of different integrated development environment (IDE) tools that you can use to develop Spring Boot applications. In this book, we are using Eclipse, which is an open source IDE for multiple programming languages. We will create our first Spring Boot project by using the Spring Initializr project starter page. The project is then imported into Eclipse and executed. Reading the console log is a crucial skill when developing Spring Boot applications.
Installing Eclipse
Eclipse is an open source programming IDE developed by the Eclipse Foundation. An installation package can be downloaded from https://www.eclipse.org/downloads. Eclipse is available for Windows, Linux, and macOS. You should download the latest version of the Eclipse IDE for Java EE developers.
You can either download a ZIP package of Eclipse or an installer package that executes the installation wizard. If using the ZIP package, you just have to extract the package to your local disk and it will contain an executable Eclipse.exe file that you can run by double-clicking on the file.
The basics of Eclipse and Maven
Eclipse is an IDE for multiple programming languages, such as Java, C++, and Python. Eclipse contains different perspectives for your needs. A perspective is a set of views and editors in the Eclipse workbench. The following screenshot shows common perspectives for Java development:
On the left-hand side, we have Project Explorer, where we can see our project structure and resources. Project Explorer is also used to open files by double-clicking on them. The files will be opened in the editor, which is located in the middle of the workbench. The Console view can be found in the lower section of the workbench. The Console view is really important because it shows application logging messages.
You can get Spring Tool Suite (STS) for Eclipse if you want, but we are not going to use it in this book, because the plain Eclipse installation is enough for our purposes. STS is a set of plugins that makes Spring application development simpler (https://spring.io/tools).
Apache Maven is a software project management tool. The basis of Maven is the Project Object Model (POM). Maven makes the software development process simpler and it also unifies the development process. You can also use another project management tool, called Gradle, with Spring Boot, but in this book, we will focus on using Maven.
The POM is a pom.xml file that contains basic information about the project. There are also all the dependencies that Maven should download to be able to build the project.
Basic information about the project can be found at the beginning of the pom.xml file, which defines, for example, the version of the application, packaging format, and so on.
The minimum version of the pom.xml file should contain the project root, modelVersion, groupId, artifactId, and version.
Dependencies are defined in the dependencies section, as follows:
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.packt</groupId> <artifactId>cardatabase</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>cardatabase</name> <description>Demo project for Spring Boot</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.3.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies></project>
Maven is normally used from the command line. Eclipse contains embedded Maven, and that handles all the Maven operations we need. Therefore, we are not focusing on Maven command-line usage here. The most important thing is to understand the structure of the pom.xml file and how to add new dependencies to it.
Creating a project with Spring Initializr
We will create our backend project with Spring Initializr, which is a web-based tool that's used to create Spring Boot projects. Spring Initializr can be found at https://start.spring.io:
We will generate a Maven Project with Java and the latest Spring Boot version. In the Group field, we will define our group ID, which will also become a base package in our Java project. In the Artifact field, we will define the artifact ID, which will also be the name of our project in Eclipse.
In the Dependencies section, we will select the starters and dependencies that are needed in our project. Spring Boot provides starter packages that simplify your Maven configuration. Spring Boot starters are actually a set of dependencies that you can include in your project. You can either type the keyword of the dependency into the search field, or you can see all the available dependencies by clicking on the See all link. We will start our project by selecting two dependencies – Web and DevTools. You can type the dependencies into the search field or switch to the full version and see all the starter packages and dependencies available:
The DevTools dependency provides us with the Spring Boot development tools, which provide automatic restart functionality. It makes development much faster, because the application is automatically restarted when changes have been saved. The web starter pack is a base for full-stack development and provides embedded Tomcat.
Finally, you have to click on the Generate Project button, which generates the project starter ZIP package for us.
How to run the project
Perform the following steps to run a Maven project in the Eclipse IDE:
Extract the project ZIP package that we created in the previous topic and open Eclipse.
We are going to import our project into the Eclipse IDE. To start the import process, select the
File
|
Import
menu and the import wizard will be opened. The following screenshot shows the first page of the wizard:
In the first phase, you should select
Existing Maven Projects
from the list under the
Maven
folder, and then go to the next phase by pressing the
Next
button. The following screenshot shows the second step of the import wizard:
In this phase, select the extracted project folder by pressing the
Browse...
button. Then, Eclipse finds the
pom.xml
file from the root of your project folder and shows it inside the
Projects
section of the window.
Press the
Finish
button to finalize the import. If everything went correctly, you should see the
cardatabase
project in the Eclipse
Project Explorer
. It takes a while before the project is ready because all the dependencies will be loaded by Maven after importing. You can see the progress of the dependency download at the bottom-right corner of Eclipse. The following screenshot shows the Eclipse
P
roject Explorer
after a successful import:
The Project Explorer also shows the package structure of our project, and now, at the beginning, there is only one package called com.packt.cardatabase. Under that package, is our main application class, calledCardatabaseApplication.java.
Now, we don't have any functionality in our application, but we can run it and see whether everything has started successfully. To run the project, open the main class by double-clicking on it and then pressing the
Run
button in the Eclipse toolbar, or select the
Run
menu and press
Run as
|
Java Application
:
You can see the Console view open in Eclipse, and that contains important information about the execution of the project. This is the view where all log texts and error messages appear, so it is really important to check the content of the view when something goes wrong.
Now, if the project was executed correctly, you should see the Started CardatabaseApplication in... text at the end of the console. The following screenshot shows the content of the Eclipse console after our Spring Boot project has been started:
In the root of our project, there is the pom.xml file, which is the Maven configuration file for our project. If you look at the dependencies inside the file, you can see that there are now dependencies that we selected on the Spring Initializr page. There is also a test dependency included automatically without any selection. In the following chapters, we are going to add more functionality to our application, and then we will add more dependencies manually to the pom.xml file:
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies>
Let's look at the Spring Boot main class more carefully. At the beginning of the class, there is the @SpringBootApplication annotation. It is actually a combination of multiple annotations, such as the following:
Annotation
Description
@EnableAutoConfiguration
This enables Spring Boot automatic configuration. Spring Boot will automatically configure your project based on dependencies. For example, if you have the
spring-boot-starter-web
dependency, Spring Boot assumes that you are developing a web application and configures your application accordingly.
@ComponentScan
This enables the Spring Boot component scan to find all the components of your application.
@Configure
This defines the class that can be used as a source of bean definitions.
The following code shows the Spring Boot application's main class:
import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplicationpublic class CardatabaseApplication { public static void main(String[] args) { SpringApplication.run(CardatabaseApplication.class, args); }}
The execution of the application starts from the main method, as in standard Java applications.
