React Basics & Backend Integration (Spring Boot)

React Fundamentals for Spring Boot

Learning Outcome

5

Learn hooks basics

4

Understand JSX and rendering concepts

3

Identify key features of React

2

Learn SPA concept

1

Understand React fundamentals

6

Understand API integration flow with backend

What is React?

A JavaScript library for building user interfaces

A JavaScript library for building user interfaces

Developed and maintained by Facebook

Used for building Single Page Applications

Core Idea

UI is built using reusable component

History of React

Introduced by Facebook in 2013

Created to solve UI performance issues

Widely adopted in modern frontend development

Introduced Virtual DOM concept

Features of React​

Component-based architecture
Build UI using independent, reusable components

Component-based architecture
Build UI using independent, reusable components

Virtual DOM
Improves performance by updating only changed elements

Component-based architecture
Build UI using independent, reusable components

One-way data binding
Data flows in a single direction (easy debugging)

Reusability
Components can be reused across the application

Pros and Cons of React

Props

High Perpomance

Reusable components

Large community support

Easy integration with backend

Cons

Learning curve for beginners

Frequent updates

Requires additional libraries for full setup

What is JSX?

import React from "react";

function App() {
  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Hello React </h1>
      <p>Welcome to your first React App</p>
    </div>
  );
}

export default App;

Hello React !

Welcome to Jsx

Improves Readability

Easier UI creation

Combines Logic and UI

Why react ?

Conditional Rendering, Events, Props Conditional Rendering

Conditional Rendering
Show UI based on conditions

{isLoggedIn ? (
  <h2>Welcome Back!</h2>
) : (
  <h2>Please Login</h2>
)}

isLoggined = true

Welcome Back !

isLoggined = false

Welcome Back !

Please Login

Conditional Rendering, Events, Props Conditional Rendering

Events
Handle user actions (click, input)

Props
Pass data from parent to child component

<Child name="React" age={5} />
<button onClick={handleClick}>
  Click Me
</button>

Child Component

Name: React  
Age: 5

Click Me

Hooks: useState & useEffectuseState

Key Idea:
Hooks simplify state and lifecycle management.

useState

Manage State Component

const [count, setCount] = useState(0);

0

Increment

useEffect

Handles side effects (API calls, lifecycle)

useEffect(() => {
  // side effect (e.g., API call)
}, []);

Recap of Axios

Axios is:
A library to make API calls

Used for:
• Fetching data from backend (Spring Boot)
• Sending data (POST, PUT, DELETE)

Integration Flow

React

Axios

Spring Boot

Database

Summary

5

Axios is used to connect React with Spring Boot backend APIs

4

Hooks like useState and useEffect manage state and lifecycle

3

Props help in passing data between components

2

It follows component-based architecture for reusable UI

1

React is a JavaScript library used to build dynamic userinterfaces

Quiz

1.React is:

A. Framework

 B. Library for UI

 C. Database

 D. Language

Quiz-Answer

2.SPA means:

A. Multi page reload

 B. Single Page Application

C. Server processing app

D. Static page

Quiz-Answer

3.Which hook is used for state?

A. useEffect

 B. useState

 C. useRef

D. useMemo

React Basics & Backend Integration (Spring Boot)

By Content ITV

React Basics & Backend Integration (Spring Boot)

  • 51

More from Content ITV