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
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
Introduction
- Create your own mighty full-stack app
- What you should know
Initial Setup
- Introduction to Spring
- Introduction to React
- Overview of the full-stack and MVC
- IDE for a Java JavaScript environment
- Introduction to Postman
- Initialize a project with Spring Boot
- Initialize the React client project
Spring Models
- Data options and JPA
- Define first model class
- JPA repository
- Define example data
HTTP with Spring
- Finalize base server
- POST endpoint
- GET endpoint
- GET ID endpoint
- PUT endpoint
- DELETE endpoint
Basic Frontend with React
- Create contact listing component
- Add materialize to the project
- Finalize list of contacts component
- Create and structure your components
- Connect the add contact form to server
- Add server controller for CORS
- Finalize server controller for CORS
Conclusion
- Next steps