Book Image

Hands-On Full Stack Development with Spring Boot 2.0 and React

By : Juha Hinkula
Book Image

Hands-On Full Stack Development with Spring Boot 2.0 and React

By: Juha Hinkula

Overview of this book

Apart from knowing how to write frontend and backend code, a full-stack engineer has to tackle all the problems that are encountered in the application development life cycle, starting from a simple idea to UI design, the technical design, and all the way to implementing, testing, production, deployment, and monitoring. This book covers the full set of technologies that you need to know to become a full-stack web developer with Spring Boot for the backend and React for the frontend. This comprehensive guide demonstrates how to build a modern full-stack application in practice. This book will teach you how to build RESTful API endpoints and work with the data access Layer of Spring, using Hibernate as the ORM. As we move ahead, you will be introduced to the other components of Spring, such as Spring Security, which will teach you how to secure the backend. Then, we will move on to the frontend, where you will be introduced to React, a modern JavaScript library for building fast and reliable user interfaces, and its app development environment and components. You will also create a Docker container for your application. Finally, the book will lay out the best practices that underpin professional full-stack web development.
Table of Contents (24 chapters)
Title Page
Copyright and Credits
Dedication
Packt Upsell
Contributors
Preface
Index

Creating and running a React app


When we have Node.js and the code editor installed, we are ready to create our first React.js app. We are using Facebook's create-react-app (https://github.com/facebook/create-react-app) for that. Here are the steps to make your first app:

  1. Open PowerShell or the command-line tool and type the following command. The command installs the create-react-app starter, which we will use to develop React apps. Parameter -g in the command means that installation is done globally.

If you are using npm version 5.2 or higher, you can also use npx instead of npm:

npm install -g create-react-app
  1. After the installation is complete, we create our first app by typing the following command:
create-react-app myapp
  1. After the app has been created, move it into your app folder:
cd myapp
  1. Then we can run the app with the following command. The command runs the app in port 3000 and opens the app in a browser:
npm start
  1. Now your app is running and you should see the following page in a browser...