ReactJ

S
ReactJS Features
1.Component-Based Architecture: React breaks down the UI into reusable components,
each encapsulating its own logic and rendering, making the development and maintenance
of complex applications easier.

2.Virtual DOM: React uses a virtual representation of the actual DOM (Document Object
Model) to optimize updates and minimize direct manipulation of the browser’s DOM. This
results in faster rendering and improved performance.

3.Declarative Programming: React allows developers to describe how the UI should look
at any given time. When data changes, React efficiently updates and re-renders the
components.

4.Unidirectional Data Flow: React follows a one-way data flow, making it easier to track
data changes, which helps with debugging and ensures predictable behavior.

5.JSX Syntax: React uses a syntax extension called JSX (JavaScript XML) that allows
developers to write HTML-like code directly within JavaScript. This makes the code more
readable and easier to understand.
JSX
Java
const myElement = React.createElement('h1', {}, ‘Welcome to
script
JSX’);
const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
JS
X
const myElement = <h1>Welcome to JSX!</h1>;
const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
Components
Class
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}

Functio
n
function NewCar(props) {
return <h2>Hi, I am a Car with {props.brand}
!</h2>; }
State in React Components
Functio
Class import React, { Component } from "react"; import React, { useState } from "react"; n
class App extends React.Component {
const App = () => {
constructor() {
super();
const [count, setCount] = useState(0);
this.state = { count: 0, };
this.increase = this.increase.bind(this); const increase = () => {
} setCount(count + 1);
increase() { }
this.setState({ count: this.state.count + 1 });
} return (
render() {
<div style={{ margin: '50px' }}>
return (
<div style={{ margin: "50px" }}> <h1>Welcome to App</h1>
<h1>Welcome to App</h1> <h3>Counter App using Functional Component :
<h3>Counter App using Class Component : </h3> </h3>
<h2> {this.state.count}</h2> <h2>{count}</h2>
<button onClick={this.increase}> Add</button> <button onClick={increase}>Add</button>
</div> </div>
); )
}
}
}

export default App; export default App;

React Component Lifecycle
 Mounti
ng: Updation:
• constructor • getDerivedStateFromProps
• static getDerivedStateProps • setState() Function
• render() • shouldComponentUpdate()
• componentDidMount() • getSnapshotBeforeUpdate() Method
• componentDidUpdate()

Unmounting:
• componentWillUnmount()
React Hooks
React useState
The React useState Hook allows us to track state in a function component.
State generally refers to data or properties that need to be tracking in an application.

React Context
React Context is a way to manage state globally.
It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone.

React useRef
The useRef Hook allows you to persist values between renders.
It can be used to store a mutable value that does not cause a re-render when updated.
It can be used to access a DOM element directly.

React useEffect
The useEffect Hook allows you to perform side effects in your components.
Some examples of side effects are: fetching data, directly updating the DOM, and timers.
useEffect accepts two arguments. The second argument is optional.
useEffect(<function>, <dependency
React Hooks - useEffect
1. No dependency passed:
useEffect(() => { //Runs on every render });

2. An empty array:
useEffect(() => { //Runs only on the first render }, []);

3. Props or state values:

useEffect(() => { //Runs on the first render //And any time any dependency value changes }, [prop, state]);
React Hooks - useMemo
React useMemo Hook returns a memoized value.
Think of memoization as caching a value so that it does not need to be recalculated.

The useMemo Hook only runs when one of its dependencies update.
This can improve performance.
React Hooks - useCallback
The React useCallback Hook returns a memoized callback function.

Think of memoization as caching a value so that it does not need to be recalculated.

This allows us to isolate resource intensive functions so that they will not automatically run on every render.

The useCallback Hook only runs when one of its dependencies update.

This can improve performance.

The useMemo and useCallback Hooks are similar.

The main difference is that useMemo returns a memoized value and useCallback returns a memoized function.
ReactJS API
Calls
1. Fetch API
fetch("https://jsonplaceholder.typicode.com/users", { method:
'GET' })
.then((res) => res.json())
.then((json) => {
setData({
items: json,
DataisLoaded: true,
});
})
.catch(error => console.error(error));
1. Fetch API
fetch('https://myapi.com',
{ method: 'POST',
headers: { accept: 'application/json',
body: JSON.stringify({ message: 'Hello World!' })
}
})
2. Axios API
axios.get(

"https://jsonplaceholder.typicode.com/users",
{ method: 'GET' }
)
.then((res) => {
setData({
items: res.data,
DataisLoaded: true,
});
})
.catch(error => console.error(error));
2. Axios API
axios({
// Endpoint to send files
url: "http://localhost:8080/files",
method: "POST",
headers: {
// Add any auth token here
authorization: "your token comes
here",
},

// Attaching the form data

data: formData,
})
// Handle the response from backend here
.then((res) => {})

// Catch errors if any

.catch((err) => {});
}
Gen AI
Demos
react-meal-app-main

openai-react-project
Gen AI Demos -
RAG
• streamlit_project\chatbotv1
• rag-langchain-nodejs-demo
• rag-system
• rag-embedding-demo
Create ReactJS application with GenAI based Intelligent Assistant/Copilot as per below layout.
- Create 2 components – Container/Editor Component & AI Assistant Component.
- AI Assistant should able to assist on any query related to Editor Component.

handleSubmit = () => {
Const editor_content = useContext(‘editor_content’);
Const prompt = “Use ${editor_content} to answer the query ${query}”
//Open AI API call – axios/fetch
}