Building Full-Stack Apps with React and Spring

1h 23mIntermediate2019-06-03

Authors

Emmanuel Henri

Executive with 20+ years of experience in programming and design

Course details

Pairing a popular front-end framework with a full-featured back-end solution is a natural next step for developers who want to go “full stack”: building interfaces and the code that powers them. In this course, instructor Emmanuel Henri explains how to get a full-stack app up and running with React and Spring. He walks you through a complete sample project: a REST API with a form-based interface. Along the way, you can learn how to set up the project, define Spring models, create endpoints, and then build an interface from React components. Once you’ve completed the training, you can use the same techniques and technologies to build your own full-stack JavaScript and Spring applications.

Learning objectives
Reviewing the platforms
Initializing the project
Defining the first model class
Setting up the JPA repository
Building the endpoints for the HTTP class controller
Creating the front-end components
Styling components
Connecting component to the server
Adding server controllers

Skills covered

Spring Data JPASpring FrameworkSpringFull-Stack Web DevelopmentFront-End Web DevelopmentSoftware Development ToolsProjectWeb DevelopmentOpen SourceSoftware Development

Concepts

0. Introduction

01 - Create your own mighty full-stack app
02 - What you should know

1. Initial Setup

03 - Introduction to Spring
04 - Introduction to React
05 - Overview of the full-stack and MVC
06 - IDE for a Java JavaScript environment
07 - Introduction to Postman
08 - Initialize a project with Spring Boot
09 - Initialize the React client project

2. Spring Models

10 - Data options and JPA
11 - Define first model class
12 - JPA repository
13 - Define example data

3. HTTP with Spring

14 - Finalize base server
15 - POST endpoint
16 - GET endpoint
17 - GET ID endpoint
18 - PUT endpoint
19 - DELETE endpoint

4. Basic Frontend with React

20 - Create contact listing component
21 - Add materialize to the project
22 - Finalize list of contacts component
23 - Create and structure your components
24 - Connect the add contact form to server
25 - Add server controller for CORS
26 - Finalize server controller for CORS

Conclusion

27 - Next steps