EIEIOTECHNOVATION
← Training programmes

EIEIO / PROGRAMMING & DEVELOPMENT

React and Spring Boot

Course outline

5 days
Discuss this programme →

Duration

React and Spring Boot

5 days

Overview

In today’s rapidly evolving software landscape, mastering modern web development frameworks and technologies is crucial for building scalable, efficient, and maintainable applications. This course, "Building Robust Applications with React and Spring Boot," is designed to provide a comprehensive understanding of two powerful technologies that are pivotal in full-stack development: React and Spring Boot.

React, developed and maintained by Facebook, is a front-end JavaScript library renowned for its efficiency in building dynamic and interactive user interfaces. Unlike traditional multi-page applications, React enables the creation of Single Page Applications (SPAs) that deliver a seamless user experience by loading a single HTML page and dynamically updating content as the user interacts with the app.

Spring Boot, part of the larger Spring Framework ecosystem, is an open-source Java-based framework that simplifies the development of robust and production-ready back-end services. By providing a suite of pre-configured templates and boilerplate code, Spring Boot accelerates the creation of microservices and RESTful APIs, reducing the complexity of application setup and configuration. It emphasizes convention over configuration, allowing developers to focus on building business logic rather than dealing with intricate infrastructure setup

Course objective

By the end of this course, you will have a solid grasp of how to integrate React and Spring Boot to create end-to-end full-stack applications. You will learn how to design, build, and deploy modern web applications that are both user-friendly and robust, preparing you for the demands of contemporary software development.

Target Audience

This course is ideal for aspiring full-stack developers, software engineers, and tech enthusiasts who want to expand their skills in modern web development. Whether you're looking to enhance your career prospects or develop your own projects, this course provides the knowledge and practical experience needed to excel.

Prerequisite

Knowledge in web development (HTML, CSS and Javascript) is required for this course. Knowledge in Java or any other Object Oriented Language is required for this course.

Methodology

This course employs a blended learning approach, combining theoretical understanding with practical, hands-on experience to ensure comprehensive knowledge and skill acquisition.

Day 1: Introduction to React

  • Introduction to React and Single Page Applications (SPAs)
  • What is Single Page Application
  • SPA vs SSR
  • What is React
  • React in comparison with other UI Library
  • Introduction to React based Framework
  • Setting up the development environment
  • Install Node.js and npm.
  • Create React website with Vite
  • Integrating modules inside React
  • Understanding JSX and React components
  • Functional vs Class component
  • Styling with JSX
  • Difference between JSX and HTML
  • List and key in React.js
  • State and props in React
  • Create a component with state using useState
  • Pass down data with props
  • Pass up data with propos
  • Basic event handling
  • Add event handling on buttons
  • Managing Form

Day 2: Advanced React Concepts

  • React hooks (useEffect, useContext)
  • useEffect
  • useContext
  • Understanding components lifecycle and dependent array
  • Routing with react-router-dom
  • BrowserRouter: Setting up the router context.
  • Routes and Route: Defining routes and components.
  • Link and NavLink: Creating navigational links.
  • Route parameters
  • Nested Route
  • Protected Route
  • State management with Context API
  • Create a context to manage global state.
  • Use useContext to access and update state in various components.
  • Passing data through useContext
  • Forms and input handling
  • Understanding controlled vs. uncontrolled components.
  • Handling form data with controlled components.
  • Create a form with multiple input fields.
  • Handle form submission and validation.
  • Using Refs for Uncontrolled Inputs
  • Introduction to form libraries like Formik and React Hook Form.

Day 3: Introduction to Spring Boot

  • Introduction to Spring Boot and RESTful services
  • Install Java, Maven, and IntelliJ IDE
  • Spring Initializr.
  • Setting up the Spring Boot environment
  • Understanding Spring Boot project structure
  • Creating REST controllers
  • REST controller with endpoints for basic operations
  • Basic CRUD operations with Spring Data JPA
  • Setup database (Postgresql) with Spring Data JPA
  • Entity
  • Repository
  • CRUD Operations with Spring Data JPA
  • Implementing GET, POST, PUT and DELETE in API
  • Testing API endpoint with Postman

Topics:

  • Service layer and Dependency Injection
  • Create a service layer for business logic.
  • Understand the concept of Dependency Injection.
  • Defining beans using @Component, @Service, and @Repository.
  • Using @Autowired and @Inject annotations for dependency injection.
  • Understanding different bean scopes (singleton, prototype, etc.).
  • Configuring and using bean scopes in Spring.
  • Exception handling
  • Understanding different types of exceptions (checked and unchecked).
  • Implement global exception handling using @ControllerAdvice.
  • Creating custom error response objects.
  • Using ResponseEntity to return HTTP status codes and error messages.
  • Spring Boot Security basics
  • Set up basic authentication.
  • How to create a security configuration class using @EnableWebSecurity
  • Understand security configurations.
  • Restricting access to endpoints based on roles and authorities.
  • Configuring custom error messages and redirections for failed logins.
  • Securing sensitive information and ensuring user data privacy.
  • Understanding the components in Spring Security (filters, security context, etc.).
  • Consuming external APIs
  • Overview of RestTemplate and its role in consuming RESTful services.
  • Adding dependencies and configuring RestTemplate in a Spring Boot application.
  • Creating and configuring a RestTemplate bean.
  • Introduction to Spring Boot testing
  • JUnit
  • Spring Boot test Framework

Day 5: Integrating React with Spring Boot

Goal: Integrate a React frontend with a Spring Boot backend and deploy a full-stack application.

Topics:

  • Spring Server Deployment
  • Deploy the Server to Cloud Provider (render)
  • Deploy database to cloud provider
  • API testing from POSTman
  • CORS and HTTP communication between frontend and backend
  • Connecting React to a Spring Boot API
  • Use fetch or axios in React to call Spring Boot APIs.
  • Display the data in React components.
  • Fetching and displaying data in React
  • Update the React "To-Do List" application to fetch tasks from the Spring Boot API.
  • Display tasks in the React component and handle CRUD operations.
  • Implement data synchronization between React state and the backend.
  • Deployment strategies for full-stack applications
  • Deploy the full-stack application to a cloud platform.

Programme scope, delivery arrangements and suitability are confirmed during enquiry.