ZeroOne Orbit Corporation’s

Dev Journey With React

Md. Shahariar Islam Rafi
 অ য় ম
১ম 3
২য় ) 3
৩য় JSX – JavaScript + XML 4
৪ Class) 5
৫ম Props – Data Passing 5
৬ – Data 6
৭ম useState Hook 7
৮ম useEffect Hook 8
৯ম Conditional Rendering 9
১০ম Lists and Keys 10
১১তম Form Handling 10
১২তম React Router DOM 12
১৩তম Custom Hooks 13
১৪তম Context API 15
১৫তম useMemo 16
১৬তম Project 1 – Todo App 18
১৭তম Project 2 – Weather App 20
১৮তম Project 3 – Blog UI with Routing 21
১৯তম Deployment – Netlify & Vercel 23
২০তম ) 24

2|Page
 ১

declarative, effi
-

- :

 Declarative UI
 Component-Based Architecture
 Unidirectional Data Flow

২ )

:
3|Page
 1. npm create vite@latest my-react-app --template react

2. cd my-react-app

3. npm install

4. npm run dev

৩ : JSX – JavaScript + XML

 Java
 , {}

const element = <h1>Hello, World!</h1>;

<h1>Hello, World!</h1>

4|Page
 ৪ Class)

Functional Components:

-
Functional Components

Class Components:

React- Class Components

const Welcome = (props) => {

return <h1>Hello, {[Link]}</h1>;
};

class Welcome extends [Link] {

render() {
return <h1>Hello, {[Link]}</h1>;
}
}

৫ : Props – Data Passing

Props

5|Page
 :

1.
2.

// Parent Component
const Parent = () => {
return <Child name="John" />;
};
// Child Component
const Child = (props) => {
return <h1>Hello, {[Link]}</h1>;
};

name

৬ – Data

State
-

const Counter = () => {

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

return (
<div>

6|Page
 <h1>{count}</h1>
<button onClick={() => setCount(count +
1)}>Increment</button>
</div>
);
};
, useState count setCount

৭ : useState Hook

useState ?

React- useState

useState :

useState

:
import React, { useState } from 'react';

const Counter = () => {

const increment = () => {

};

return (
<div>

7|Page
 <h1>{count}</h1>
<button onClick={increment}>Increment</button>
</div>
);
};

export default Counter;

, useState(0) count setCount

৮ : useEffect Hook

useEffect ?

useEffect - -

useEffect -

useEffect :

useEffect -

import React, { useEffect, useState } from 'react';

const FetchData = () => {

const [data, setData] = useState(null);

useEffect(() => {

8|Page
 fetch('[Link]
.then(response => [Link]())
.then(data => setData(data));

return (
<div>
<h1>Fetched Data:</h1>
<pre>{[Link](data, null, 2)}</pre>
</div>
);
};

, useEffect
export default FetchData;

৯ : Conditional Rendering

React- Conditional Rendering -

const WelcomeMessage = ({ isLoggedIn }) => {

return (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log
in</h1>}
</div>
); };

9|Page
 , isLoggedIn

১০ L dK y

- map()
key

const TodoList = ({ todos }) => {

return (
<ul>
{[Link](todo => (
<li key={[Link]}>{[Link]}</li>
))}
</ul>
);
};

key

১১ : Form Handling

- ?

- onChange

10 | P a g e
 :

import React, { useState } from 'react';

const ContactForm = () => {

const [name, setName] = useState('');
const [email, setEmail] = useState('');

const handleSubmit = (e) => {

[Link]();
[Link]('Form submitted', { name, email });
};

return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input
type="text"
value={name}
onChange={(e) => setName([Link])}
/>
</label>
<label>
Email:
<input
type="email"
value={email}
onChange={(e) => setEmail([Link])}

11 | P a g e
 />
</label>
<button type="submit">Submit</button>
</form>
);
};
export default ContactForm;

, name email

১২ : React Router DOM

React Router DOM

import { BrowserRouter as Router, Route, Switch } from 'react-

router-dom';
const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;

const App = () => {

return (
<Router>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<Switch>
<Route exact path="/" component={Home} />

12 | P a g e
 <Route path="/about" component={About} />
</Switch>
</Router>
);
};
export default App;

, BrowserRouter, Route Switch

১৩ : Custom Hooks

Custom Hooks

useState, useEffect

import { useState, useEffect } from 'react';

const useWindowSize = () => {

const [size, setSize] = useState({
width: [Link],
height: [Link],
});

useEffect(() => {
const handleResize = () => {
setSize({

13 | P a g e
 width: [Link],
height: [Link],
});
};
[Link]('resize', handleResize);

return () => {
[Link]('resize', handleResize);
};
}, []);

return size;
};
const App = () => {
const { width, height } = useWindowSize();

return (
<div>
<h1>Window Size</h1>
<p>Width: {width}</p>
<p>Height: {height}</p>
</div>
);
};
export default App;

, useWindowSize

14 | P a g e
 ১৪ : Context API

React- Context API gl

1. :

import React, { createContext, useState } from 'react';

// Creating a Context
const ThemeContext = createContext();

const App = () => {

const [theme, setTheme] = useState('light');

return (
<[Link] value={{ theme, setTheme }}>
<div>
<h1>Theme: {theme}</h1>
<ChildComponent />
</div>
</[Link]>
);
};
const ChildComponent = () => {
return (

15 | P a g e
 <[Link]>
{({ theme, setTheme }) => (
<div>
<h2>Current Theme: {theme}</h2>
<button onClick={() => setTheme(theme === 'light' ?
'dark' : 'light')}>
Toggle Theme
</button>
</div>
)}
</[Link]>
);
};

export default App;

, ThemeContext theme ChildComponent-

১৫ useMemo

useRef ?

useRef -

useRef :
import React, { useRef } from 'react';

const FocusInput = () => {

const inputRef = useRef();

const handleFocus = () => {

16 | P a g e
 [Link]();
};

return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleFocus}>Focus the input</button>
</div>
);
};

export default FocusInput;

, useRef input

useMemo ?

useMemo

useMemo :

import React, { useState, useMemo } from 'react';

const ExpensiveComputation = ({ number }) => {

const computeFactorial = (n) => {
[Link]('Computing factorial...');
return n <= 1 ? 1 : n * computeFactorial(n - 1);
};
return <h1>Factorial of {number} is {factorial}</h1>;
};

17 | P a g e

const factorial = useMemo(() => computeFactorial(number),

[number]);
 const App = () => {
const [number, setNumber] = useState(1);

return (
<div>
<button onClick={() => setNumber(number + 1)}>Increase
Number</button>
<ExpensiveComputation number={number} />
</div>
export default App;
);
, useMemo
}; number factorial

১৬ : Project 1 – Todo App

useState, useEffect

import React, { useState } from 'react';

const TodoApp = () => {

const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');

const addTodo = () => {

setTodos([...todos, input]);

18 | P a g e
 setInput('');
};

return (
<div>
<h1>Todo List</h1>
<input
type="text"
value={input}
onChange={(e) => setInput([Link])}
/>
<button onClick={addTodo}>Add Todo</button>
<ul>
{[Link]((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
};

export default TodoApp;

useState

19 | P a g e
 ১৭ : Project 2 – Weather App

-
useState, useEffect -

import React, { useState, useEffect } from 'react';

const WeatherApp = () => {

const [weather, setWeather] = useState(null);
const [city, setCity] = useState('London');

useEffect(() => {

fetch(`[Link]
API_KEY`)
.then(response => [Link]())
.then(data => setWeather(data));
}, [city]);

return (
<div>
<h1>Weather in {city}</h1>
<input
type="text"
value={city}
onChange={(e) => setCity([Link])}
20 | P a g e
 />
{weather && (
<div>
<p>Temperature: {[Link]}° C</p>
<p>Weather: {[Link][0].description}</p>
</div>
)}
</div>
);
};

export default WeatherApp;

১৮ : Project 3 – Blog UI with Routing

Blog UI ?

Blog UI with Routi :

import React from 'react';

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => (

21 | P a g e
 <div>
<h1>Blog Home</h1>
<ul>
<li>
<Link to="/post/1">Post 1</Link>
</li>
<li>
<Link to="/post/2">Post 2</Link>
</li>
</ul>
</div>
);

const Post = ({ match }) => {

const { postId } = [Link];
return <h1>Blog Post {postId}</h1>;
};

const BlogApp = () => {

return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/post/:postId" component={Post} />
</Switch>
</Router>
);
};

export default BlogApp;

22 | P a g e
 , React Router (Home Post Link
Post

১৯ : Deployment – Netlify & Vercel

Netlify Vercel

1. :
o :
o npm run build
o build
2. :
o

o New site from Git

o

3. :
o

o New Project
o

23 | P a g e
 ২০ )

: -

o State:
o Props:

o : JavaScri

o : render()

: useEffect -

৫ ?

: -

24 | P a g e
৬ ?

: -
Virtual

৭ ?

:
useState [Link]

৮ ?

৯. React Life ?

componentDidMount(), componentDidUpdate(), componentWillUnmount()

useEffect

. useEffect ?

: useEffect -

: -

25 | P a g e
 . shouldComponentUpdate ?

: shouldComponentUpdate

false

. useMemo useCallback ?

 useMemo

 useCallback

৪ useHistory useLocation ?

 useHistory

 useLocation

৫ ?

৬ ?

26 | P a g e
 ৭. useEffect ?

: useEffect
useEffect
useEffect

৮. React- context ?

: Context API

৯ useReducer ?

: useReducer

useState

key ?

: key
key

. [Link] ?

: [Link]

27 | P a g e
 . componentDidMount ?

: componentDidMount

Suspense Lazy Loading ?

: Suspense Lazy Loading

[Link]()
Suspense fallback

৪. componentWillUnmount ?

: componentWillUnmount

৫. useLayoutEffect useEffect ?

 useEffect
 useLayoutEffect

useLayoutEffect(() => {
[Link]('Layout effect');
}, []);

28 | P a g e
 ৬ Fragment ?

: Fragment

৭ ?

:
:

 React -

 Angular

29 | P a g e