DEV Community: RSM Academy BD

React ফান্ডামেন্টাল প্রশ্ন ও উত্তর

RSM Academy BD — Wed, 12 Feb 2025 05:03:45 +0000

React এর ফান্ডামেন্টাল বা মৌলিক প্রশ্ন সাধারণত React-এর মূল ধারণা, কাজের পদ্ধতি এবং গুরুত্বপূর্ণ কনসেপ্ট নিয়ে হয়। নিচে কিছু গুরুত্বপূর্ণ মৌলিক প্রশ্ন ও তাদের সংক্ষিপ্ত উত্তর দেওয়া হলো—

1. React কি?

উত্তর: React হলো একটি JavaScript লাইব্রেরি, যা UI (User Interface) তৈরি করতে ব্যবহৃত হয়। এটি Facebook দ্বারা ডেভেলপ করা হয়েছে এবং declarative, component-based ও efficient UI বিল্ড করতে সাহায্য করে।

2. React-এর মূল বৈশিষ্ট্য কী কী?

উত্তর:

Component-Based Architecture – UI কে ছোট ছোট পুনঃব্যবহারযোগ্য কম্পোনেন্টে ভাগ করা যায়।
Virtual DOM – React আসল DOM পরিবর্তনের পরিবর্তে Virtual DOM ব্যবহার করে পারফরম্যান্স বৃদ্ধি করে।
Unidirectional Data Flow – ডেটা একদিকে প্রবাহিত হয়, যা ডাটা ম্যানেজমেন্ট সহজ করে।
JSX (JavaScript XML) – HTML-এর মতো সিনট্যাক্স ব্যবহার করে UI তৈরি করা যায়।
State and Props – ডাটা ম্যানেজমেন্টের জন্য স্টেট এবং প্রপস ব্যবহার করা হয়।

3. JSX কী? এটি কেন ব্যবহার করা হয়?

উত্তর: JSX (JavaScript XML) হলো একটি JavaScript সিনট্যাক্স এক্সটেনশন, যা HTML-এর মতো দেখায় এবং JavaScript কোডের মধ্যে UI ডিফাইন করতে সাহায্য করে। এটি React.createElement() ফাংশনের চেয়ে সহজ এবং পড়তে সুবিধাজনক।

4. Component কত প্রকার ও কী কী?

উত্তর: React-এ প্রধানত দুই ধরনের কম্পোনেন্ট রয়েছে—

Functional Component – এটি একটি সাধারণ JavaScript ফাংশন, যা return স্টেটমেন্টের মাধ্যমে JSX রেন্ডার করে।
Class Component – এটি ES6 ক্লাস ব্যবহার করে তৈরি হয় এবং render() মেথডের মাধ্যমে JSX রেন্ডার করে।

5. Props কী?

উত্তর: Props (Properties) হলো Read-Only ডাটা, যা parent component থেকে child component-এ পাঠানো হয়। এটি immutable এবং কম্পোনেন্টকে dynamic ও পুনঃব্যবহারযোগ্য করে তোলে।

6. State কী?

উত্তর: State হলো Component-এর Local ডাটা স্টোরেজ, যা Component-এর ভিতরে পরিবর্তন করা যায়। এটি UI আপডেট করতে ব্যবহৃত হয়।

7. State এবং Props-এর মধ্যে পার্থক্য কী?

Props	State
External data (Parent থেকে Child-এ পাঠানো হয়)	Internal data (Component-এর মধ্যে ব্যবহৃত হয়)
Read-only (পরিবর্তন করা যায় না)	Mutable (পরিবর্তন করা যায়)
Functional এবং Class Component-এ ব্যবহার করা হয়	শুধুমাত্র Class Component-এ ব্যবহার করা হত, কিন্তু এখন useState Hook দিয়ে Functional Component-এও ব্যবহার করা যায়

8. Virtual DOM কী এবং এটি কীভাবে কাজ করে?

উত্তর: Virtual DOM হলো React-এর একটি পারফরম্যান্স অপটিমাইজেশন টেকনিক, যেখানে আসল DOM-এর পরিবর্তে একটি লাইটওয়েট ভার্চুয়াল কপি তৈরি করা হয়। যখন কোন পরিবর্তন হয়, তখন React প্রথমে নতুন ভার্চুয়াল DOM তৈরি করে, পুরানো ভার্চুয়াল DOM-এর সাথে তুলনা করে (diffing algorithm), এবং শুধুমাত্র পরিবর্তিত অংশকে আসল DOM-এ আপডেট করে।

9. React Hook কী?

উত্তর: React Hook হলো Functional Component-এ state এবং lifecycle মেথড ব্যবহারের জন্য React 16.8 তে যুক্ত করা একটি ফিচার।

প্রধান React Hook গুলো হলো:

useState – State পরিচালনার জন্য ব্যবহৃত হয়।
useEffect – Side-effect পরিচালনার জন্য ব্যবহৃত হয়।
useContext – Context API ব্যবহার করে ডাটা শেয়ার করার জন্য ব্যবহৃত হয়।

10. React Router কী?

উত্তর: React Router হলো একটি লাইব্রেরি, যা Single Page Application (SPA)-তে বিভিন্ন পৃষ্ঠার মধ্যে নেভিগেশন পরিচালনা করতে সাহায্য করে। এটি client-side routing করে।

11. React Lifecycle Method কী?

উত্তর: Lifecycle Method হলো Component-এর জীবনের বিভিন্ন ধাপ (Mounting, Updating, Unmounting) পরিচালনার জন্য ব্যবহৃত মেথড।

প্রধান Lifecycle মেথড গুলো হলো—

componentDidMount() – Component প্রথমবার লোড হলে চলে।
componentDidUpdate() – Component আপডেট হলে চলে।
componentWillUnmount() – Component মুছে গেলে চলে।

12. useEffect কী?

উত্তর: useEffect হলো একটি React Hook, যা Functional Component-এ Lifecycle Method (componentDidMount, componentDidUpdate, componentWillUnmount)-এর বিকল্প হিসেবে কাজ করে। এটি API কল, DOM manipulation, Event listener সংযুক্ত করা ইত্যাদির জন্য ব্যবহৃত হয়।

13. Redux কী এবং কেন ব্যবহার করা হয়?

উত্তর: Redux হলো একটি স্টেট ম্যানেজমেন্ট লাইব্রেরি, যা React অ্যাপে গ্লোবাল স্টেট ম্যানেজ করতে সাহায্য করে। এটি একক store ব্যবহার করে state সংরক্ষণ করে এবং predictable state changes নিশ্চিত করে।

14. React Performance অপটিমাইজ করার জন্য কী কী পদ্ধতি আছে?

উত্তর:

React.memo() ব্যবহার করা।
useCallback() এবং useMemo() Hook ব্যবহার করা।
Lazy Loading এবং Code Splitting করা।
Virtualization প্রযুক্তি ব্যবহার করা (React Window)।
State এবং Props সঠিকভাবে ব্যবস্থাপনা করা।

15. React Context API কী?

উত্তর: Context API হলো React-এর একটি বিল্ট-ইন ফিচার, যা props drilling ছাড়াই কম্পোনেন্টের মধ্যে ডাটা শেয়ার করতে সাহায্য করে। এটি useContext Hook-এর মাধ্যমে ব্যবহৃত হয়।

Redux Middleware সম্পর্কে বিস্তারিত আলোচনা

RSM Academy BD — Wed, 15 Jan 2025 09:53:01 +0000

Redux Middleware কী?

Redux Middleware হলো একটি ফাংশন বা লেয়ার যা Redux-এর dispatch এবং reducer-এর মধ্যে কাজ করে। এটি অ্যাকশনগুলোকে প্রক্রিয়াজাত করার আগে বা পরে নির্দিষ্ট কাজ করতে দেয়।

Middleware-এর মূল উদ্দেশ্য:

অ্যাসিঙ্ক্রোনাস ডেটা হ্যান্ডল করা (যেমন API কল)।
অ্যাকশনগুলোর উপর লগিং বা অন্যান্য প্রক্রিয়া সম্পন্ন করা।
Redux Store-এ সরাসরি পরিবর্তন আনার আগে প্রয়োজনীয় চেক বা ফিল্টারিং করা।

Middleware-এর কাজ করার ধরণ

Middleware তিনটি প্রধান স্টেপে কাজ করে:

Redux Store থেকে getState ফাংশনের মাধ্যমে বর্তমান স্টেট পাওয়া।
dispatch ফাংশনের মাধ্যমে অ্যাকশন পাস করা।
এগিয়ে যাওয়ার জন্য next() ফাংশন কল করা।

Middleware ব্যবহার করার সুবিধা

অ্যাসিঙ্ক্রোনাস অ্যাকশন হ্যান্ডলিং: API থেকে ডেটা ফেচ বা অন্য কোনো অ্যাসিঙ্ক্রোনাস কাজ সহজে করা যায়।
লগিং: Redux অ্যাকশন ও স্টেট পরিবর্তনের লগ রাখা।
কাস্টম প্রসেসিং: অ্যাকশন প্রসেস করার আগে বা পরে অতিরিক্ত কাজ যোগ করা।
ডিবাগিং: Redux স্টেটে সমস্যা হলে ডিবাগিং সহজ হয়।

Middleware তৈরির ফর্ম্যাট

Middleware একটি ফাংশন যা এই ফর্ম্যাটে লেখা হয়:

const exampleMiddleware = store => next => action => {
  console.log("Middleware Triggered:", action);
  next(action); // অ্যাকশনটি পরবর্তী middleware বা reducer-এ পাঠানো
};

Redux-এ Middleware যোগ করা

Middleware যোগ করার জন্য applyMiddleware ফাংশন ব্যবহার করা হয়।

উদাহরণ:

import { createStore, applyMiddleware } from 'redux';

// একটি সাধারণ middleware
const logger = store => next => action => {
  console.log('Dispatching:', action);
  let result = next(action); // অ্যাকশনটি রিডিউসারের কাছে পাঠানো
  console.log('Next State:', store.getState());
  return result;
};

// Reducer
const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: (state.count || 0) + 1 };
    default:
      return state;
  }
};

// Store তৈরি এবং middleware যোগ করা
const store = createStore(reducer, applyMiddleware(logger));

// অ্যাকশন পাঠানো
store.dispatch({ type: 'INCREMENT' });

Redux Middleware-এর জনপ্রিয় উদাহরণ

Redux Thunk
- অ্যাসিঙ্ক্রোনাস অ্যাকশন হ্যান্ডল করতে ব্যবহৃত হয়।
- ফাংশনকে অ্যাকশন হিসেবে ডিসপ্যাচ করার অনুমতি দেয়। ইনস্টলেশন:

   npm install redux-thunk

ব্যবহার:

   import thunk from 'redux-thunk';

   const fetchData = () => {
     return async dispatch => {
       const response = await fetch('https://api.example.com/data');
       const data = await response.json();
       dispatch({ type: 'FETCH_SUCCESS', payload: data });
     };
   };

   const store = createStore(reducer, applyMiddleware(thunk));
   store.dispatch(fetchData());

Redux Saga
- Redux অ্যাকশনগুলোর কার্যক্রম আরও সুন্দরভাবে পরিচালনা করতে ব্যবহৃত হয়।
- JavaScript Generator ব্যবহার করে অ্যাসিঙ্ক্রোনাস কার্যক্রম সম্পন্ন করে।

Middleware ব্যবহারের গুরুত্বপূর্ণ বিষয়

Middleware-এর ক্রম (order) গুরুত্বপূর্ণ। প্রথমে যে middleware যোগ করা হয় সেটি প্রথমে কাজ করবে।
next(action) কল না করলে অ্যাকশনটি স্টপ হয়ে যাবে এবং পরবর্তী middleware বা reducer-এ পৌঁছাবে না।

Describing the React UI

RSM Academy BD — Sat, 16 Nov 2024 04:52:53 +0000

React হচ্ছে একটি JavaScript লাইব্রেরি। যা ইউজার ইন্টারফেজ (UI) তৈরি করতে সাহায্য করে।
React-এর সবচেয়ে শক্তিশালী দিক হচ্ছে এর component-based architecture। প্রতিটি UI অংশকে ছোট, পুনঃব্যবহারযোগ্য components হিসেবে তৈরি করা যায়।

উদাহরণস্বরূপ:

Header Component: লেআউটের শীর্ষে দেখানো হয়।
Sidebar Component: পাশের মেনু বার হিসেবে থাকে।
Main Content Component: মূল বিষয়বস্তু দেখানোর জন্য।
Footer Component: পৃষ্ঠার নিচের অংশ।

React-এর componentগুলো hierarchical ভাবে সাজানো হয়। এর মানে, একটি parent component এর মধ্যে child components থাকে। উদাহরণ:

function App() {
  return (
    <div>
      <Header />
      <Sidebar />
      <MainContent />
      <Footer />
    </div>
  );
}

এখানে App component হল parent component, যার মধ্যে অন্যান্য components রয়েছে।

React UI ডিজাইনের মূল ভিত্তি হল কম্পোনেন্ট। প্রতিটি কম্পোনেন্ট একটি নির্দিষ্ট UI অংশ বা ফিচারকে প্রতিনিধিত্ব করে। যেমনঃ একটি বাটন, ফর্ম, বা কার্ড। ছোট ছোট কম্পোনেন্ট তৈরি করে সেগুলোকে একত্রিত করে বড় UI গঠন করা যায়।

React এর মধ্যে HTML এবং JavaScript একসাথে ব্যবহার করা হয় JSX এর মাধ্যমে। এটি HTML এর মতোই দেখতে হলেও, এর মধ্যে JavaScript কোড ব্যবহার করা যায়।

React First Component সম্পর্কে বিস্তারিত আলোচনা

React-এ First Component তৈরির মাধ্যমে আমরা React জগতে প্রথম পদক্ষেপ নিতে পারি। এই প্রাথমিক component তৈরি করা React শেখার ভিত্তি তৈরি করতে সহায়ক, কারণ এটি component-এর ভিত্তিমূলক ধারণা, data passing (props), এবং simple rendering সম্পর্কে ধারণা দেয়। এখানে React-এর একটি Basic Component কিভাবে তৈরি করতে হয় এবং কীভাবে এটি কাজ করে তার বিস্তারিত আলোচনা করছি।

1. Component কী?

React-এ component হল একটি জাভাস্ক্রিপ্ট ফাংশন (বা ক্লাস), যা UI-এর একটি নির্দিষ্ট অংশ তৈরি করে এবং রেন্ডার করে। Components এককভাবে কাজ করে এবং আলাদা আলাদা অংশগুলোকে ধরে রাখতে সাহায্য করে, যা কোড পুনঃব্যবহারযোগ্য করে তোলে।

2. React Functional Component তৈরি করা

React-এ component তৈরি করতে সাধারণত দুটি পদ্ধতি আছে: functional component এবং class component। তবে, বর্তমান সময়ে functional components-এর ব্যবহার বেশি জনপ্রিয় কারণ এগুলো হালকা এবং সহজ। এর সাথে, React Hooks ব্যবহার করে state এবং lifecycle events সহজে handle করা যায়।

উদাহরণ: First Functional Component

import React from 'react';

function FirstComponent() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is my first component.</p>
    </div>
  );
}

export default FirstComponent;

3. Component Rendering

React-এ components সাধারণত App.js-এ যুক্ত করা হয় এবং তারপর সেগুলি পুরো অ্যাপ্লিকেশন জুড়ে ব্যবহার করা যায়। নিচের কোডে দেখানো হয়েছে কিভাবে FirstComponent অ্যাপ্লিকেশনের মূল component (App.js) এ ব্যবহার করা হয়।

import React from 'react';
import FirstComponent from './FirstComponent';

function App() {
  return (
    <div>
      <FirstComponent />
    </div>
  );
}

export default App;

এখন FirstComponent রেন্ডার হয়ে একটি div সহ "Hello, React!" এবং "This is my first component." মেসেজ প্রদর্শন করবে।

4. JSX (JavaScript XML) ব্যবহার করে UI তৈরি

React-এ component তৈরির সময় আমরা JSX (JavaScript XML) ব্যবহার করি। JSX হল JavaScript-এর মধ্যে HTML লেখার একটি বিশেষ syntax। এটি React element তৈরি করার জন্য ব্যবহার হয় এবং এটি ব্যবহার করার ফলে component গুলি আরও পরিষ্কার ও পাঠযোগ্য হয়।

function FirstComponent() {
const greeting = "Welcome to JSX";
  return (
    <div>
      <h1>{greeting}</h1>
      <p>This is a simple JSX example.</p>
    </div>
  );
}

JSX এর মাধ্যমে <h1> এবং <p> ট্যাগ সরাসরি component-এর মধ্যে লেখা যায়।

5. Props (Properties) দিয়ে Data Passing

React-এ props ব্যবহার করে component-এর মধ্যে data পাঠানো যায়। Props এক ধরনের object, যা parent component থেকে child component-এ data pass করার জন্য ব্যবহৃত হয়।

উদাহরণ: Props ব্যবহার করে Data Passing

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

এখন, Greeting component-কে name প্রপস সহ ব্যবহার করা হলে এটি সেই name-এর মান প্রদর্শন করবে।

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

এখানে, Greeting component আলাদা আলাদা প্রপস দিয়ে ব্যবহার করা হয়েছে, যার ফলে প্রথমটিতে "Hello, Alice!" এবং দ্বিতীয়টিতে "Hello, Bob!" প্রদর্শিত হবে।

6. CSS Style সংযুক্ত করা

React component-এ CSS সংযুক্ত করার বিভিন্ন উপায় রয়েছে। Inline styling, CSS ক্লাস, বা CSS মডিউল ব্যবহার করা যায়।

উদাহরণ: Inline Style

function StyledComponent() {
  const style = {
    color: 'blue',
    fontSize: '20px',
  };

  return <h2 style={style}>This is a styled component</h2>;
}

এখানে, style object-এর মাধ্যমে CSS স্টাইল component-এ inlineভাবে সংযুক্ত করা হয়েছে।

7. Component Composition

React component গুলো nested বা কম্পোজিশন আকারে ব্যবহার করা যায়, অর্থাৎ এক component-এর মধ্যে অন্য component-কে nested structure আকারে ব্যবহার করা যায়।

উদাহরণ: Component Composition

function WelcomeMessage() {
  return <p>Welcome to the React World!</p>;
}

function FirstComponent() {
  return (
    <div>
      <h1>My First Component</h1>
      <WelcomeMessage />
    </div>
  );
}

এখানে FirstComponent-এর মধ্যে WelcomeMessage component-কে কম্পোজিশনের মাধ্যমে অন্তর্ভুক্ত করা হয়েছে।

উপসংহার

React-এর First Component তৈরি করা একটি মৌলিক কাজ এবং এতে বিভিন্ন ধারণা অন্তর্ভুক্ত থাকে যেমন JSX, props, এবং component composition। এই প্রাথমিক জ্ঞান ভিত্তি তৈরি করতে সাহায্য করে, যা পরবর্তীতে বড় React অ্যাপ্লিকেশন তৈরির ক্ষেত্রে কার্যকরী হয়।

Source:- https://react.dev/learn/your-first-component

Importing and Exporting Components সম্পর্কে বিস্তারিত আলোচনা

React-এ import এবং export মেকানিজমের মাধ্যমে বিভিন্ন component এক ফাইল থেকে আরেক ফাইলে ব্যবহার করা যায়। এটি একটি প্রোজেক্টকে মডিউলার এবং পুনঃব্যবহারযোগ্য রাখে। React-এ import এবং export ব্যবহারের কৌশল সম্পর্কে বিস্তারিত আলোচনা করা হল।

1. Exporting Components

React-এ component-গুলোকে export করার দুটি প্রধান পদ্ধতি আছে:

Named Export
Default Export

1. Exporting Components

React-এ component-গুলোকে export করার দুটি প্রধান পদ্ধতি আছে:

Named Export
Default Export

(i) Named Export

Named export ব্যবহার করলে একটি ফাইলে একাধিক component export করা যায়। এখানে export করার সময় component-এর নাম উল্লেখ করতে হয় এবং import করার সময়ও সেই নাম অনুসরণ করতে হয়।

// File: MyComponents.js
import React from 'react';

export function Header() {
  return <h1>This is the Header</h1>;
}

export function Footer() {
  return <p>This is the Footer</p>;
}

উপরের উদাহরণে Header এবং Footer নামে দুটি component named export করা হয়েছে। এগুলো import করার সময় {} এর মধ্যে component-এর নাম ব্যবহার করতে হবে।

// File: App.js
import React from 'react';
import { Header, Footer } from './MyComponents';

function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  );
}

export default App;

নোট: নেমড এক্সপোর্টের সময় ইম্পোর্ট করার সময় অবশ্যই এক্সপোর্ট করা নামগুলো ব্যবহার করতে হবে। অন্যথায় ত্রুটি দেখা দেবে।

(ii) Default Export

Default export ব্যবহার করলে এক ফাইল থেকে শুধুমাত্র একটি component default হিসেবে export করা যায়। import করার সময় component-এর নাম যেকোনো কিছু রাখা যায়।

// File: Header.js
import React from 'react';

export default function Header() {
  return <h1>This is the Header</h1>;
}

এখন Header component-কে অন্য কোনো ফাইলে import করলে import-এর সময় এটি যে কোনো নাম দিয়ে ডাকা যেতে পারে।

// File: App.js
import React from 'react';
import Header from './Header';

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

export default App;

এখানে Header component কে default হিসেবে export করা হয়েছে, তাই import করার সময় {} ব্যবহার করতে হয়নি।

নোট: ডিফল্ট এক্সপোর্টের সময় ফাইলের নামের সাথে ইম্পোর্ট করা নাম মিল না হলেও চলে। import CustomHeader from './Header'; এইভাবেও Header ফাইল থেকে কম্পোনেন্ট ইম্পোর্ট করা সম্ভব।

2. Importing Components

React-এ import করার সময় দুটি প্রধান নিয়ম পালন করা হয়:

Named export-import এর জন্য {} ব্যবহার করা হয়।
Default export-import এর জন্য {} ব্যবহার করা হয় না।

(i) Named Import

যখন একাধিক component একটি ফাইল থেকে import করতে হয়, তখন named import বেশ উপযোগী। এতে একাধিক component একই ফাইল থেকে import করা যায়।

// File: App.js
import React from 'react';
import { Header, Footer } from './MyComponents';

function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  );
}

export default App;

(ii) Default Import

Default import এর সময় {} এর প্রয়োজন হয় না, এবং component এর নাম নিজের মতো দেয়া যায়।

// File: App.js
import React from 'react';
import Header from './Header';

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

export default App;

3. Named এবং Default Export একসাথে ব্যবহার করা

একই ফাইলে default export এবং named export একসাথে ব্যবহার করা যায়। এটি কোনো component কে default হিসেবে export করে অন্য component-গুলোকে named export করে।

// File: MyComponents.js
import React from 'react';

export function Footer() {
  return <p>This is the Footer</p>;
}

function Header() {
  return <h1>This is the Header</h1>;
}

export default Header;

এখন এই ফাইল থেকে Header কে default import হিসেবে এবং Footer কে named import হিসেবে import করা যাবে।

// File: App.js
import React from 'react';
import Header, { Footer } from './MyComponents';

function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  );
}

export default App;

4. Alias ব্যবহার করে Import

Alias ব্যবহার করলে import করার সময় component-এর নাম পরিবর্তন করা যায়। এটি named import এর ক্ষেত্রে বেশি কার্যকরী।

// File: MyComponents.js
import React from 'react';

export function Header() {
  return <h1>This is the Header</h1>;
}

export function Footer() {
  return <p>This is the Footer</p>;
}

// File: App.js
import React from 'react';
import { Header as MainHeader, Footer as MainFooter } from './MyComponents';

function App() {
  return (
    <div>
      <MainHeader />
      <MainFooter />
    </div>
  );
}

export default App;

এখানে Header এবং Footer কে MainHeader এবং MainFooter নামে import করা হয়েছে।

যদি কোনো ফাইলে অনেক নেমড এক্সপোর্ট থাকে এবং সেগুলোর সবগুলোই দরকার হয়, তাহলে * as সিনট্যাক্স ব্যবহার করে ওয়াইল্ডকার্ড ইম্পোর্ট করা যায়।

5. প্রচলিত ভুল এবং সতর্কতা

যদি named export ব্যবহার করেন, তবে import করার সময় অবশ্যই {} ব্যবহার করতে হবে।
Default export-এর জন্য {} ব্যবহার করবেন না।
একটি ফাইলে একাধিক component থাকলে named export ব্যবহার করা সুবিধাজনক।
Import path ভুল হলে component সঠিকভাবে কাজ করবে না, তাই path নিশ্চিত করে নেয়া উচিত।

উপসংহার

React-এ import এবং export মেকানিজমের মাধ্যমে component গুলোকে মডিউলারভাবে ব্যবহার করা যায়। Named export এবং default export ব্যবহার করে একটি ফাইল থেকে একাধিক component export করা সম্ভব এবং এগুলো অন্য ফাইলে import করে কোডকে পরিষ্কার ও মডুলার রাখা যায়।

Source:- https://react.dev/learn/importing-and-exporting-components

Writing Markup with JSX সম্পর্কে বিস্তারিত আলোচনা

JSX (JavaScript XML) হল React-এর একটি বিশেষ syntax যা JavaScript কোডের মধ্যে HTML-like কোড লেখার সুযোগ দেয়। এটি React component তৈরিতে ব্যবহার হয় এবং UI গঠনকে সহজ এবং পরিষ্কার করে তোলে। এখানে JSX-এর বিভিন্ন বৈশিষ্ট্য, ব্যবহার এবং নিয়মাবলী নিয়ে বিস্তারিত আলোচনা করছি।

1. JSX কী?

JSX হল এক ধরনের syntax extension যা JavaScript-এ HTML লেখা সহজ করে। এটি দেখতে HTML এর মতো হলেও এটি আসলে JavaScript। React-এ JSX ব্যবহার করলে ব্রাউজার নিজে নিজে JavaScript-এ রূপান্তরিত করে এবং Virtual DOM এ render করে।

উদাহরণ:

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

এখানে <h1>Hello, World!</h1> JSX এর একটি উদাহরণ, যা element নামক একটি ভেরিয়েবলকে h1 HTML ট্যাগ সহ তৈরি করেছে।

JSX এর বৈশিষ্ট্য:

HTML ও জাভাস্ক্রিপ্ট একত্রে লিখতে পারে।
জাভাস্ক্রিপ্ট এক্সপ্রেশন { } এর মধ্যে ব্যবহার করা যায়।
সিম্পল টেমপ্লেট সিনট্যাক্স।

2. JSX ব্যবহার করার সুবিধা

Readable Syntax: JavaScript এর ভেতরে HTML এর মতো structure লেখা যায়, যা কোডকে আরও পাঠযোগ্য করে।
React Component Creation সহজ করে: এটি component তৈরিতে সহজতা আনে এবং UI গঠন প্রক্রিয়া আরও সংক্ষিপ্ত করে।
JavaScript Expressions ব্যবহার করা যায়: JSX এ JavaScript expressions {} এর মধ্যে ব্যবহার করা যায়, যা component গুলোকে dynamic করে।

3. JSX-এর Regular Syntax Rules

JSX লিখতে কিছু নির্দিষ্ট নিয়ম অনুসরণ করতে হয়, কারণ এটি HTML এর মতো হলেও আসলে JavaScript এর সাথে মিশ্রিত।

(i) Parent Element থাকা আবশ্যক

JSX এ একটি component এর মধ্যে একাধিক element থাকলে সেগুলোকে অবশ্যই একটি parent element-এর মধ্যে রাখা প্রয়োজন।

function MyComponent() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is JSX syntax.</p>
    </div>
  );
}

উপরের উদাহরণে <div> parent element হিসেবে ব্যবহার করা হয়েছে, যা h1 এবং p ট্যাগগুলোকে ধারণ করছে।

(ii) Self-Closing Tags

JSX-এ প্রতিটি HTML tag যা কোন content ধারণ করে না, সেগুলোকে self-closing করতে হবে, যেমন <img />, <input />, <br />।

function ImageComponent() {
  return <img src="image.jpg" alt="Example" />;
}

(iii) JavaScript Expressions ব্যবহার

JSX এ {} এর মধ্যে JavaScript expressions ব্যবহার করা যায়। উদাহরণস্বরূপ, আপনি কোন ভেরিয়েবল, অপারেশন, বা ফাংশনের আউটপুট JSX এ ব্যবহার করতে পারেন।

function Greeting() {
  const name = "Alice";
  return <h1>Hello, {name}!</h1>;
}

এখানে {name} এর মধ্যে JavaScript variable name ব্যবহার করা হয়েছে, যা output এ "Hello, Alice!" দেখাবে।

4. JSX এ Style এবং CSS ক্লাস যুক্ত করা

React-এ inline style ব্যবহার করতে গেলে CSS এর মতোই style attribute ব্যবহার করা হয়, কিন্তু এটি একটি object হিসেবে কাজ করে। CSS ক্লাস যুক্ত করতে className attribute ব্যবহার করতে হয়।

(i) Inline Style

function StyledComponent() {
  const headingStyle = {
    color: "blue",
    fontSize: "20px",
  };

  return <h1 style={headingStyle}>Styled Heading</h1>;
}

এখানে headingStyle একটি object হিসাবে style attribute এর মধ্যে প্রেরণ করা হয়েছে।

(ii) className ব্যবহার

function ClassComponent() {
  return <div className="my-class">This is a div with a class</div>;
}

এখানে className attribute ব্যবহার করে my-class CSS ক্লাস যুক্ত করা হয়েছে। HTML এ class attribute ব্যবহার করা হয়, কিন্তু JSX এ এটি className হিসেবে ব্যবহার করা হয়।

5. JavaScript Expressions এবং Statements

JSX এ শুধুমাত্র expressions {} এর মধ্যে ব্যবহার করা যায়, statements (যেমন loops, conditionals) সরাসরি ব্যবহার করা যায় না।

(i) Ternary Operator

function UserGreeting(props) {
  return <h1>{props.isLoggedIn ? "Welcome Back!" : "Please Sign In"}</h1>;
}

এখানে ternary operator ব্যবহার করে isLoggedIn এর মানের উপর নির্ভর করে greeting দেখানো হয়েছে।

(ii) Map ব্যবহার করে Loop করা

JSX এ map() ব্যবহার করে লিস্টের প্রতিটি element render করা যায়।

function ItemList() {
  const items = ["Item 1", "Item 2", "Item 3"];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

6. Fragments ব্যবহার

React এ multiple elements কে একত্রিত করতে Fragment (<> </>) ব্যবহার করা যায়, যাতে অতিরিক্ত HTML tag যুক্ত না হয়।

function FragmentComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}

এখানে <></> fragment হিসেবে ব্যবহৃত হয়েছে এবং এটি render করার সময় DOM-এ কোনও extra div যোগ হবে না।

7. JSX কোডকে JavaScript কোডে রূপান্তরিত করা

JSX কোড আসলে JavaScript এ compile হয়ে যায়। React-এর Babel compiler JSX কোডকে JavaScript কোডে রূপান্তরিত করে, যা Virtual DOM এ render হয়। যেমন,

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

এটি JavaScript এ রূপান্তরিত হলে এমন হয়:

const element = React.createElement("h1", null, "Hello, World!");

8. JSX এর সুবিধা এবং সীমাবদ্ধতা

সুবিধা:
- JavaScript এর সাথে HTML structure মিশিয়ে component তৈরি করা সহজ হয়।
- UI গঠন করার জন্য দ্রুত এবং পরিচ্ছন্ন কোড লিখতে সাহায্য করে।
- JavaScript এর সকল ক্ষমতা JSX এ পাওয়া যায়, তাই dynamic UI তৈরি করা সহজ।
সীমাবদ্ধতা:
- সরাসরি statements (যেমন loops, if-else) ব্যবহার করা যায় না।
- সব সময় parent element থাকা আবশ্যক, যদিও এটি ফ্র্যাগমেন্ট দিয়ে সমাধানযোগ্য।

💡

JSX এ HTML এর মতো সিনট্যাক্স ব্যবহার করা হয় যা জাভাস্ক্রিপ্টের ভেতরে লেখা হয়।
{ } চিহ্নের মধ্যে জাভাস্ক্রিপ্ট এক্সপ্রেশন ব্যবহার করা যায়।
className ব্যবহার করে CSS ক্লাস অ্যাসাইন করা হয়।
স্টাইল যোগ করতে style অ্যাট্রিবিউটের মান হিসেবে অবজেক্ট ব্যবহার করতে হয়।
ফ্র্যাগমেন্ট, লিস্ট এবং কন্ডিশনাল রেন্ডারিং JSX কে আরো পাওয়ারফুল এবং ফ্লেক্সিবল করে।

JSX আপনাকে HTML এর মতো সিনট্যাক্সে UI তৈরি করতে দেয়, যা ডেভেলপমেন্ট প্রক্রিয়াকে দ্রুত এবং সহজ করে তোলে।

উপসংহার

JSX ব্যবহার করে React-এ component তৈরি করা সহজ এবং কার্যকর। এটি HTML এবং JavaScript একত্রিত করে dynamic এবং পরিষ্কার UI তৈরির সুযোগ দেয়। JSX এর মাধ্যমে JavaScript expressions এবং HTML-like syntax ব্যবহার করা যায়, যা React component তৈরিকে সহজ ও দ্রুততর করে। JSX এর নির্দিষ্ট নিয়ম মেনে চললে React অ্যাপ্লিকেশন গঠন করতে আরও সুবিধা হয়।

Source:- https://react.dev/learn/writing-markup-with-jsx

JavaScript in JSX with Curly Braces সম্পর্কে বিস্তারিত আলোচনা

JSX-এ JavaScript expressions লিখতে curly braces {} ব্যবহার করা হয়। এটি React এর একটি শক্তিশালী বৈশিষ্ট্য যা component-এ dynamic content এবং JavaScript logic যুক্ত করতে সাহায্য করে। JSX with curly braces এর মাধ্যমে আমরা variables, functions, expressions, এবং অন্যান্য JavaScript operations সরাসরি JSX কোডে ব্যবহার করতে পারি। এখানে কিভাবে {} ব্যবহার করে JSX এ JavaScript কোড যুক্ত করা যায় তার বিস্তারিত আলোচনা করা হল।

1. Curly Braces `{}` এর ব্যবহার কীভাবে কাজ করে?

JSX-এ {} ব্যবহার করে JavaScript expressions সরাসরি HTML-like structure এর মধ্যে যোগ করা যায়। JavaScript এর ভেতরে {} এর মধ্যে রাখা যে কোনো expression রেন্ডার হয় এবং HTML DOM-এ প্রদর্শিত হয়।

উদাহরণ:

function Greeting() {
  const name = "Alice";
  return <h1>Hello, {name}!</h1>;
}

এখানে {name} এর ভেতরে name নামের একটি variable ব্যবহার করা হয়েছে, যার মান "Alice"। ফলে এটি রেন্ডার করলে "Hello, Alice!" প্রদর্শিত হবে।

2. JavaScript Expressions vs. Statements

JSX এ {} এর মধ্যে শুধুমাত্র JavaScript expressions ব্যবহার করা যায়, statements নয়।

Expressions: যেমন a + b, name, isLoggedIn ? "Welcome" : "Please Login"
Statements: যেমন if, for, while

উদাহরণ:

function Sum() {
  const a = 5;
  const b = 10;
  return <p>Sum: {a + b}</p>;
}

এখানে {a + b} একটি expression, যা সরাসরি {} এর মধ্যে ব্যবহার করা যায়। এটি রেন্ডার হলে "Sum: 15" দেখাবে।

3. Variables ও Object Properties ব্যবহার

JSX এ {} এর মধ্যে JavaScript variables, object properties, এবং array elements সহজে ব্যবহার করা যায়।

উদাহরণ:

function UserInfo() {
  const user = {
    name: "Alice",
    age: 25
  };

  return (
    <div>
      <h2>Name: {user.name}</h2>
      <p>Age: {user.age}</p>
    </div>
  );
}

এখানে user.name এবং user.age ব্যবহার করে user object-এর property গুলো JSX এ দেখানো হয়েছে।

4. Function Call ব্যবহার

JSX এ {} এর মধ্যে সরাসরি JavaScript ফাংশন কল করা যায়, যা বিভিন্ন কাজ করতে পারে, যেমন data format করা, বা calculation করা।

উদাহরণ:

function formatDate(date) {
  return date.toLocaleDateString();
}

function CurrentDate() {
  const today = new Date();
  return <p>Today's Date: {formatDate(today)}</p>;
}

এখানে formatDate(today) ফাংশন কল {} এর মধ্যে ব্যবহার করা হয়েছে, যা তার রিটার্নকৃত মানটি JSX এ দেখাবে।

5. Ternary Operator ব্যবহার করে Conditional Rendering

JSX এ if স্টেটমেন্ট ব্যবহার করা যায় না। তাই শর্তের উপর ভিত্তি করে content দেখাতে ternary operator (condition ? true_value : false_value) ব্যবহার করা হয়।

উদাহরণ:

function UserGreeting(props) {
  return <h1>{props.isLoggedIn ? "Welcome back!" : "Please sign up."}</h1>;
}

এখানে isLoggedIn এর মান true হলে "Welcome back!" দেখাবে, আর false হলে "Please sign up." দেখাবে।

6. Logical AND (&&) Operator দিয়ে Conditional Rendering

কিছু ক্ষেত্রে আমরা && অপারেটরও ব্যবহার করতে পারি। যদি শর্তটি true হয়, তবে এর পরের JSX কোডটি render হবে।

উদাহরণ:

function Notification(props) {
  return (
    <div>
      <h1>Notifications</h1>
      {props.hasNotifications && <p>You have new notifications!</p>}
    </div>
  );
}

এখানে, hasNotifications এর মান true হলে "You have new notifications!" বার্তাটি দেখাবে।

7. Array এর Elements Map করে Render করা

Array এর elements প্রদর্শন করতে map() মেথড ব্যবহার করা হয়, যা প্রতিটি element এর জন্য JSX কোড রেন্ডার করে।

উদাহরণ:

function ItemList() {
  const items = ["Apple", "Banana", "Cherry"];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

এখানে items array-এর প্রতিটি item {item} এর মধ্যে ব্যবহার করা হয়েছে এবং map() এর মাধ্যমে প্রতিটি item <li> ট্যাগে রেন্ডার হয়েছে।

8. Inline Styling `{}` এর মাধ্যমে CSS ব্যবহার

JSX এ inline style যুক্ত করতে {} ব্যবহার করা হয়, যেখানে স্টাইল গুলো object আকারে ব্যবহার করতে হয়।

উদাহরণ:

function StyledText() {
  const style = {
    color: "blue",
    fontSize: "20px"
  };

  return <p style={style}>This is styled text.</p>;
}

এখানে style object {} এর মধ্যে পাঠানো হয়েছে, যা inline styling এর জন্য ব্যবহার হচ্ছে।

9. Curly Braces এর মধ্যে JavaScript Expressions-এর সীমাবদ্ধতা

JSX এ {} এর মধ্যে শুধুমাত্র expressions ব্যবহার করা যায়, statements নয়। যেমন, loop এবং conditionals সরাসরি ব্যবহার করা যায় না।

সমাধান:

Loops বা conditionals handle করতে সাধারণত JavaScript এর function এর মধ্যে এই logic লিখে ফলাফলকে JSX এর মধ্যে {} ব্যবহার করে call করা হয়।

10. Curly Braces-এর মধ্যে Expressions এর উদাহরণ সমূহ

function Example() {
  const name = "Alice";
  const age = 25;
  const items = ["React", "JavaScript", "HTML"];

  return (
    <div>
      <h1>Hello, {name}</h1> {/* Variable */}
      <p>Age: {age}</p> {/* Variable */}
      <p>Double Age: {age * 2}</p> {/* Expression */}
      <p>Random Number: {Math.random()}</p> {/* Function Call */}
      <p>{age > 18 ? "Adult" : "Minor"}</p> {/* Ternary Operator */}
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li> {/* Array Mapping */}
        ))}
      </ul>
    </div>
  );
}

{ } এর মধ্যে যে কোনো জাভাস্ক্রিপ্ট এক্সপ্রেশন লেখা যায়।

{ } এর মধ্যে ভেরিয়েবল, ফাংশন কল, টেরনারি অপারেটর, অ্যারে মেথড ইত্যাদি ব্যবহার করা যায়।

অবজেক্টের প্রপার্টি এবং নেস্টেড অবজেক্ট { } এর মধ্যে অ্যাক্সেস করা যায়।

শর্ত সাপেক্ষে ভিজ্যুয়াল এলিমেন্ট হাইড বা শো করার জন্য && অপারেটর ব্যবহার করা যায়।

কার্লি ব্রেসেস ব্যবহার React কম্পোনেন্টের মধ্যে জাভাস্ক্রিপ্ট এক্সপ্রেশন ইনজেক্ট করে UI কে আরও ডায়নামিক ও ইন্টারেকটিভ করে তোলে।

এগুলো JSX এ { } ব্যবহারের গুরুত্বপূর্ণ দিক যা React এর মাধ্যমে ডায়নামিক UI তৈরি করতে সহায়ক।

উপসংহার

JSX এ curly braces {} ব্যবহার করে JavaScript expressions যুক্ত করার মাধ্যমে React component-কে dynamic এবং interactive করা যায়। {} এর মধ্যে variables, object properties, functions, ternary operators, এবং inline styles ব্যবহার করে complex UI গঠন সহজ হয়ে যায়। JSX এর মাধ্যমে সরাসরি JavaScript expressions ব্যবহারের সুবিধা আমাদের code structure সহজ ও দ্রুততর করে তোলে।

Source:- https://react.dev/learn/javascript-in-jsx-with-curly-braces

Passing Props to a Component সম্পর্কে বিস্তারিত আলোচনা

React এ component গুলোর মধ্যে data আদান-প্রদানের জন্য props ব্যবহার করা হয়। Props (properties) হল এক ধরনের JavaScript object, যা parent component থেকে child component-এ values পাস করার মাধ্যম হিসেবে কাজ করে। Props এর মাধ্যমে component গুলো আরো dynamic এবং reusable হয়, কারণ একই component কে বিভিন্ন values দিয়ে বিভিন্ন output তৈরি করা যায়।

এখানে React এ props এর ব্যবহার, কীভাবে props পাস এবং গ্রহণ করা যায়, এবং কীভাবে props এর মাধ্যমে data handle করতে হয় তার বিস্তারিত আলোচনা করা হল।

1. Props কী?

Props হল এক ধরনের object যা parent component থেকে child component-এ data পাস করার জন্য ব্যবহৃত হয়। Props ব্যবহার করে component গুলোকে আরও dynamic এবং flexible করা যায়, কারণ props values পরিবর্তন করলে component এর output পরিবর্তিত হয়।

উদাহরণ:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

এখানে Welcome নামক component-টি props নামক object ব্যবহার করে name নামের একটি value display করছে।

2. Props কীভাবে পাস করা হয়?

Props পাস করার জন্য parent component-এ child component-কে HTML attribute এর মতো করে value assign করা হয়।

উদাহরণ:

function App() {
  return <Welcome name="Alice" />;
}

এখানে Welcome component-এ name attribute হিসেবে "Alice" পাস করা হয়েছে। Welcome component-টি name value কে props হিসেবে গ্রহণ করবে।

3. Props কীভাবে গ্রহণ করা হয়?

Child component-এ function parameter হিসেবে props object গ্রহণ করতে হয়। এরপর props.propertyName এর মাধ্যমে নির্দিষ্ট value access করা যায়।

উদাহরণ:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

এখানে props object-এর name property {props.name} এর মাধ্যমে access করা হয়েছে এবং output এ "Hello, Alice!" দেখানো হবে।

4. Multiple Props পাস করা

একাধিক props attribute হিসেবে child component-এ পাস করা যায় এবং সেগুলো props object-এর ভেতরে আলাদা আলাদা property হিসেবে যুক্ত হয়।

উদাহরণ:

function User(props) {
  return (
    <div>
      <h1>Name: {props.name}</h1>
      <p>Age: {props.age}</p>
      <p>Location: {props.location}</p>
    </div>
  );
}

function App() {
  return <User name="Alice" age={25} location="New York" />;
}

এখানে User component-এ name, age, এবং location নামে তিনটি props পাস করা হয়েছে এবং প্রতিটি props-কে {props.propertyName} দিয়ে display করা হয়েছে।

5. Destructuring Props ব্যবহার করা

Props ব্যবহার আরও সহজ করতে destructuring ব্যবহার করা যায়, যাতে props.propertyName এর পরিবর্তে সরাসরি property নাম ব্যবহার করা যায়।

উদাহরণ:

function User({ name, age, location }) {
  return (
    <div>
      <h1>Name: {name}</h1>
      <p>Age: {age}</p>
      <p>Location: {location}</p>
    </div>
  );
}

function App() {
  return <User name="Alice" age={25} location="New York" />;
}

এখানে User component এ { name, age, location } এর মাধ্যমে destructuring করে props গুলো সরাসরি ব্যবহার করা হয়েছে।

6. Props এর মাধ্যমে Function পাস করা

Props এর মাধ্যমে শুধুমাত্র data নয়, function ও পাস করা যায়। এটি সাধারণত component গুলোর মধ্যে event handling এর জন্য ব্যবহার করা হয়।

উদাহরণ:

function Button(props) {
  return <button onClick={props.handleClick}>Click Me</button>;
}

function App() {
  const showMessage = () => {
    alert("Button Clicked!");
  };

  return <Button handleClick={showMessage} />;
}

এখানে Button component-এ handleClick নামে একটি function props হিসেবে পাস করা হয়েছে, যা button-টি ক্লিক করলে কাজ করবে।

7. Default Props সেট করা

কোনো props parent component থেকে পাস করা না হলে default props সেট করা যায়, যা React এ component কে একটি default value প্রদান করে।

উদাহরণ:

function Welcome({ name = "Guest" }) {
  return <h1>Hello, {name}!</h1>;
}

function App() {
  return <Welcome />;
}

এখানে name props পাস না করলে default মান "Guest" হিসেবে দেখাবে।

8. Props Read-Only বা Immutable

Props পরিবর্তন করা যায় না বা তারা immutable। Child component-এ props কে সরাসরি পরিবর্তন করা উচিত নয়, কারণ এটি component গুলোর মধ্যে unidirectional data flow নীতির পরিপন্থী।

উদাহরণ:

function User({ name }) {
  name = "Updated Name"; // এটি React-এর নিয়মবিরুদ্ধ
  return <h1>{name}</h1>;
}

উপরের উদাহরণে name পরিবর্তন করা উচিত নয়। props গুলো শুধু read-only, তাই এই ধরনের পরিবর্তন React এ অনুমোদিত নয়।

9. Conditional Rendering এর জন্য Props ব্যবহার করা

Props এর মানের উপর ভিত্তি করে component এ conditionally render করা যায়।

উদাহরণ:

function Greeting({ isLoggedIn }) {
  return <h1>{isLoggedIn ? "Welcome back!" : "Please sign in."}</h1>;
}

function App() {
  return <Greeting isLoggedIn={true} />;
}

এখানে isLoggedIn props এর মান true হলে "Welcome back!" এবং false হলে "Please sign in." দেখাবে।

10. Props এর মাধ্যমে Components Composition

একটি component এর মধ্যে অন্য component কে props হিসেবে পাস করা যায়, যা composition pattern তৈরি করে।

উদাহরণ:

function Profile(props) {
  return (
    <div>
      <h1>{props.user.name}</h1>
      <p>{props.user.bio}</p>
    </div>
  );
}

function App() {
  const user = {
    name: "Alice",
    bio: "Web Developer",
  };

  return <Profile user={user} />;
}

এখানে Profile component-এ একটি object user props হিসেবে পাস করা হয়েছে, যা name এবং bio প্রপার্টি ধরে রাখে।

11. Props.children ব্যবহার

Props এর একটি বিশেষ প্রপার্টি হল props.children, যা component-এর মধ্যে যেকোনো content dynamically insert করতে দেয়।

উদাহরণ:

function Card(props) {
  return <div className="card">{props.children}</div>;
}

function App() {
  return (
    <Card>
      <h1>Title</h1>
      <p>Description inside card.</p>
    </Card>
  );
}

এখানে Card component এর মধ্যে children হিসেবে h1 এবং p element দেয়া হয়েছে, যা props.children এর মাধ্যমে render হবে।

12. Props এর মাধ্যমে নেস্টেড ডেটা পাঠানো

Props এর মাধ্যমে নেস্টেড ডেটা পাঠানো যায় এবং চাইল্ড কম্পোনেন্টে এড্রেস করা যায়।

function App() {
  const user = {
    name: "Alice",
    age: 25,
    location: "New York"
  };

  return <UserCard user={user} />;
}

function UserCard({ user }) {
  return (
    <div>
      <h2>Name: {user.name}</h2>
      <p>Age: {user.age}</p>
      <p>Location: {user.location}</p>
    </div>
  );
}

এখানে user অবজেক্ট হিসেবে UserCard কম্পোনেন্টে পাঠানো হয়েছে। UserCard সেই অবজেক্টের প্রপার্টিগুলো অ্যাক্সেস করছে।

13. Props ভ্যালিডেশন (PropsTypes)

React কম্পোনেন্টে প্রপসের ধরন নির্ধারণ এবং যাচাই করার জন্য PropTypes ব্যবহার করা হয়। এটি কোডের স্থায়িত্ব বাড়ায় এবং বাগ প্রতিরোধে সহায়তা করে।

import PropTypes from 'prop-types';

function UserCard({ name, age }) {
  return (
    <div>
      <h2>Name: {name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

এখানে name প্রপস string হওয়া বাধ্যতামূলক, এবং age প্রপসটি number ধরনের হওয়া উচিত। PropTypes ব্যবহার করে আপনার কম্পোনেন্টগুলোর জন্য সঠিক প্রপসের ধরন নির্ধারণ করতে পারেন।

Props প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা বা ফাংশন পাঠানোর উপায়।

Props ইমিউটেবল, যার অর্থ এটি কম্পোনেন্টের ভেতরে পরিবর্তন করা যাবে না।

Props ডেস্ট্রাকচারিং কম্পোনেন্ট কোডকে আরো পরিষ্কার করতে সহায়ক।

Props.children ব্যবহার করে নেস্টেড কন্টেন্ট ইনজেক্ট করা যায়।

PropTypes ব্যবহার করে props এর ধরন যাচাই করা যায়।

এইসব ফিচার React এ props ব্যবহারের প্রক্রিয়াকে আরো শক্তিশালী ও নমনীয় করে তোলে, যা উন্নতমানের UI গঠনে সহায়ক।

উপসংহার

React-এ props ব্যবহার করে component গুলোর মধ্যে data আদান-প্রদান করা হয়, যা component গুলোকে dynamic, reusable এবং flexible করে। Props এর মাধ্যমে বিভিন্ন data, function, বা অন্যান্য component পাস করা যায় এবং সহজেই conditional rendering এবং composition pattern তৈরি করা যায়। Props হল React এর একমুখী data flow এর মূল ভিত্তি, যা component গুলোর মধ্যে predictable এবং structured data flow নিশ্চিত করে।

Source:- https://react.dev/learn/passing-props-to-a-component

Conditional Rendering সম্পর্কে বিস্তারিত আলোচনা

React এ Conditional Rendering হলো এমন একটি পদ্ধতি যার মাধ্যমে আমরা নির্দিষ্ট শর্ত সাপেক্ষে কম্পোনেন্ট বা উপাদান রেন্ডার করতে পারি। এটি JavaScript এর শর্তমূলক স্টেটমেন্টগুলির (যেমন if, else, ternary operator) মাধ্যমে পরিচালিত হয়, যা UI কে ডাইনামিক ও ইন্টারেকটিভ করে তোলে।

React কম্পোনেন্টে বিভিন্ন পদ্ধতিতে Conditional Rendering করা যায়, যার মধ্যে রয়েছে if statement, ternary operator, && operator, এবং switch case structure।

1. `if` statement দিয়ে Conditional Rendering

if statement ব্যবহারে, আমরা শর্ত পূরণ হলে একটি কম্পোনেন্ট বা অংশ রেন্ডার করতে পারি। এটি সাধারণত ফাংশনের মধ্যে ব্যবহার করা হয়।

function UserGreeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please log in.</h1>;
  }
}

function App() {
  return <UserGreeting isLoggedIn={true} />;
}

এখানে isLoggedIn প্রপসটি true হলে "Welcome back!" এবং false হলে "Please log in." রেন্ডার হবে।

2. `ternary` operator দিয়ে Conditional Rendering

JavaScript এর ternary operator (condition ? trueResult : falseResult) ব্যবহার করে আরো সংক্ষিপ্তভাবে Conditional Rendering করা যায়।

function UserGreeting({ isLoggedIn }) {
  return (
    <h1>{isLoggedIn ? "Welcome back!" : "Please log in."}</h1>
  );
}

এখানে isLoggedIn যদি true হয় তাহলে "Welcome back!" রেন্ডার হবে, অন্যথায় "Please log in." রেন্ডার হবে।

3. Logical AND (&&) Operator দিয়ে Conditional Rendering

&& (logical AND) অপারেটর ব্যবহার করে শুধুমাত্র একটি শর্ত পূরণ হলে একটি অংশ রেন্ডার করতে পারেন। এটি তখন কার্যকর হয়, যখন একটিমাত্র শর্ত পূরণ হলে কিছু রেন্ডার করতে হবে।

function UserGreeting({ isLoggedIn }) {
  return (
    <div>
      <h1>Welcome to our website!</h1>
      {isLoggedIn && <p>You are logged in.</p>}
    </div>
  );
}

এখানে isLoggedIn যদি true হয়, তাহলে p ট্যাগটি রেন্ডার হবে; অন্যথায় এটি স্কিপ করা হবে।

4. `switch` case দিয়ে Conditional Rendering

যখন একাধিক শর্ত রয়েছে, তখন switch case ব্যবহার করে কন্ডিশনাল রেন্ডারিং খুব কার্যকর হতে পারে।

function StatusMessage({ status }) {
  switch (status) {
    case "loading":
      return <p>Loading...</p>;
    case "success":
      return <p>Data loaded successfully!</p>;
    case "error":
      return <p>Error loading data.</p>;
    default:
      return null;
  }
}

function App() {
  return <StatusMessage status="success" />;
}

এখানে status এর মান অনুযায়ী বিভিন্ন বার্তা রেন্ডার হবে। status যদি "loading" হয় তাহলে "Loading..." রেন্ডার হবে, "success" হলে "Data loaded successfully!" এবং "error" হলে "Error loading data." রেন্ডার হবে।

5. Inline Conditional Rendering (Immediate return)

কম্পোনেন্টের ভেতরে কন্ডিশনাল রেন্ডারিং ইমিডিয়েট রিটার্ন দিয়ে করা যায়।

function UserGreeting({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome back!</h1> : null;
}

এখানে isLoggedIn true হলে "Welcome back!" রেন্ডার হবে, আর false হলে কিছুই রেন্ডার হবে না।

6. নেস্টেড কন্ডিশনাল রেন্ডারিং

কন্ডিশনাল রেন্ডারিং নেস্টেডও হতে পারে, তবে এটি ব্যবহারে সতর্ক থাকতে হয় কারণ খুব বেশি নেস্টেড কন্ডিশনাল জটিল এবং পড়তে কঠিন হতে পারে।

function StatusMessage({ isLoggedIn, isAdmin }) {
  if (isLoggedIn) {
    return (
      <div>
        <h1>Welcome back!</h1>
        {isAdmin ? <p>You have admin privileges.</p> : <p>You are a regular user.</p>}
      </div>
    );
  } else {
    return <h1>Please log in.</h1>;
  }
}

এখানে isLoggedIn এবং isAdmin উভয় শর্ত পূরণ করলে ব্যবহারকারীকে বিভিন্ন বার্তা দেখানো হবে।

7. কন্ডিশনাল ক্লাস নাম প্রয়োগ

React এ কন্ডিশনাল ক্লাস নাম প্রয়োগ করে নির্দিষ্ট শর্তের ওপর ভিত্তি করে CSS প্রয়োগ করা যায়।

function Notification({ type, message }) {
  return (
    <div className={`notification ${type === "error" ? "error" : "success"}`}>
      {message}
    </div>
  );
}

এখানে type যদি "error" হয়, তাহলে error ক্লাস প্রয়োগ হবে; অন্যথায় success ক্লাস প্রয়োগ হবে।

8. কন্ডিশনাল স্টাইল প্রয়োগ

ক্লাসের পরিবর্তে ইনলাইন স্টাইলও কন্ডিশনাল হিসেবে প্রয়োগ করা যায়।

function AlertBox({ isVisible }) {
  const boxStyle = {
    display: isVisible ? "block" : "none",
    padding: "10px",
    backgroundColor: "yellow",
  };

  return <div style={boxStyle}>This is an alert box!</div>;
}

এখানে isVisible যদি true হয়, তাহলে display: block হবে, আর false হলে display: none হবে।

9. Higher-Order Component (HOC) দিয়ে কন্ডিশনাল রেন্ডারিং

HOC দিয়ে কন্ডিশনাল রেন্ডারিং করতে পারেন। এটি প্রায়শই এমন ক্ষেত্রে ব্যবহার হয়, যখন একটি কম্পোনেন্ট বিশেষ শর্ত অনুযায়ী রেন্ডার হতে হবে।

function withAdminPrivileges(Component) {
  return function AdminComponent({ isAdmin, ...props }) {
    if (!isAdmin) return <p>You do not have access.</p>;
    return <Component {...props} />;
  };
}

const AdminPanel = withAdminPrivileges(function Panel() {
  return <div>Welcome to Admin Panel</div>;
});

function App() {
  return <AdminPanel isAdmin={true} />;
}

এখানে isAdmin যদি true না হয়, তাহলে "You do not have access." রেন্ডার হবে; অন্যথায় AdminPanel রেন্ডার হবে।

10. IIFE (Immediately Invoked Function Expressions) ব্যবহার করে Conditional Rendering

কখনও কখনও complex calculations বা conditions handle করতে inline function ব্যবহার করে render করা যেতে পারে। এটি JSX এর মধ্যে JavaScript logic ব্যবহার করতে সাহায্য করে।

উদাহরণ:

function Greeting(props) {
  return (
    <div>
      <h1>Greeting</h1>
      {(() => {
        if (props.time < 12) return <p>Good morning!</p>;
        if (props.time < 18) return <p>Good afternoon!</p>;
        return <p>Good evening!</p>;
      })()}
    </div>
  );
}

function App() {
  return <Greeting time={10} />;
}

এখানে time এর মানের উপর ভিত্তি করে Good morning!, Good afternoon!, বা Good evening! বার্তা দেখাবে।

সংক্ষেপে:

if-else statement : একাধিক শর্তের জন্য সাধারণত ব্যবহৃত।
ternary operator : সাধারণত সহজ এবং ইনলাইন শর্তের জন্য ব্যবহৃত।
&& operator : একক শর্তে কন্ডিশনাল রেন্ডারিং এর জন্য খুবই সহায়ক।
switch-case : একাধিক নির্দিষ্ট কেস রেন্ডারিং এর জন্য।
কন্ডিশনাল স্টাইলিং এবং ক্লাস প্রয়োগ : ডাইনামিক সিএসএস প্রয়োগে সহায়ক।
Higher-Order Component (HOC) : নির্দিষ্ট শর্ত অনুযায়ী কম্পোনেন্টের রেন্ডারিং সীমাবদ্ধ করতে ব্যবহৃত।

React এর Conditional Rendering কৌশলগুলো আমাদেরকে ডাইনামিক UI এবং উন্নতমানের ইউজার এক্সপেরিয়েন্স তৈরিতে সহায়ক হয়।

Source:- https://react.dev/learn/conditional-rendering

Rendering Lists সম্পর্কে বিস্তারিত আলোচনা

React এ Lists বা তালিকা render করার জন্য Array এর প্রতিটি element কে component হিসেবে তৈরি করে DOM এ render করা হয়। কোনো data set-এ একাধিক item থাকলে এবং সেগুলিকে একসঙ্গে display করতে চাইলে lists rendering এর প্রয়োজন হয়। React এ lists render করতে map() ফাংশন সবচেয়ে বেশি ব্যবহৃত হয়, যা array এর প্রতিটি element কে iterate করে নতুন component render করতে সাহায্য করে।

React এ lists rendering নিয়ে বিস্তারিত আলোচনা করা হলো।

1. সাধারণ লিস্ট রেন্ডার করা

React এ একটি অ্যারের প্রতিটি আইটেম .map() মেথড ব্যবহার করে রেন্ডার করা হয়।

function ListComponent() {
  const items = ["Apple", "Banana", "Cherry"];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

এখানে items অ্যারেটি .map() ব্যবহার করে প্রতিটি আইটেম <li> ট্যাগে রেন্ডার করা হচ্ছে। key প্রপস এখানে প্রতিটি <li> উপাদানের জন্য প্রয়োজনীয় একটি ইউনিক আইডেন্টিফায়ার, যা React কে প্রতিটি আইটেম সঠিকভাবে ট্র্যাক করতে সাহায্য করে।

2. `key` প্রপস এর গুরুত্ব

React এ প্রতিটি তালিকা আইটেমে একটি key প্রপস প্রয়োজন। এটি React কে নির্দিষ্ট করে দেয় কোন উপাদানটি পরিবর্তিত, যোগ বা মুছে ফেলা হয়েছে। এর মাধ্যমে রেন্ডারিং পারফরম্যান্স উন্নত হয় এবং React কে কম্পোনেন্ট আপডেট করতে সহায়ক হয়। key সাধারণত একটি ইউনিক আইডি বা তালিকার প্রতিটি আইটেমের জন্য একটি নির্দিষ্ট মান হওয়া উচিত।

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

এখানে প্রতিটি user অবজেক্টে id প্রপস রয়েছে, যা প্রতিটি তালিকা আইটেমের key হিসেবে ব্যবহার করা হয়েছে। এটি React কে প্রতিটি আইটেম নির্দিষ্টভাবে চিহ্নিত করতে সাহায্য করে।

3. কম্পোনেন্ট ব্যবহার করে লিস্ট রেন্ডার করা

React এ বড় লিস্টের জন্য একটি পৃথক কম্পোনেন্ট তৈরি করে তালিকা আইটেমগুলো রেন্ডার করা ভালো প্র্যাকটিস।

function User({ name }) {
  return <li>{name}</li>;
}

function UserList() {
  const users = ["Alice", "Bob", "Charlie"];

  return (
    <ul>
      {users.map((user, index) => (
        <User key={index} name={user} />
      ))}
    </ul>
  );
}

এখানে প্রতিটি তালিকা আইটেম রেন্ডার করার জন্য User নামে একটি পৃথক কম্পোনেন্ট তৈরি করা হয়েছে, যা তালিকা পরিচালনা ও রেন্ডারিং আরো পরিষ্কার এবং পুনঃব্যবহারযোগ্য করে তোলে।

4. নেস্টেড লিস্ট রেন্ডার করা

যখন তালিকার প্রতিটি আইটেম আবার একটি সাব-লিস্ট ধারণ করে, তখন নেস্টেড লিস্ট ব্যবহার করা হয়। প্রতিটি স্তরের জন্য .map() ফাংশন প্রয়োগ করা হয়।

const items = [
  { id: 1, name: "Fruits", subItems: ["Apple", "Banana", "Cherry"] },
  { id: 2, name: "Vegetables", subItems: ["Carrot", "Peas", "Spinach"] }
];

function NestedList() {
  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>
          <h3>{item.name}</h3>
          <ul>
            {item.subItems.map((subItem, index) => (
              <li key={index}>{subItem}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

এখানে প্রতিটি item এ একটি subItems অ্যারে রয়েছে, যা আবার আলাদা করে .map() দিয়ে রেন্ডার করা হয়েছে।

5. অবজেক্ট লিস্ট রেন্ডার করা

যখন লিস্টের প্রতিটি আইটেম একটি অবজেক্ট, তখন অবজেক্টের প্রপার্টিগুলি স্পেসিফিক্যালি রেন্ডার করা যায়।

const products = [
  { id: 1, name: "Laptop", price: 1000 },
  { id: 2, name: "Phone", price: 500 },
  { id: 3, name: "Tablet", price: 300 }
];

function ProductList() {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name} - ${product.price}
        </li>
      ))}
    </ul>
  );
}

এখানে প্রতিটি product অবজেক্ট থেকে name এবং price প্রপার্টিগুলি রেন্ডার করা হয়েছে।

6. `Fragment` ব্যবহার করে লিস্ট রেন্ডার করা

React এ একাধিক আইটেম রেন্ডার করার জন্য Fragment ব্যবহার করা যায়, যাতে অতিরিক্ত DOM নোড তৈরি হয় না। Fragment ব্যবহার করা তালিকার রেন্ডারিংকে সহজ এবং পারফরম্যান্স উন্নত করে।

function ProductList() {
  const products = [
    { id: 1, name: "Laptop" },
    { id: 2, name: "Phone" }
  ];

  return (
    <>
      {products.map((product) => (
        <div key={product.id}>{product.name}</div>
      ))}
    </>
  );
}

এখানে <>...</> একটি Fragment হিসাবে কাজ করে, যাতে DOM এ অপ্রয়োজনীয় নোড না তৈরি হয়।

7. কন্ডিশনাল লিস্ট রেন্ডার করা

.filter() মেথড ব্যবহার করে নির্দিষ্ট শর্ত পূরণকারী আইটেমগুলো রেন্ডার করা যায়।

const products = [
  { id: 1, name: "Laptop", inStock: true },
  { id: 2, name: "Phone", inStock: false },
  { id: 3, name: "Tablet", inStock: true }
];

function AvailableProductList() {
  return (
    <ul>
      {products
        .filter((product) => product.inStock)
        .map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
    </ul>
  );
}

এখানে inStock: true প্রোডাক্টগুলো ফিল্টার করে কেবল সেগুলোকেই রেন্ডার করা হয়েছে।

8. `reduce()` মেথড ব্যবহার করে কাস্টম লিস্ট রেন্ডারিং

যখন তালিকা থেকে একটি ভিন্ন ধরনের আউটপুট তৈরি করতে হয়, তখন .reduce() মেথড ব্যবহার করা যেতে পারে।

const numbers = [1, 2, 3, 4, 5];

function SumList() {
  const sum = numbers.reduce((total, num) => total + num, 0);

  return <p>Sum of numbers: {sum}</p>;
}

এখানে numbers এর মোট যোগফল sum নামে গণনা করে রেন্ডার করা হয়েছে।

9. Pagination ব্যবহার করে লিস্ট রেন্ডার করা

লম্বা তালিকা রেন্ডার করার সময় Pagination ব্যবহার করা কার্যকর, যাতে নির্দিষ্ট সংখ্যক আইটেম প্রতি পৃষ্ঠায় দেখানো যায়।

function PaginatedList({ itemsPerPage }) {
  const items = Array.from({ length: 100 }, (_, index) => `Item ${index + 1}`);
  const [currentPage, setCurrentPage] = React.useState(1);

  const startIndex = (currentPage - 1) * itemsPerPage;
  const paginatedItems = items.slice(startIndex, startIndex + itemsPerPage);

  return (
    <div>
      <ul>
        {paginatedItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={() => setCurrentPage((page) => Math.max(page - 1, 1))}>Previous</button>
      <button onClick={() => setCurrentPage((page) => page + 1)}>Next</button>
    </div>
  );
}

এখানে ১০০টি আইটেমের একটি লিস্ট পেজিনেটেড ভাবে প্রতি পৃষ্ঠায় নির্দিষ্ট সংখ্যক আইটেম রেন্ডার করা হচ্ছে।

সংক্ষেপে:

React এ Rendering Lists হল একটি ফ্লেক্সিবল এবং ইফেক্টিভ পদ্ধতি, যা UI কে ডাইনামিক এবং ইন্টারেকটিভ করতে সহায়ক। বিভিন্ন কৌশল অনুযায়ী, .map(), .filter(), .reduce() ইত্যাদি মেথড ব্যবহার করে সহজে লিস্ট রেন্ডার করা যায়।

Source:- https://react.dev/learn/rendering-lists

Keeping Components Pure সম্পর্কে বিস্তারিত আলোচনা

Pure Component ধারণাটি React-এ গুরুত্বপূর্ণ একটি কনসেপ্ট, যা component-গুলিকে নির্দিষ্ট নিয়ম মেনে তৈরি করতে সাহায্য করে, এবং এটি component গুলিকে সহজে বুঝতে, debug করতে, এবং maintain করতে সহজ করে তোলে। Pure Component বলতে এমন component বোঝায়, যা নির্দিষ্ট input বা props পেলে একই output প্রদান করে এবং render প্রক্রিয়ায় কোনরকম side effects (যেমন: network requests, DOM manipulation ইত্যাদি) তৈরি করে না।

React-এ Keeping Components Pure এর মানে হলো component গুলোকে pure রাখা, যাতে তারা নির্দিষ্ট props এর উপর নির্ভর করে এবং অন্য কোনো বাইরের পরিবর্তন (state বা props ছাড়া) এর সাথে জড়িত না থাকে। আসুন, React-এ pure components সম্পর্কে বিস্তারিত আলোচনা করি।

1. Pure Component এর বৈশিষ্ট্য

Determinate Output: Pure component একই props পেলে সব সময় একই result প্রদান করে।
No Side Effects: Pure component render প্রক্রিয়ায় কোনো external data modify করে না।
Stateless: Pure components সাধারণত stateless হয়। তবে stateful component-ও pure হতে পারে যদি state update প্রক্রিয়া external ভাবে component কে প্রভাবিত না করে।
Functional Approach: Pure components সাধারণত functional approach অনুসরণ করে, যেখানে component শুধুমাত্র props এবং state এর উপর নির্ভরশীল থাকে।

2. Pure Component কিভাবে কাজ করে?

React এ PureComponent নামে একটি বিশেষ class আছে যা Component class থেকে extend করা হয়। এটি shallow comparison এর মাধ্যমে component কে re-render করা হবে কিনা তা নির্ধারণ করে, যা performance উন্নত করতে সাহায্য করে।

উদাহরণ:

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    console.log("Rendering MyComponent");
    return <h1>{this.props.value}</h1>;
  }
}

এখানে MyComponent একটি PureComponent। যদি props.value পূর্বের render এর props এর সাথে পরিবর্তিত না হয়, তবে এই component পুনরায় render হবে না।

3. Function Component এবং Purity

Function components সহজেই pure হতে পারে কারণ তাদের মধ্যে state এবং lifecycle methods না থাকায় সাধারণত নির্দিষ্ট props অনুযায়ী নির্দিষ্ট output প্রদান করে।

উদাহরণ:

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

এখানে Greeting component নির্দিষ্ট name props পেলে একই output প্রদান করবে এবং কোনো side effects তৈরি করবে না, তাই এটি একটি pure function।

4. Pure Component এর সুবিধা

Debugging সহজ: Pure component predictable হওয়ায় এটি debug এবং test করতে সহজ হয়।
Performance উন্নত: Pure component shallow comparison এর মাধ্যমে পুনরায় render হওয়ার প্রয়োজন এড়াতে পারে, যা performance উন্নত করতে সাহায্য করে।
Reusable এবং Maintainable: Pure component সাধারণত reusable হয়, কারণ তারা নির্দিষ্ট props এর উপর নির্ভরশীল থাকে এবং বাইরের কোনো পরিবর্তনের সাথে জড়িত থাকে না।

5. Side Effects এড়িয়ে চলা

Pure component এ render প্রক্রিয়ায় কোনো side effect না থাকা উচিত। Side effect বলতে এমন কোনো কাজ বোঝায় যা component এর বাইরে অন্য কোন পরিবর্তন আনে। যেমন:

API calls করা
setTimeout বা setInterval ব্যবহার করা
DOM manipulation করা

React এ side effects পরিচালনা করার জন্য useEffect hook (function component এর ক্ষেত্রে) অথবা componentDidMount এবং componentDidUpdate lifecycle methods ব্যবহার করা হয়।

উদাহরণ:

// Side effect রাখা উচিত নয়
function MyComponent() {
  const [count, setCount] = useState(0);

  // এখানে render এ কোনো side effect রাখা উচিত নয়।
  return <h1>{count}</h1>;
}

6. Shallow Comparison কিভাবে কাজ করে?

React এর PureComponent shallow comparison এর মাধ্যমে পুরনো এবং নতুন props ও state তুলনা করে। যদি কোনো পার্থক্য না থাকে, তবে component পুনরায় render হবে না।

উদাহরণ:

import React, { PureComponent } from 'react';

class Counter extends PureComponent {
  render() {
    console.log("Rendering Counter");
    return <h1>{this.props.value}</h1>;
  }
}

// App Component
function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Counter value={count} />
      <button onClick={() => setCount(count)}>Increment</button>
    </div>
  );
}

এখানে button এ setCount(count) দিলে Counter component পুনরায় render হবে না কারণ count এর পূর্বের ও বর্তমান মান একই।

7. Avoiding Mutable Data Structures

React এ mutable data structures ব্যবহার করলে shallow comparison কাজ করতে পারে না এবং performance সমস্যা সৃষ্টি হতে পারে। বরং immutable data structures ব্যবহার করলে PureComponent সঠিকভাবে কাজ করতে পারে।

Mutable vs Immutable Data

// Mutable object
const person = { name: "Alice" };
person.name = "Bob"; // direct mutation

// Immutable update
const newPerson = { ...person, name: "Bob" };

React এ state update এর সময় immutable data structures ব্যবহার করে shallow comparison এর সুবিধা নেয়া যেতে পারে।

8. React.memo ব্যবহার করা

React-এ function component কে pure component হিসেবে ব্যবহার করতে React.memo ব্যবহার করা হয়। এটি function component কে wrapper হিসেবে ব্যবহার করে এবং shallow comparison করে, যা PureComponent এর মতো কাজ করে।

উদাহরণ:

const Greeting = React.memo(function Greeting({ name }) {
  console.log("Rendering Greeting");
  return <h1>Hello, {name}!</h1>;
});

// App Component
function App() {
  const [name, setName] = useState("Alice");

  return (
    <div>
      <Greeting name={name} />
      <button onClick={() => setName(name)}>Update Name</button>
    </div>
  );
}

এখানে Greeting component React.memo দ্বারা wrapped, তাই name অপরিবর্তিত থাকলে component পুনরায় render হবে না।

9. Pure Component এর Limitations

Complex Data Structures: Deeply nested বা complex data structures এর ক্ষেত্রে shallow comparison কাজ নাও করতে পারে।
Frequent Updates: যখন props বা state frequently update হয় তখন shallow comparison ব্যয়বহুল হতে পারে।
Callback Functions: যখন parent component callback function props হিসেবে পাঠায়, তখন callback function পরিবর্তিত না হলে pure component update হয় না।

10. Pure Component এ না রাখার জন্য বিষয়

State বা props ছাড়া অন্য কোনো external data এর উপর নির্ভরশীল operations।
Random বা dynamic data যা প্রতিবার ভিন্ন হতে পারে।
Asynchronous operations যা render প্রক্রিয়ার মধ্যে পরিচালিত হয়।

উপসংহার

React এ component গুলোকে pure রাখা performance উন্নত করে এবং code debugging ও maintenance সহজ করে। PureComponent বা React.memo ব্যবহার করে component গুলো pure রাখা যায়, যা component rerendering কে নিয়ন্ত্রণ করে। এছাড়া side effects পরিহার করে এবং immutable data structures ব্যবহার করে pure component তৈরি করা React application কে আরও efficient এবং responsive করে তুলতে পারে।

Source:- https://react.dev/learn/keeping-components-pure

Your UI as a Tree সম্পর্কে বিস্তারিত আলোচনা

React এ "UI as a Tree" ধারণাটি হলো আপনার ইউজার ইন্টারফেসকে একটি গাছের (Tree) আকারে গঠন করা, যেখানে প্রতিটি UI উপাদান বা কম্পোনেন্ট গাছের একটি নোড হিসাবে কাজ করে। এই গাছটি মূলত একটি হায়ারারকিকাল স্ট্রাকচার যা রুট থেকে বিভিন্ন শাখায় বিভক্ত হয়ে শেষ প্রান্তে লিফ নোডে গিয়ে শেষ হয়। এটি React এ ডেটা ও কম্পোনেন্টের স্ট্রাকচার বোঝার একটি মৌলিক ধারণা, যা আপনাকে আপনার অ্যাপের UI পরিচালনা ও রেন্ডারিংয়ে সহায়তা করে।

এই ধারনাটি বুঝতে হলে আসুন UI as a Tree সম্পর্কে বিস্তারিত আলোচনা করি।

1. UI as a Tree কেন গুরুত্বপূর্ণ?

React এর ভিত্তি হলো কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার। প্রতিটি UI component তার parent component থেকে data গ্রহণ করে এবং তা প্রদর্শন করে। UI কে গাছ আকারে চিন্তা করার ফলে UI কে ছোট ছোট অংশে ভাগ করা যায়, এবং প্রতিটি অংশ একটি কম্পোনেন্ট হিসেবে তৈরি করা যায়। এটি কোডকে আরো modular, reusable, এবং maintainable করে তোলে।

2. Component Hierarchy

React এ প্রতিটি কম্পোনেন্ট গাছের একটি node হিসেবে কাজ করে এবং তার children কম্পোনেন্ট গুলোকে contain করে। একটি UI এর মূল অংশটি Root Node হিসেবে কাজ করে এবং বাকী component গুলো তার nested children হিসেবে থাকে।

উদাহরণস্বরূপ, একটি website এর UI কে একটি tree structure হিসেবে চিন্তা করলে নিচের মতো হতে পারে:

<App>
  ├── <Header>
  │     ├── <Logo />
  │     └── <NavBar />
  ├── <Main>
  │     ├── <Sidebar />
  │     └── <Content>
  │           ├── <Article />
  │           └── <Comments />
  └── <Footer />

এখানে <App> মূল root component, যেটি গাছের মূল শাখা। App কম্পোনেন্টের child হলো <Header>, <Main>, এবং <Footer> এবং প্রতিটি child component-এর আবার তাদের নিজেদের child component আছে। এই ধরণের nested structure গঠন করেই একটি UI তৈরি হয়।

3. React Component Tree এর সুবিধা

UI কে tree আকারে সাজানো হলে নিচের সুবিধাগুলি পাওয়া যায়:

Modular Design: প্রতিটি component নিজস্ব অংশের কাজ করে, তাই একটি component সহজেই অন্য component থেকে স্বাধীন ভাবে কাজ করতে পারে।
Reusable Components: একটি component কে অন্যান্য components এর মধ্যে পুনরায় ব্যবহার করা যায়, যা কোডের পুনঃব্যবহার বাড়ায়।
Data Flow সহজ হয়: React এ data সাধারণত top-down flow হয়, অর্থাৎ parent থেকে child component গুলোর দিকে। Tree structure এ এই ডাটা ফ্লো সহজেই নিয়ন্ত্রণ করা যায়।
UI Isolation: প্রতিটি component isolated হওয়ার ফলে একটি component এর পরিবর্তন অন্য component-কে প্রভাবিত করে না।

4. Breaking UI into Components

UI কে component tree হিসেবে গঠন করার প্রথম ধাপ হলো UI কে বিভিন্ন ছোট ছোট component এ ভাগ করা। React application এর UI এর প্রতিটি অংশকে যতটা সম্ভব ছোট components এ ভাগ করা হয়।

উদাহরণ: ধরা যাক, একটি blog page তৈরি করতে হবে। এতে Header, Sidebar, এবং Content section থাকবে। Content এর ভিতরেও multiple sections থাকবে। এভাবে গাছের মত component hierarchy তৈরি করা যেতে পারে।

5. Component Tree এ Data Flow

React এ data সাধারণত একমুখী পথে প্রবাহিত হয়। Parent component তাদের child component গুলোর কাছে props এর মাধ্যমে data পাঠায়। এই structure এ data এর flow কে manage করা সহজ হয় এবং bug খুঁজে পাওয়াও সহজ হয়।

Top-Down Data Flow: Parent component এর data props এর মাধ্যমে child component এ যায়।
State Uplifting: কোন একটি child component এ data পরিবর্তনের প্রয়োজন হলে, সেই data কে তার parent component এ নিয়ে যেতে হয়।

Example:

function App() {
  const [user, setUser] = useState("John Doe");

  return (
    <div>
      <Header user={user} />
      <MainContent user={user} />
    </div>
  );
}

function Header({ user }) {
  return <h1>Welcome, {user}!</h1>;
}

function MainContent({ user }) {
  return <p>Hi {user}, here is your main content.</p>;
}

এখানে App component এর মধ্যে user state আছে, যা Header এবং MainContent component এর মধ্যে props হিসেবে পাঠানো হয়েছে। user state এর পরিবর্তন হলে এই props এর মাধ্যমে সব child component আপডেট হয়।

6. Rendering এবং Virtual DOM

React একটি Virtual DOM ব্যবহার করে, যা মূলত component tree কে track করে এবং tree এর মধ্যে যেসব পরিবর্তন হয়েছে সেগুলিকে efficiently update করে। যখন UI এর কোন অংশ পরিবর্তন হয়, তখন React সেই অংশটি Virtual DOM এ update করে এবং browser এ render করে। Tree structure হিসেবে গঠন করা থাকলে এই rendering process আরও সহজ হয়।

7. Component Tree Structure এবং Performance Optimization

React এর UI tree এর সুবিধা হলো সহজে performance optimization করা যায়। Component গুলোকে isolated রেখে render করা গেলে, শুধু পরিবর্তিত component গুলো re-render হবে।

Memoization: React.memo ব্যবহার করে কোনো component কে prevent করা যায় যাতে unnecessary rendering না হয়।
Lazy Loading: Nested component গুলো lazy load করে performance উন্নত করা যায়।

8. Component Tree এবং UI Testing

Tree structure এ component গুলো সাজানো থাকলে testing সহজ হয়। প্রতিটি isolated component এর জন্য unit testing করা যায়, এবং পুরো UI গাছের structure অনুযায়ী integration testing করা যায়।

9. Component Tree Visualization

React এ component tree visualization একটি গুরুত্বপূর্ণ debugging tool। React DevTools ব্যবহার করে component tree structure দেখতে পারেন, যা প্রতিটি component এর hierarchy, props, এবং state সম্পর্কে বিস্তারিত ধারণা দেয়।

উদাহরণসহ উপসংহার

React এর মাধ্যমে একটি UI কে tree structure হিসেবে চিন্তা করা হলে তা ছোট ছোট reusable component এ ভাগ করা যায়। যেমন, ধরুন একটি e-commerce website এর Product page এর UI tree নিম্নরূপ হতে পারে:

<ProductPage>
  ├── <ProductDetails>
  │     ├── <ProductImage />
  │     ├── <ProductDescription />
  │     └── <AddToCartButton />
  ├── <RelatedProducts>
  │     ├── <ProductCard />
  │     └── <ProductCard />
  └── <CustomerReviews>
        ├── <Review />
        └── <Review />

এখানে ProductPage component এর child হিসেবে ProductDetails, RelatedProducts, এবং CustomerReviews component রয়েছে। প্রত্যেকটি component তার নিজের অংশের কাজ সম্পন্ন করে এবং অন্য component গুলোর সঙ্গে কোনো coupling নেই।

উপসংহার: React এ UI কে গাছের মতো সাজানো হলে তা প্রোজেক্টের মডিউলারিটি, রিইউজেবিলিটি, এবং maintainability বাড়ায়। তাছাড়া একমুখী data flow এবং isolated rendering এর মাধ্যমে performance বাড়ে এবং bug খুঁজে পাওয়া সহজ হয়। React এ component tree ভিত্তিক UI তৈরি করার ফলে বড় application-কে সহজেই scale করা যায় এবং উন্নত user experience নিশ্চিত করা সম্ভব হয়।

Source:- https://react.dev/learn/understanding-your-ui-as-a-tree

JavaScript এবং React এ Debounce ব্যবহার সম্পর্কে বিস্তারিত আলোচনা

RSM Academy BD — Mon, 30 Sep 2024 04:08:14 +0000

JavaScript এবং React-এ debounce একটি কৌশল, যা কোনো ফাংশনের দ্রুত পুনরাবৃত্তি বন্ধ করে নির্দিষ্ট সময় পর ফাংশনটি চালায়। এটি মূলত পারফরম্যান্স উন্নত করার জন্য ব্যবহৃত হয়, বিশেষ করে যখন ব্যবহারকারী টাইপিং বা স্ক্রোলিং এর মতো কাজ করে।

Debounce কীভাবে কাজ করে?

Debounce মুলতঃ একটি টাইমার তৈরি করে এবং নির্দিষ্ট সময়ের মধ্যে যদি একই কাজ বারবার ট্রিগার হয়, তাহলে এটি শেষ ফাংশনটি চালু করার আগে বাকি ফাংশনগুলোকে বাতিল করে। উদাহরণস্বরূপ, সার্চ বক্সে টাইপিংয়ের সময় একটি সার্ভারে API কল করতে গেলে প্রতিটি কী প্রেসে সার্ভারে কল না করে, একবার টাইপিং শেষ হলে নির্দিষ্ট সময় পরে API কল করা যায়। এতে সার্ভারের লোড কমে এবং অ্যাপ্লিকেশনের পারফরম্যান্স বাড়ে।

JavaScript-এ Debounce কিভাবে তৈরি করা যায়?

Debounce ফাংশন তৈরি করা খুব সহজ:

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

উপরে debounce ফাংশনটি নিচের কাজগুলো করে:

func: যে ফাংশনটি ডিবাউন্স করা হবে।
delay: কতক্ষণ অপেক্ষা করার পর ফাংশনটি চালু হবে।

উদাহরণ

ধরুন আমরা একটি সার্চ বক্সে API কল করতে চাই, যখন ব্যবহারকারী টাইপিং শেষ করে:

function handleSearch(query) {
    console.log("Searching for:", query);
    // এখানে API কল হবে
}

const debouncedSearch = debounce(handleSearch, 500); // 500ms delay

// Input field এ টাইপ করার সাথে সাথে debounce ফাংশন কাজ করবে
document.getElementById('searchInput').addEventListener('input', function(event) {
    debouncedSearch(event.target.value);
});

এখানে debouncedSearch ফাংশনটি ৫০০ মিলিসেকেন্ড অপেক্ষা করবে, তারপর ফাংশনটি কল করবে, যাতে একাধিক কী প্রেসের ফলে সার্ভারে একাধিক অনুরোধ না যায়।

React-এ Debounce কিভাবে ব্যবহার করা যায়?

React অ্যাপ্লিকেশনে, debounce ফাংশন সাধারণত useEffect হুকের সাথে ব্যবহার করা হয়। উদাহরণ:

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

function SearchComponent() {
    const [query, setQuery] = useState('');
    const [debouncedQuery, setDebouncedQuery] = useState(query);

    // useEffect to handle debounced query update
    useEffect(() => {
        const timer = setTimeout(() => {
            setDebouncedQuery(query);
        }, 500); // 500ms delay

        // Cleanup the timeout when query changes
        return () => {
            clearTimeout(timer);
        };
    }, [query]);

    useEffect(() => {
        if (debouncedQuery) {
            console.log("Searching for:", debouncedQuery);
            // এখানে API কল হবে
        }
    }, [debouncedQuery]);

    return (
        <input 
            type="text" 
            value={query}
            onChange={(e) => setQuery(e.target.value)} 
            placeholder="Search..."
        />
    );
}

export default SearchComponent;

এই উদাহরণে, query স্টেট ব্যবহারকারী যখন টাইপ করে তখন সাথে সাথে আপডেট হয়। কিন্তু debouncedQuery স্টেটটি শুধুমাত্র ৫০০ মিলিসেকেন্ড পরে আপডেট হয়, যখন ব্যবহারকারী টাইপ করা বন্ধ করে। ফলে API কল একাধিকবার না হয়ে শুধুমাত্র প্রয়োজনীয় সময়ে হয়।

উপসংহার

Debounce কৌশলটি JavaScript এবং React-এ পারফরম্যান্স উন্নত করার জন্য একটি কার্যকরী উপায়। এটি বিশেষভাবে সার্চ ইঞ্জিন, ফর্ম ভ্যালিডেশন এবং স্ক্রোল ইভেন্টগুলোর ক্ষেত্রে গুরুত্বপূর্ণ, যেখানে ইভেন্টগুলোর উপর অপ্রয়োজনীয় একাধিক কল করা থেকে বিরত থাকা দরকার।

Using Local Storage API With JavaScript And React JS

RSM Academy BD — Mon, 30 Sep 2024 04:00:12 +0000

JavaScript এবং React এ Local Storage API ব্যবহার সম্পর্কে বিস্তারিত আলোচনা

JavaScript এবং React এ Local Storage API ব্যবহার খুব গুরুত্বপূর্ণ একটি কনসেপ্ট, যা অ্যাপ্লিকেশনের ডেটা ব্রাউজারের মধ্যে সংরক্ষণ করার জন্য ব্যবহার করা হয়। এতে ডেটা ব্রাউজারে সেভ করা থাকে এবং ব্রাউজার বন্ধ বা রিফ্রেশ করলেও ডেটা হারিয়ে যায় না।

Local Storage এর বৈশিষ্ট্য:

Key-Value Pair Storage: Local storage ডেটা key-value pair আকারে সংরক্ষণ করে।
Persistent Storage: ব্রাউজার বন্ধ হওয়ার পরেও ডেটা থাকে।
String Data: Local storage শুধুমাত্র string ডেটা সংরক্ষণ করতে পারে।
5MB Data Limit: Local storage এ সাধারণত 5MB পর্যন্ত ডেটা সংরক্ষণ করা যায়।
No Expiry Date: Cookies এর মতো Local storage এর কোনো expiration time থাকে না।

Local Storage Methods:

localStorage.setItem(key, value): ডেটা সংরক্ষণ করতে ব্যবহৃত হয়।
localStorage.getItem(key): ডেটা রিট্রিভ করতে ব্যবহৃত হয়।
localStorage.removeItem(key): কোনো নির্দিষ্ট key এর ডেটা মুছে ফেলতে ব্যবহৃত হয়।
localStorage.clear(): সব ডেটা মুছে ফেলতে ব্যবহৃত হয়।

React এ Local Storage ব্যবহার:

React এ, local storage ডেটা ম্যানেজ করতে সাধারণত React এর useEffect এবং useState হুক ব্যবহার করা হয়। এতে অ্যাপ্লিকেশনটি যখন প্রথম লোড হয় বা আপডেট হয়, তখন ডেটা local storage থেকে আনা হয় এবং প্রয়োজন অনুযায়ী সেভ করা হয়।

উদাহরণ:

React এর মাধ্যমে একটি সাধারণ theme সিস্টেম তৈরি করে দেখানো হলো, যেখানে থিমের তথ্য local storage এ সংরক্ষণ করা হবে।

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

function App() {
  // local storage থেকে theme আনতে useState ব্যবহার করা হচ্ছে
  const [theme, setTheme] = useState(() => {
    return localStorage.getItem("theme") || "light";
  });

  // useEffect ব্যবহার করে local storage এ theme সংরক্ষণ করা হচ্ছে
  useEffect(() => {
    localStorage.setItem("theme", theme);
  }, [theme]);

  // থিম পরিবর্তন করার জন্য একটি function
  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  return (
    <div className={`App ${theme}`}>
      <h1>{theme === "light" ? "Light Mode" : "Dark Mode"}</h1>
      <button onClick={toggleTheme}>
        Switch to {theme === "light" ? "Dark" : "Light"} Mode
      </button>
    </div>
  );
}

export default App;

কোড বিশ্লেষণ:

useState: এখানে theme state তৈরি করা হয়েছে এবং initial value local storage থেকে নিয়ে নেওয়া হয়েছে। যদি local storage এ কোনো theme না থাকে, তাহলে default light দেওয়া হয়েছে।
useEffect: যখনই theme state আপডেট হয়, তখন useEffect ফাংশন রান করে এবং নতুন theme local storage এ সেভ করে দেয়।
toggleTheme: এই ফাংশনের মাধ্যমে থিম পরিবর্তন করা হয়, যা light থেকে dark বা dark থেকে light এ পরিবর্তিত হয়।

Local Storage এ Object সংরক্ষণ:

Local storage শুধুমাত্র string ডেটা সংরক্ষণ করতে পারে। তাই যদি কোনো object সংরক্ষণ করতে চান, তাহলে সেটিকে JSON.stringify() দিয়ে string এ রূপান্তর করতে হবে এবং JSON.parse() দিয়ে পুনরায় object এ রূপান্তর করতে হবে।

উদাহরণ:

// Object সংরক্ষণ করা
const user = { name: "John", age: 30 };
localStorage.setItem("user", JSON.stringify(user));

// Object রিট্রিভ করা
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser); // Output: { name: "John", age: 30 }

React এ Local Storage এর প্রয়োগের কিছু উদাহরণ:

User Authentication: লগইন করা ব্যবহারকারীর তথ্য local storage এ সংরক্ষণ করা যায়, যাতে ব্যবহারকারী পরবর্তীতে অ্যাপ খুললে আবার লগইন করতে না হয়।
Theme Settings: ব্যবহারকারীর পছন্দের থিম সংরক্ষণ করা যায়, যাতে পরবর্তীতে সে অ্যাপ খুললে আগের থিম রিমেম্বার হয়।
Shopping Cart: ই-কমার্স সাইটে ব্যবহারকারীর শপিং কার্টের তথ্য local storage এ সংরক্ষণ করা যায়।

এইভাবে React এ local storage ব্যবহার করে আপনি ডেটা persistent করতে পারেন এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন।

Local Storage ব্যবহার করার সময় সতর্কতা: Local storage এ sensitive ডেটা সংরক্ষণ করা উচিত নয়, কারণ এটি ক্লায়েন্ট-সাইড এ স্টোর করা হয় এবং সহজেই অ্যাক্সেস করা যায়। Sensitive ডেটা সংরক্ষণের জন্য sessionStorage বা cookies এর মতো অন্যান্য নিরাপদ পদ্ধতি ব্যবহার করা যেতে পারে।

Web Storage API Explained with Examples

RSM Academy BD — Fri, 20 Sep 2024 03:45:37 +0000

Web Storage API: বিস্তারিত আলোচনা

Web Storage API হলো জাভাস্ক্রিপ্টের একটি শক্তিশালী API যা ব্রাউজারে ব্যবহারকারীর ডেটা স্টোর করার জন্য ব্যবহৃত হয়। এটি client-side storage-এর মাধ্যমে key-value pair আকারে ডেটা সংরক্ষণ করতে সাহায্য করে। Web Storage API-এর দুটি প্রধান ভাগ রয়েছে:

localStorage: ডেটা ব্রাউজার বন্ধ করার পরেও থাকে।
sessionStorage: ডেটা শুধুমাত্র সেশন (ব্রাউজার ট্যাব বা উইন্ডো) পর্যন্ত থাকে, অর্থাৎ সেশন শেষ হলে (ব্রাউজার বা ট্যাব বন্ধ করলে) ডেটা মুছে যায়।

Web Storage API কেন ব্যবহার করবেন?

Client-side ডেটা সংরক্ষণ: এটি ব্যবহার করে সার্ভারকে অপ্রয়োজনীয় ডেটা পাঠানো ছাড়া client-side-এ ডেটা সংরক্ষণ করা যায়।
Session এবং Local Storage: Web Storage API session-ভিত্তিক ডেটা সংরক্ষণ বা দীর্ঘমেয়াদী ডেটা সংরক্ষণের দুটি আলাদা পদ্ধতি সরবরাহ করে।
কুকিজের চেয়ে উন্নত: কুকিজের তুলনায় Web Storage API নিরাপদ এবং দ্রুত। এটি প্রতি সার্ভার অনুরোধে ডেটা পাঠায় না এবং কুকিজের সীমাবদ্ধতা ছাড়াই বেশি ডেটা সংরক্ষণ করতে পারে।
সহজ API: এটি ব্যবহার করা খুবই সহজ এবং key-value pair আকারে ডেটা ম্যানেজ করে।

Web Storage API-এর দুইটি ভাগ:

1. localStorage

localStorage হলো ব্রাউজারের ডেটা স্টোর করার একটি পদ্ধতি, যা ব্রাউজার বন্ধ করলেও থেকে যায়। এটি বেশিরভাগ সময় ব্যবহার করা হয় তখন, যখন আপনি দীর্ঘ সময়ের জন্য ডেটা সংরক্ষণ করতে চান।

localStorage-এর বৈশিষ্ট্য:

Persistent Storage: ডেটা ব্রাউজার বন্ধ করার পরেও থাকে।
স্টোরেজ সাইজ: সাধারণত প্রতি origin-এ ৫ থেকে ১০ MB পর্যন্ত ডেটা সংরক্ষণ করা যায়।
Key-value pair আকারে ডেটা সংরক্ষণ করা হয়।

localStorage মেথড:

localStorage.setItem(key, value): এটি একটি key-value pair সংরক্ষণ করে।
localStorage.getItem(key): একটি key-এর জন্য সংরক্ষিত value ফেরত দেয়।
localStorage.removeItem(key): নির্দিষ্ট key-এর ডেটা মুছে দেয়।
localStorage.clear(): localStorage-এ সংরক্ষিত সমস্ত ডেটা মুছে দেয়।

উদাহরণ:

// ডেটা সংরক্ষণ
localStorage.setItem('username', 'JohnDoe');

// ডেটা অ্যাক্সেস
const user = localStorage.getItem('username');
console.log(user); // Output: JohnDoe

// ডেটা মুছে ফেলা
localStorage.removeItem('username');

// সমস্ত ডেটা মুছে ফেলা
localStorage.clear();

2. sessionStorage

sessionStorage হল একইভাবে key-value pair আকারে ডেটা সংরক্ষণ করে, তবে এটি session-ভিত্তিক। যখন ব্রাউজারের ট্যাব বা উইন্ডো বন্ধ হয়, sessionStorage-এর ডেটা মুছে যায়।

sessionStorage-এর বৈশিষ্ট্য:

Session-based Storage: ডেটা শুধুমাত্র session পর্যন্ত থাকে। ট্যাব বা উইন্ডো বন্ধ করলে ডেটা মুছে যায়।
স্টোরেজ সাইজ: সাধারণত প্রতি origin-এ ৫ থেকে ১০ MB পর্যন্ত ডেটা সংরক্ষণ করা যায়।
Key-value pair আকারে ডেটা সংরক্ষণ করা হয়।

sessionStorage মেথড:

sessionStorage.setItem(key, value): একটি key-value pair session-এর জন্য সংরক্ষণ করে।
sessionStorage.getItem(key): একটি key-এর জন্য session-এ সংরক্ষিত value ফেরত দেয়।
sessionStorage.removeItem(key): নির্দিষ্ট key-এর ডেটা মুছে দেয়।
sessionStorage.clear(): sessionStorage-এর সমস্ত ডেটা মুছে দেয়।

উদাহরণ:

// ডেটা সংরক্ষণ
sessionStorage.setItem('sessionKey', 'SessionValue');

// ডেটা অ্যাক্সেস
const sessionData = sessionStorage.getItem('sessionKey');
console.log(sessionData); // Output: SessionValue

// ডেটা মুছে ফেলা
sessionStorage.removeItem('sessionKey');

// সমস্ত ডেটা মুছে ফেলা
sessionStorage.clear();

localStorage এবং sessionStorage-এর মধ্যে পার্থক্য

বৈশিষ্ট্য	localStorage	sessionStorage
ডেটার স্থায়িত্ব	ডেটা ব্রাউজার বন্ধ করার পরেও থাকে।	ডেটা শুধুমাত্র session পর্যন্ত থাকে। ট্যাব/উইন্ডো বন্ধ হলে মুছে যায়।
স্টোরেজ সাইজ	৫ থেকে ১০ MB, নির্ভর করে ব্রাউজার এবং origin-এর উপর।	৫ থেকে ১০ MB, নির্ভর করে ব্রাউজার এবং origin-এর উপর।
ব্যবহার ক্ষেত্র	দীর্ঘ সময়ের জন্য ডেটা সংরক্ষণে ব্যবহৃত হয়।	session-specific ডেটা সংরক্ষণে ব্যবহৃত হয়।
মেমরি পরিষ্কার করা	ব্যবহারকারী নিজে বা স্ক্রিপ্টের মাধ্যমে clear না করলে ডেটা থাকে।	ট্যাব বা উইন্ডো বন্ধ করার সাথে সাথে মুছে যায়।

Web Storage API এর সীমাবদ্ধতা

সাইজ সীমাবদ্ধতা: সাধারণত ৫ থেকে ১০ MB পর্যন্ত ডেটা সংরক্ষণ করা যায়, যা বড় ডেটা সংরক্ষণের জন্য যথেষ্ট নয়।
Security Risks: sensitive ডেটা (যেমন, পাসওয়ার্ড বা ব্যক্তিগত তথ্য) সংরক্ষণ করার জন্য এটি নিরাপদ নয়। কারণ, এটি সহজেই জাভাস্ক্রিপ্ট কোডের মাধ্যমে অ্যাক্সেস করা যায়।
Single-origin Restriction: Web Storage API কেবলমাত্র একই origin-এর জন্য ডেটা অ্যাক্সেস করতে পারে। ভিন্ন origin বা domain-এ ডেটা শেয়ার করা যায় না।

Web Storage API vs Cookies

বৈশিষ্ট্য	Web Storage API	Cookies
স্টোরেজ সাইজ	৫ থেকে ১০ MB	প্রতি কুকি ৪ KB এর বেশি নয়।
প্রতি রিকোয়েস্টে পাঠানো	সার্ভার অনুরোধে ডেটা পাঠানো হয় না।	প্রতিটি সার্ভার অনুরোধের সাথে কুকি পাঠানো হয়।
API ব্যবহার	সহজ API মেথড যেমন, `setItem`, `getItem`।	কুকি হ্যান্ডলিং তুলনামূলকভাবে জটিল।
ডেটার স্থায়িত্ব	localStorage ডেটা ব্রাউজার বন্ধ করার পরেও থাকে।	কুকির সময়সীমা অনুযায়ী স্থায়ী হয়।

ব্যবহারিক উদাহরণ: ডার্ক মোড সেভ করা

<!DOCTYPE html>
<html>
<head>
  <title>Dark Mode Example</title>
</head>
<body>
  <h1>Toggle Dark Mode</h1>
  <button id="toggleBtn">Toggle Dark Mode</button>

  <script>
    // প্রাথমিকভাবে ডার্ক মোড স্ট্যাটাস লোড করা
    const isDarkMode = localStorage.getItem('darkMode') === 'enabled';

    if (isDarkMode) {
      document.body.classList.add('dark');
    }

    document.getElementById('toggleBtn').addEventListener('click', function() {
      if (document.body.classList.contains('dark')) {
        document.body.classList.remove('dark');
        localStorage.setItem('darkMode', 'disabled');
      } else {
        document.body.classList.add('dark');
        localStorage.setItem('darkMode', 'enabled');
      }
    });
  </script>

  <style>
    body.dark {
      background-color: black;
      color: white;
    }
  </style>
</body>
</html>

এই উদাহরণে, ব্যবহারকারী যদি ডার্ক মোড চালু করে, তখন localStorage-এ সেট করা হয় যে ডার্ক মোড সক্রিয় আছে। ব্রাউজার বন্ধ করার পরেও ডার্ক মোড সক্রিয় থাকবে যতক্ষণ না এটি বন্ধ করা হয়।

উপসংহার

Web Storage API হল একধরনের ক্লায়েন্ট-সাইড স্টোরেজ যা ডেটা ব্রাউজারে সংরক্ষণ এবং অ্যাক্সেস করার জন্য ব্যবহৃত হয়। এটি ব্যবহার করে আপনি session বা long-term ডেটা সংরক্ষণ করতে পারেন। localStorage এবং sessionStorage আপনাকে ব্যবহারকারীর ইন্টারঅ্যাকশন উন্নত করতে সাহায্য করে, বিশেষত এমন ক্ষেত্রে যেখানে server-side অনুরোধ ছাড়া ডেটা ম্যানেজ করা দরকার।

Web History API Explained with Examples

RSM Academy BD — Fri, 20 Sep 2024 03:25:57 +0000

Web History API: বিস্তারিত আলোচনা

Web History API হলো একটি ব্রাউজার API, যা জাভাস্ক্রিপ্ট ব্যবহার করে ব্রাউজারের history stack-এর সাথে ইন্টারঅ্যাক্ট করার সুযোগ দেয়। History API-এর মাধ্যমে আপনি ব্রাউজারের ব্যাক (back) এবং ফরওয়ার্ড (forward) নেভিগেশনকে নিয়ন্ত্রণ করতে পারেন এবং কোনও পেজ রিলোড ছাড়াই URL পরিবর্তন করতে পারেন। এটি Single Page Application (SPA)-এ বিশেষভাবে গুরুত্বপূর্ণ যেখানে পুরো পেজ রিলোড না করে URL পরিবর্তন করে ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করা হয়।

Web History API-এর কাজ

History API মূলত ব্রাউজারের history stack কে নিয়ন্ত্রণ করে। history stack হচ্ছে একটি স্ট্যাক যা ব্যবহারকারীর বিভিন্ন পেজ নেভিগেশন (যেমন, back বা forward করা) ট্র্যাক করে। সাধারণত history stack-এর তিনটি প্রধান কাজ থাকে:

back: আগের পেজে ফিরে যাওয়া।
forward: পরের পেজে যাওয়া, যদি ব্যবহারকারী পূর্বে back করেছেন।
push: নতুন পেজ যোগ করা (যেমন, নতুন URL push করা)।

History API-এর প্রধান মেথড ও প্রোপার্টিজ

Web History API কিছু গুরুত্বপূর্ণ মেথড ও প্রোপার্টি প্রদান করে যা history stack পরিচালনার জন্য ব্যবহৃত হয়। প্রধান মেথডগুলো নিম্নরূপ:

1. `history.pushState()`

history.pushState() মেথড ব্যবহার করে আপনি নতুন state (অবস্থা) এবং URL history stack-এ push করতে পারেন, যা পেজ রিলোড ছাড়াই URL পরিবর্তন করে। এটি Single Page Applications (SPA)-এ খুবই সাধারণ, যেখানে কোনো পেজ পুনরায় লোড না করে নেভিগেশন করা হয়।

history.pushState(state, title, url);

state: এটি একটি অবজেক্ট যা নতুন history entry-এর সাথে সংযুক্ত থাকে। যখন সেই entry পুনরায় active হয়, তখন সেই state অবজেক্টটি ফিরিয়ে আনা হয়।
title: এটি একটি string, যা সাধারণত ব্রাউজারের টাইটেল বার পরিবর্তনের জন্য ব্যবহৃত হয় (যদিও অধিকাংশ ব্রাউজার এটি ব্যবহার করে না)।
url: এটি একটি নতুন URL, যা বর্তমান URL-এর মতোই হতে পারে অথবা আলাদা হতে পারে। তবে URL-টি অবশ্যই একই origin-এ থাকতে হবে।

উদাহরণ:

// URL পরিবর্তন না করে state push করা
history.pushState({page: 1}, "Title 1", "/page1");

উপরের উদাহরণে, /page1 নামক নতুন URL history stack-এ push করা হয়েছে, তবে এটি পেজ রিলোড না করে কাজ করবে। ব্যবহারকারীরা ব্রাউজারের back বোতাম ব্যবহার করে আগের অবস্থানে ফিরে যেতে পারবে।

2. `history.replaceState()`

history.replaceState() মেথডটি pushState() এর মতোই কাজ করে, তবে এটি history stack-এ নতুন entry যোগ না করে বর্তমান entry-টি পরিবর্তন করে। যখন আপনি বর্তমান পেজের URL বা state পরিবর্তন করতে চান কিন্তু history stack-এ নতুন entry তৈরি করতে চান না, তখন এটি ব্যবহৃত হয়।

history.replaceState(state, title, url);

উদাহরণ:

history.replaceState({page: 2}, "Title 2", "/page2");

এই মেথডটি pushState() এর মতোই কাজ করে, তবে এটি বর্তমান history entry-কে প্রতিস্থাপন করে, নতুন entry যোগ করে না।

3. `history.back()`, `history.forward()`, এবং `history.go()`

এই মেথডগুলো ব্যবহার করে আপনি history stack-এ back এবং forward মুভ করতে পারেন।

history.back(): history stack-এ আগের পেজে চলে যায়। এটি ব্রাউজারের back বোতামের মতো কাজ করে।

  history.back(); // আগের পেজে নেয়

history.forward(): পরবর্তী history entry-তে চলে যায়। এটি ব্রাউজারের forward বোতামের মতো কাজ করে।

  history.forward(); // পরবর্তী পেজে নেয়

history.go(n): history stack-এ নির্দিষ্ট সংখ্যা অনুসারে নেভিগেট করে। যদি n পজিটিভ হয়, তবে এটি ফরওয়ার্ড যায়, আর নেগেটিভ হলে ব্যাক যায়।

  history.go(-1); // আগের পেজে যায়
  history.go(1); // পরবর্তী পেজে যায়

4. `popstate` Event

popstate ইভেন্টটি তখন ঘটে যখন ব্যবহারকারী back বা forward নেভিগেশন করে এবং state পরিবর্তন হয়। এটি আপনাকে history stack থেকে state পরিবর্তনের সময় পেজে নির্দিষ্ট অ্যাকশন নিতে সাহায্য করে।

window.addEventListener('popstate', function(event) {
  console.log("State: ", event.state);
});

ব্যবহারিক উদাহরণ:

// স্টেট পুশ করা হচ্ছে
history.pushState({page: 1}, "Page 1", "/page1");
history.pushState({page: 2}, "Page 2", "/page2");

// পপস্টেট ইভেন্ট হ্যান্ডলিং
window.addEventListener('popstate', function(event) {
  console.log("State changed: ", event.state);
});

যখন ব্যবহারকারী ব্রাউজারের back বা forward বোতাম ব্যবহার করে, তখন popstate ইভেন্টটি ট্রিগার হবে এবং state পরিবর্তনের সাথে সাথে event.state এর মাধ্যমে পরিবর্তিত state অবজেক্টটি পাওয়া যাবে।

কেন Web History API ব্যবহার করবেন?

1. Single Page Application (SPA) তৈরিতে সাহায্য করে

Single Page Application (SPA) এমন একটি অ্যাপ্লিকেশন যেখানে পুরো পেজটি পুনরায় লোড না করেই কন্টেন্ট পরিবর্তন করা হয়। History API ব্যবহার করে নতুন পেজের মতো URL যোগ করা যায়, কিন্তু আসলে পেজ লোড করা হয় না। এটি ব্যবহারকারীর অভিজ্ঞতাকে আরো উন্নত করে, কারণ প্রতিটি নেভিগেশনে সম্পূর্ণ পেজ পুনরায় লোড হয় না।

2. SEO ও Social Media Integration সহজ হয়

যেহেতু History API ব্যবহার করে URL পরিবর্তন করা যায়, এটি সার্চ ইঞ্জিন অপ্টিমাইজেশন (SEO) এবং সোশ্যাল মিডিয়া শেয়ারিংকে সহজ করে। যখন কোন পেজ বা তার অংশ URL-এর মাধ্যমে অ্যাক্সেস করা হয়, তখন তা সোশ্যাল মিডিয়ায় সহজে শেয়ার বা সার্চ ইঞ্জিনে সূচিকৃত করা যায়।

3. ব্যাক-ফরওয়ার্ড নেভিগেশন নিয়ন্ত্রণ করা

History API ব্যবহার করে আপনি সহজেই ব্রাউজারের ব্যাক এবং ফরওয়ার্ড নেভিগেশন নিয়ন্ত্রণ করতে পারেন। এর ফলে ব্যবহারকারীরা একটি পেজের মধ্যে বিভিন্ন state-এর মধ্যে নেভিগেট করতে পারেন, যেটা সাধারণত মোবাইল বা ওয়েব অ্যাপ্লিকেশনগুলিতে দরকার হয়।

4. উন্নত ব্যবহারকারীর অভিজ্ঞতা প্রদান

কোনও পেজ পুনরায় লোড না করে URL পরিবর্তনের মাধ্যমে history stack পরিচালনা করা যায়, যার ফলে ব্যবহারকারী seamless নেভিগেশনের অভিজ্ঞতা পায়।

Web History API ব্যবহারের চ্যালেঞ্জ

Browser Support: যদিও আধুনিক ব্রাউজারগুলো History API সাপোর্ট করে, তবে কিছু পুরানো ব্রাউজার, যেমন Internet Explorer 9-এর আগে, এটি সাপোর্ট করে না। তাই পুরানো ব্রাউজারের জন্য ফিচার ডিটেকশন বা ফিলব্যাক প্রয়োজন।
Security Issues: History API ব্যবহার করে URL পরিবর্তন করা যায়, তবে এটি cross-origin URL-এ কাজ করবে না। এটি নিরাপত্তার কারণে প্রয়োগ করা হয়, যাতে malicious scripts কোনো বহিরাগত পেজে নেভিগেট করতে না পারে।

উপসংহার

Web History API জাভাস্ক্রিপ্টের একটি শক্তিশালী এবং কার্যকরী টুল, যা ব্রাউজারের history stack নিয়ন্ত্রণের জন্য ব্যবহৃত হয়। এটি ব্যাক-ফরওয়ার্ড নেভিগেশন এবং পেজ রিলোড ছাড়াই URL পরিবর্তন করতে সাহায্য করে। বিশেষ করে Single Page Applications (SPA)-এ এর ভূমিকা অপরিসীম, কারণ এটি seamless নেভিগেশন এবং উন্নত ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। History API ব্যবহার করে আপনি ব্রাউজারের native back/forward ফিচারগুলোকে নিয়ন্ত্রণ করতে পারেন এবং ব্যবহারকারীর ইন্টারঅ্যাকশন আরও কার্যকরী করে তুলতে পারেন।

Event Propagation - Bubbling vs Capturing Explained with Examples

RSM Academy BD — Fri, 20 Sep 2024 02:29:00 +0000

Event Propagation - Bubbling vs Capturing সম্পর্কে বিস্তাতিত আলোচনা করতে পারবেন?

ইভেন্ট প্রোপাগেশন: বুবলিং বনাম ক্যাপচারিং

ইভেন্ট প্রোপাগেশন হল একটি প্রক্রিয়া যেখানে একটি ইভেন্ট (যেমন একটি ক্লিক) DOM (Document Object Model) এর উপাদানগুলির মধ্যে ছড়িয়ে পড়ে। এটি মূলত দুইভাবে কাজ করে: বুবলিং (bubbling) এবং ক্যাপচারিং (capturing)। এই দুটি প্রক্রিয়া DOM ইভেন্ট হ্যান্ডলিং এর অত্যন্ত গুরুত্বপূর্ণ অংশ।

ইভেন্ট প্রোপাগেশন হলো একটি প্রক্রিয়া যেখানে একটি ইভেন্ট DOM ট্রি-তে parent থেকে child, child থেকে parent ইত্যাদি element-এর মধ্যে ছড়িয়ে পড়ে। ইভেন্ট প্রোপাগেশন দুইভাবে কাজ করতে পারে: Event Bubbling এবং Event Capturing। ইভেন্ট প্রোপাগেশনের এই দুটি ধাপ DOM-এ ইভেন্টগুলি কিভাবে propagate হবে, তা নির্ধারণ করে।

১. ইভেন্ট বুবলিং (Event Bubbling)

ইভেন্ট বুবলিং হল প্রক্রিয়া যেখানে ইভেন্টটি প্রথমে ইনিশিয়েট (শুরু) হয় সবচেয়ে নির্দিষ্ট (innermost) উপাদান থেকে এবং ধীরে ধীরে উপরের স্তরের উপাদানগুলিতে ছড়িয়ে পড়ে। অর্থাৎ, ইভেন্টটি প্রথমে তার নিজস্ব টার্গেটে প্রভাবিত হয় এবং তারপরে তার প্যারেন্ট, তার প্যারেন্টের প্যারেন্ট, ইত্যাদি উপাদানগুলিতে প্রভাবিত হতে থাকে যতক্ষণ না পুরো DOM এর টপ-লেভেল পর্যন্ত পৌঁছায়।

উদাহরণস্বরূপ:

<div id="parent">
    <div id="child">
        <button id="button">Click Me!</button>
    </div>
</div>

এই উদাহরণে, যদি আপনি button উপাদানে ক্লিক করেন, তাহলে ইভেন্টটি প্রথমে button এ প্রভাবিত হবে, তারপর child এ, এবং শেষ পর্যন্ত parent উপাদানে প্রভাবিত হবে। এটি বুবলিং।

২. ইভেন্ট ক্যাপচারিং (Event Capturing)

ইভেন্ট ক্যাপচারিং হল প্রক্রিয়া যেখানে ইভেন্টটি প্রথমে DOM এর উপরের স্তরের উপাদান থেকে শুরু হয় এবং ধীরে ধীরে নিচের স্তরের (innermost) উপাদানের দিকে যায়। অর্থাৎ, ইভেন্টটি প্রথমে তার সর্বোচ্চ প্যারেন্টে প্রভাবিত হয় এবং ধীরে ধীরে তার নির্দিষ্ট টার্গেটের দিকে আসে।

উদাহরণস্বরূপ:

<div id="parent">
    <div id="child">
        <button id="button">Click Me!</button>
    </div>
</div>

এই উদাহরণে, যদি আপনি button এ ক্লিক করেন এবং ক্যাপচারিং ফেজে ইভেন্টটি হ্যান্ডেল করা হয়, তাহলে ইভেন্টটি প্রথমে parent এ প্রভাবিত হবে, তারপর child এ, এবং শেষে button এ।

৩. ইভেন্ট প্রোপাগেশনের ধাপসমূহ

ইভেন্ট প্রোপাগেশন সাধারণত তিনটি ধাপে কাজ করে:

ক্যাপচারিং ফেজ (Capturing Phase): ইভেন্টটি ডকুমেন্টের রুট থেকে শুরু হয় এবং টার্গেট এলিমেন্টের দিকে যায়।
টার্গেট ফেজ (Target Phase): ইভেন্টটি তার টার্গেট উপাদানে পৌঁছে এবং সেখানে প্রভাবিত হয়।
বুবলিং ফেজ (Bubbling Phase): ইভেন্টটি তার টার্গেট থেকে শুরু করে আবার উপরের দিকে ওঠে, DOM এর রুট পর্যন্ত পৌঁছায়।

৪. ইভেন্ট হ্যান্ডলিং কিভাবে কাজ করে

ইভেন্ট হ্যান্ডলার যোগ করার সময়, আপনি নির্দিষ্ট করতে পারেন যে এটি ক্যাপচারিং ফেজে কাজ করবে কিনা। আপনি যদি addEventListener মেথডের তৃতীয় প্যারামিটার হিসাবে true পাস করেন, তবে ইভেন্টটি ক্যাপচারিং ফেজে হ্যান্ডেল হবে। অন্যথায়, এটি বুবলিং ফেজে হ্যান্ডেল হবে।

document.getElementById("parent").addEventListener("click", function() {
    console.log("Parent clicked");
}, true); // Capturing Phase

document.getElementById("child").addEventListener("click", function() {
    console.log("Child clicked");
}, false); // Bubbling Phase

document.getElementById("button").addEventListener("click", function() {
    console.log("Button clicked");
}); // Default: Bubbling Phase

৫. ইভেন্ট প্রোপাগেশন বন্ধ করা

কিছু পরিস্থিতিতে, আপনি হয়তো চান যে ইভেন্টটি তার বর্তমান ফেজ থেকে আর উপরের বা নিচের দিকে না যায়। আপনি stopPropagation() মেথড ব্যবহার করে এই প্রক্রিয়াটি বন্ধ করতে পারেন। উদাহরণস্বরূপ:

document.getElementById("button").addEventListener("click", function(event) {
    event.stopPropagation(); // Prevents further propagation
    console.log("Button clicked, propagation stopped");
});

৬. প্রয়োজনীয়তা ও ব্যবহার

ইভেন্ট বুবলিং বেশিরভাগ ক্ষেত্রে ডিফল্ট ব্যবহৃত হয় এবং সাধারণ ইন্টারঅ্যাকশনগুলির জন্য উপযোগী।
ইভেন্ট ক্যাপচারিং কিছু বিশেষ পরিস্থিতিতে কাজে আসে, যেমন আপনি যদি চান যে একটি প্যারেন্ট এলিমেন্টের ইভেন্ট আগে হ্যান্ডেল হোক।

৭. Event Bubbling বনাম Event Capturing: পার্থক্য

বৈশিষ্ট্য	Event Bubbling	Event Capturing
প্রোপাগেশনের দিক	Target element থেকে উপরের দিকে, অর্থাৎ parent elements-এর দিকে	Root element থেকে নিচের দিকে, অর্থাৎ child elements-এর দিকে
Default Behavior	Default behavior ইভেন্ট bubbling; ইভেন্ট ক্যাপচারিংের জন্য আলাদাভাবে নির্দিষ্ট করতে হয়	ইভেন্ট capturing হলো non-default behavior, এবং এটি ব্যবহার করার জন্য `addEventListener`-এর তৃতীয় প্যারামিটার `true` করতে হয়
ইভেন্টের প্রভাব	ইভেন্ট টার্গেট element থেকে শুরু হয় এবং এরপর parent elements পর্যন্ত পৌঁছে	ইভেন্ট root থেকে শুরু হয় এবং target element পর্যন্ত পৌঁছে
ব্যবহারিক উদাহরণ	সাধারণত অনেক ইভেন্ট bubbling এর মাধ্যমে হ্যান্ডল করা হয়	কিছু বিশেষ ক্ষেত্রে capturing প্রয়োজন হতে পারে, যেমন ডিফল্ট bubbling behavior কে bypass করার জন্য

উপসংহার

ইভেন্ট প্রোপাগেশন হলো একটি গুরুত্বপূর্ণ ধারণা যা DOM ইভেন্ট হ্যান্ডলিংয়ের ক্ষেত্রে প্রায়ই ব্যবহার করা হয়। ইভেন্ট bubbling এবং capturing এই প্রোপাগেশনের দুইটি ধাপ, যেখানে ইভেন্টটি DOM ট্রি-তে কিভাবে ছড়াবে তা নির্ধারণ করা হয়। ডিফল্টভাবে ইভেন্ট bubbling হয়, তবে আপনি প্রয়োজন অনুযায়ী capturing ব্যবহার করতে পারেন। ইভেন্ট propagation থামানোর জন্য stopPropagation() ব্যবহার করা হয়, এবং এটি আপনার ইভেন্ট হ্যান্ডলিংয়ের সময় অপ্রত্যাশিত প্রভাব রোধ করতে সাহায্য করতে পারে।

এই প্রক্রিয়াগুলি আপনাকে জটিল ইন্টারফেসের ইভেন্ট ম্যানেজমেন্টে উন্নত নিয়ন্ত্রণ দেয় এবং কোডকে পরিষ্কার ও সুসংগঠিত রাখতে সহায়তা করে।

React Props Explained with Examples

RSM Academy BD — Wed, 18 Sep 2024 15:54:56 +0000

React JS Props নিয়ে বিস্তারিত আলোচনা করতে পারবেন?

React props নিয়ে বিস্তারিত আলোচনা করার আগে, React-এর মূল ধারণা এবং props এর ভূমিকা সম্পর্কে একটু ধারণা নিই।

React Props কী?

React props (Properties) হচ্ছে এমন এক ধরনের data যা component গুলোর মধ্যে পাস করা হয়। এক component থেকে আরেক component এ data পাঠানোর জন্য props ব্যবহার করা হয়। এটি function-এর argument-এর মত কাজ করে। যখন একটি component তার parent component থেকে data পায়, তখন এই data গুলোকে props বলা হয়।

Props-এর বৈশিষ্ট্য

Read-Only: Props হলো read-only, অর্থাৎ props-কে পরিবর্তন করা যায় না। এদের value immutable, এটি শুধুমাত্র parent component থেকেই পাস করা যেতে পারে।
Unidirectional Data Flow: Props-এর data flow একমুখী, অর্থাৎ data শুধু parent component থেকে child component এ যায়। Child component থেকে parent component এ data পাঠানো যায় না।
Dynamic Data Transfer: Props-এর মাধ্যমে ডাইনামিক্যালি ডাটা component এ পাঠানো যায়।

Props কিভাবে কাজ করে?

ধরুন আমাদের একটি parent component আছে এবং আমরা চাচ্ছি যে কিছু data child component এ পাঠাতে। আমরা props ব্যবহার করে এই কাজটি করতে পারি। নিচের উদাহরণে এটি দেখানো হলো:

উদাহরণ

প্রথমে একটি parent component তৈরি করি যেটি child component এ কিছু data পাঠাবে।

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Hello from Parent!";

  return (
    <div>
      <h1>This is the Parent Component</h1>
      <ChildComponent msg={message} />
    </div>
  );
}

export default ParentComponent;

এখানে, ParentComponent এ আমরা একটি string message তৈরি করেছি এবং এটি ChildComponent-এ msg props হিসেবে পাঠিয়েছি।

এখন ChildComponent তৈরি করি যেটি এই props ব্যবহার করবে।

// ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <h2>This is the Child Component</h2>
      <p>{props.msg}</p>
    </div>
  );
}

export default ChildComponent;

এখানে, ChildComponent এ আমরা props parameter গ্রহণ করেছি এবং props.msg এর মাধ্যমে parent component থেকে পাঠানো data access করেছি।

Props এর আরও কাজ (Best Practice)

React-এ props কাজ করে HTML attributes এর মতো। আপনি যখন একটি কম্পোনেন্টে props পাস করবেন, তখন তা attributes হিসাবে উল্লেখ করতে হবে।

উদাহরণ:

Copy code
// Parent component
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <div>
      <ChildComponent name="John" age={25} />
    </div>
  );
}

export default ParentComponent;
jsx
Copy code
// Child component
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Age: {props.age}</p>
    </div>
  );
}

export default ChildComponent;

ব্যাখ্যা:

ParentComponent এ name এবং age এর মান পাঠানো হয়েছে ChildComponent এর কাছে।
ChildComponent এ props ব্যবহার করে সেই মানগুলো প্রদর্শিত হয়েছে।

Props ব্যবহারের উপকারিতা

Component Reusability: Props ব্যবহার করে component গুলোকে reusable করা যায়, কারণ একবার component তৈরি করে বিভিন্ন data পাঠিয়ে তা বিভিন্নভাবে ব্যবহার করা যায়।
Cleaner Code: Props ব্যবহারের ফলে code clean এবং structured হয়।
Separation of Concerns: Component গুলোর কাজের সীমা নির্ধারণ করে দেওয়া যায়। অর্থাৎ, এক component এর কাজ অন্য component এ প্রভাব ফেলে না।

Props Validation

React-এ props validation করার জন্য propTypes ব্যবহার করা যায়। এটি component এ পাস হওয়া props গুলোর ধরন চেক করে।

import React from 'react';
import PropTypes from 'prop-types';

function ChildComponent(props) {
  return (
    <div>
      <h2>This is the Child Component</h2>
      <p>{props.msg}</p>
    </div>
  );
}

ChildComponent.propTypes = {
  msg: PropTypes.string.isRequired,
};

export default ChildComponent;

এখানে, আমরা propTypes ব্যবহার করে বলেছি যে msg props অবশ্যই একটি string হতে হবে এবং এটি অবশ্যই প্রয়োজনীয়।

আরো কিছু উদাহরণঃ-

Destructuring Props

Props কে সরাসরি destructure করে সহজভাবে ব্যবহার করা যায়:

jsx
Copy code
function ChildComponent({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Age: {age}</p>
    </div>
  );
}

Default Props

আপনি defaultProps ব্যবহার করে props এর ডিফল্ট মান সেট করতে পারেন:

jsx
Copy code
function ChildComponent({ name = "Guest", age = 18 }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Age: {age}</p>
    </div>
  );
}

PropTypes

React কম্পোনেন্টে কোন ধরনের props পাস হবে তা যাচাই করার জন্য PropTypes ব্যবহার করা হয়:

jsx
Copy code
import PropTypes from 'prop-types';

function ChildComponent({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Age: {age}</p>
    </div>
  );
}

ChildComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired
};

উপসংহার

React props হচ্ছে এমন একটি মেকানিজম যা component গুলোর মধ্যে data পাঠানোর জন্য ব্যবহার করা হয়। এটি component গুলোর মধ্যে data flow সহজ করে এবং component গুলোর reusability বাড়ায়। Props এর data গুলো immutable, অর্থাৎ এগুলোকে পরিবর্তন করা যায় না। Props validation এর মাধ্যমে আমরা নিশ্চিত করতে পারি যে, আমাদের component এ সঠিক data পাঠানো হচ্ছে।

Install React Router Dom With Tailwind CSS

RSM Academy BD — Tue, 17 Sep 2024 06:05:54 +0000

Promo:

Install Tailwind CSS with Create React App

1. Create your project

Start by creating a new React project with Create React App v5.0+ if you don't have one already set up.

Open Terminal



npx create-react-app my-project
cd my-project

2. Install Tailwind CSS

Install tailwindcss via npm, and then run the init command to generate your tailwind.config.js file.



npm install -D tailwindcss
npx tailwindcss init

3. Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.



/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

4. Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.



@tailwind base;
@tailwind components;
@tailwind utilities;

5. Start your build process

Run your build process with npm run start.



npm run start

6. Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.



export default function App() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}

7. Add React Router

To add React Router in your application, run this in the terminal from the root directory of the application:



npm i -D react-router-dom@latest

8. Folder Structure

-To create an application with multiple page routes, let's first start with the file structure.

-Within the src folder, we'll create a folder named pages with several files:

src\pages:

NavBAr.jsx
Home.jsx
Blogs.jsx
Contact.jsx
NoPage.jsx etc [Your components/page name] Each file will contain a very basic React component.

9. Basic Usage

Now we will use our BrowserRouter in our index.js file.



import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

We wrap our content first with .



import { BrowserRouter } from "react-router-dom";
<BrowserRouter>
<App />
</BrowserRouter>

10. Now we will use our Router in our app.js file.



import { Route, Routes } from "react-router-dom";
import GovtJob from "./pages/GovtJob";

import PrivetJob from "./pages/PrivetJob";

import TeacherJob from "./pages/TeacherJob";
import ItJob from "./pages/ItJob";
import Home from "./components/Home";
import NavBar from "./components/NavBar";
import Contact from "./components/Contact";
import Blogs from "./components/Blogs";
import About from "./components/About";

function App() {
  return (
    <div className="max-w-screen-lg mx-auto">
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/govtJob" element={<GovtJob />} />
        <Route path="/privetJob" element={<PrivetJob />} />
        <Route path="/teacherJob" element={<TeacherJob />} />
        <Route path="/itJob" element={<ItJob />} />
        {/* ============================================= */}
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="blogs" element={<Blogs />} />
      </Routes>
    </div>
  );
}

export default App;

Example Explained

We define our . An application can have multiple . Our basic example only uses one.
s can be nested. The first has a path of / and renders the Layout component.
The nested s inherit and add to the parent route. So the blogs path is combined with the parent and becomes /blogs.
The Home component route does not have a path but has an index attribute. That specifies this route as the default route for the parent route, which is /.
Setting the path to * will act as a catch-all for any undefined URLs. This is great for a 404 error page.

Pages / Components

The NavBar component has and elements.
The renders the current route selected.
is used to set the URL and keep track of browsing history.
Anytime we link to an internal path, we will use instead of .
The "NavBar route" is a shared component that inserts common content on all pages, such as a navigation menu.



import React from "react";
import { Outlet, Link } from "react-router-dom";
const NavBar = () => {
  return (
    <div>
      <ul className="flex justify-center items-center gap-10 text-2xl pb-10">
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>

        <li>
          <Link to="/contact">Contact</Link>
        </li>
        <li>
          <Link to="/blogs">Blogs</Link>
        </li>
      </ul>
      <Outlet />
    </div>
  );
};

export default NavBar;

Make other page/components

Nested Routher

Home Page



import React from "react";
import { Link } from "react-router-dom";
const Home = () => {
  return (
    <div>
      <h1 className="text-red-500 underline text-3xl text-center">
        Home Page{" "}
      </h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam et
        voluptate rerum eaque adipisci soluta placeat ad temporibus, laborum
        recusandae quas! Possimus eaque mollitia enim iste neque placeat omnis
        veritatis.
      </p>

      <ul className="flex justify-center items-center gap-10 text-2xl pb-10 text-green-500">
        <li>
          <Link to="/govtJob">Govt Job</Link>
        </li>
        <li>
          <Link to="/privetJob">Privet Job</Link>
        </li>
        <li>
          <Link to="/teacherjob">Teacher Job</Link>
        </li>
        <li>
          <Link to="/itJob">IT Job</Link>
        </li>
      </ul>

JavaScript Event Delegation সম্পর্কে বিস্তাতিত আলোচনা

RSM Academy BD — Tue, 17 Sep 2024 06:00:15 +0000

একটি পেশাদার HTML ফর্ম তৈরির জন্য আমরা ইমেজ এবং অপশন ইনপুট যুক্ত করবো, অতিরিক্ত রেডিও বাটন যোগ করবো, এবং ফর্মের সব ইনপুটকে বৈধ করতে পারবো। সবকিছুই বিশদভাবে বিশ্লেষণ করা হবে। এখানে একটি সম্পূর্ণ কোড উদাহরণসহ বিশ্লেষণ দেওয়া হলো।

পূর্ণ HTML এবং JavaScript কোড

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Form</title>
    <style>
        /* CSS স্টাইলিং */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        form {
            max-width: 600px;
            margin: auto;
        }
        label {
            display: block;
            margin: 10px 0 5px;
        }
        input, select, button {
            display: block;
            margin: 5px 0 15px;
            padding: 10px;
            width: 100%;
        }
        img {
            max-width: 200px;
            margin-top: 10px;
        }
        .output-container {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <form id="userForm">
        <!-- টেক্সট ইনপুট -->
        <label for="text">Text:</label>
        <input type="text" id="text" name="text" required>

        <!-- ইমেইল ইনপুট -->
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <!-- পাসওয়ার্ড ইনপুট -->
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required minlength="6">

        <!-- নাম্বার ইনপুট -->
        <label for="number">Number:</label>
        <input type="number" id="number" name="number" min="0" max="100" required>

        <!-- ডেট ইনপুট -->
        <label for="date">Date:</label>
        <input type="date" id="date" name="date" required>

        <!-- কালার ইনপুট -->
        <label for="color">Color:</label>
        <input type="color" id="color" name="color">

        <!-- চেকবক্স ইনপুট -->
        <label>Choose your skills:</label>
        <input type="checkbox" id="skill1" name="skills" value="HTML">
        <label for="skill1">HTML</label>
        <input type="checkbox" id="skill2" name="skills" value="CSS">
        <label for="skill2">CSS</label>
        <input type="checkbox" id="skill3" name="skills" value="JavaScript">
        <label for="skill3">JavaScript</label>
        <input type="checkbox" id="skill4" name="skills" value="React">
        <label for="skill4">React</label>
        <input type="checkbox" id="skill5" name="skills" value="Node.js">
        <label for="skill5">Node.js</label>

        <!-- অপশন ইনপুট -->
        <label for="options">Select an option:</label>
        <select id="options" name="options" required>
            <option value="" disabled selected>Select an option</option>
            <option value="Option1">Option 1</option>
            <option value="Option2">Option 2</option>
            <option value="Option3">Option 3</option>
        </select>

        <!-- অতিরিক্ত রেডিও ইনপুট -->
        <label>Choose an option:</label>
        <input type="radio" id="radio1" name="radio" value="1" required>
        <label for="radio1">Option 1</label>
        <input type="radio" id="radio2" name="radio" value="2">
        <label for="radio2">Option 2</label>
        <input type="radio" id="radio3" name="radio" value="3">
        <label for="radio3">Option 3</label>

        <!-- রেঞ্জ ইনপুট -->
        <label for="range">Range:</label>
        <input type="range" id="range" name="range" min="0" max="100" value="50">

        <!-- ফাইল ইনপুট -->
        <label for="file">Upload an image:</label>
        <input type="file" id="file" name="file" accept="image/*">

        <!-- সাবমিট বাটন -->
        <button type="submit">Submit</button>
    </form>

    <!-- আউটপুট প্রদর্শনের জন্য একটি ডিভ -->
    <div id="output" class="output-container"></div>

    <!-- JavaScript ফাইল অন্তর্ভুক্ত -->
    <script src="script.js"></script>
</body>
</html>

// script.js

document.getElementById("userForm").addEventListener("submit", function(event) {
    event.preventDefault(); // ফর্ম সাবমিট হওয়া বন্ধ করে

    // ফর্ম ডাটাগুলো সংগ্রহ করা
    const text = document.getElementById("text").value;
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const number = document.getElementById("number").value;
    const date = document.getElementById("date").value;
    const color = document.getElementById("color").value;

    // চেকবক্স থেকে মান সংগ্রহ করা
    const checkboxes = document.querySelectorAll('input[name="skills"]:checked');
    let selectedSkills = [];
    checkboxes.forEach((checkbox) => {
        selectedSkills.push(checkbox.value);
    });

    // অপশন থেকে মান সংগ্রহ করা
    const option = document.getElementById("options").value;

    // রেডিও ইনপুট থেকে মান সংগ্রহ করা
    const radio = document.querySelector('input[name="radio"]:checked').value;

    // রেঞ্জ ইনপুট থেকে মান সংগ্রহ করা
    const range = document.getElementById("range").value;

    // ফাইল ইনপুট থেকে ফাইল সংগ্রহ করা
    const fileInput = document.getElementById("file");
    const file = fileInput.files[0];

    // ফর্ম ডাটা প্রদর্শন করা
    let output = `
        <h3>Form Data:</h3>
        <p><strong>Text:</strong> ${text}</p>
        <p><strong>Email:</strong> ${email}</p>
        <p><strong>Password:</strong> ${password}</p>
        <p><strong>Number:</strong> ${number}</p>
        <p><strong>Date:</strong> ${date}</p>
        <p><strong>Color:</strong> ${color}</p>
        <p><strong>Selected Skills:</strong> ${selectedSkills.join(", ")}</p>
        <p><strong>Selected Option:</strong> ${option}</p>
        <p><strong>Radio Selection:</strong> ${radio}</p>
        <p><strong>Range:</strong> ${range}</p>
        <p><strong>File Name:</strong> ${file ? file.name : "No file selected"}</p>
    `;

    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            output += `<img src="${e.target.result}" alt="Uploaded Image">`;
            document.getElementById("output").innerHTML = output;
        };
        reader.readAsDataURL(file);
    } else {
        document.getElementById("output").innerHTML = output;
    }
});

বিশ্লেষণ

HTML কোডের বিশ্লেষণ

Text, Email, Password, Number, Date, Color Inputs:
- <input>: ইনপুট ফিল্ডগুলো বিভিন্ন ধরনের ডাটা ইনপুট নেওয়ার জন্য ব্যবহৃত হয়েছে।
- required: ইনপুট ফিল্ডগুলো পূরণ করা বাধ্যতামূলক।
- minlength, min, max: ভ্যালিডেশন নিয়ম।
Checkboxes:
- <input type="checkbox">: ব্যবহারকারীর বিভিন্ন বিকল্প নির্বাচন করতে দেয়। প্রতিটি চেকবক্সের জন্য একটি লেবেলও যুক্ত করা হয়েছে।
Select Input:
- <select>: একটি ড্রপডাউন মেনু দিয়ে অপশন নির্বাচন করতে দেয়। প্রথম অপশনটি ডিফল্টভাবে সিলেক্টেড ও ডিসেবলড।
Radio Buttons:
- <input type="radio">: একাধিক বিকল্পের মধ্যে একটিকে নির্বাচন করতে দেয়। required ব্যবহার করে নিশ্চিত করা হয়েছে যে একটি বিকল্প অবশ্যই নির্বাচন করতে হবে।
Range Input:
- <input type="range">: একটি নির্দিষ্ট পরিসরের মধ্যে মান নির্বাচন করতে দেয়।
File Input:
- <input type="file">: ব্যবহারকারী একটি ইমেজ ফাইল আপলোড করতে পারে। accept="image/*" দিয়ে শুধুমাত্র ইমেজ ফাইল গ্রহণযোগ্য।
Submit Button:
- <button type="submit">: ফর্মের ডাটা সাবমিট করতে ব্যবহৃত হয়।

JavaScript কোডের বিশ্লেষণ

Form Submit Event Listener:
- event.preventDefault(): ফর্ম সাবমিশনকে ব্লক করে, পেজ রিফ্রেশ হওয়ার পরিবর্তে কাস্টম প্রক্রিয়া চালায়।
Collecting Form Data:
- ইনপুট ফিল্ডগুলোর মান .value এর মাধ্যমে সংগ্রহ করা হয়েছে।
Checkbox Values:
- querySelectorAll('input[name="skills"]:checked'): নির্বাচিত চেকবক্স গুলো সংগ্রহ করা হয়েছে এবং .forEach লুপ দিয়ে মান অ্যারে তে যোগ করা হয়েছে।
Select Option Value:
- document.getElementById("options").value: নির্বাচিত অপশন সংগ্রহ করা হয়েছে।
Radio Button Value:
- document.querySelector('input[name="radio"]:checked').value: নির্বাচিত রেডিও বাটনের মান সংগ্রহ করা হয়েছে।
Range Value:
- document.getElementById("range").value: রেঞ্জ ইনপুটের মান সংগ্রহ করা হয়েছে।
File Input:
- document.getElementById("file").files[0]: আপলোড করা প্রথম ফাইলটি সংগ্রহ করা হয়েছে।
- FileReader: ফাইলটি পড়তে এবং ইমেজ হিসেবে প্রদর্শন করতে ব্যবহৃত।
Displaying Form Data:
- innerHTML: সংগ্রহ করা ডাটা HTML আউটপুট হিসেবে প্রদর্শন করা হয়েছে।
- Image Display: ইমেজ ফাইলের নাম এবং ইমেজ ডাটা (base64) আউটপুট হিসেবে দেখানো হয়েছে।

সংক্ষেপে

এই কোডটি একটি পেশাদার HTML ফর্ম তৈরি করে যা বিভিন্ন ধরনের ইনপুট ফিল্ড অন্তর্ভুক্ত করে। JavaScript দিয়ে ফর্ম ডাটাগুলো সংগ্রহ করা হয় এবং প্রদর্শন করা হয়, পাশাপাশি ইমেজ ফাইল থাকলে তা দেখানো হয়। সমস্ত ইনপুট বৈধকরণ এবং প্রক্রিয়া পূর্ণ পেশাদারী মান অনুযায়ী করা হয়েছে।

JavaScript Event Delegation সম্পর্কে বিস্তারিত আলোচনা

RSM Academy BD — Tue, 03 Sep 2024 16:27:04 +0000

ইভেন্ট ডেলিগেশন কী?

ইভেন্ট ডেলিগেশন হলো একটি উন্নত টেকনিক, যা জাভাস্ক্রিপ্টে DOM ইভেন্ট হ্যান্ডলিংকে আরও কার্যকর এবং সহজ করে তোলে। সাধারণত, যখন আমরা একটি ইভেন্ট হ্যান্ডলার অ্যাটাচ করি, তখন তা নির্দিষ্ট একটি DOM element-এর সাথে সরাসরি যুক্ত হয়। কিন্তু যখন অনেকগুলো child elements থাকে, তখন প্রত্যেকটির জন্য আলাদা ইভেন্ট হ্যান্ডলার অ্যাটাচ করা অপ্রয়োজনীয় ও মেমোরি সাশ্রয়ী নয়। এখানে ইভেন্ট ডেলিগেশন কাজে আসে।

ইভেন্ট ডেলিগেশন মূলত "Event Bubbling" মেকানিজমের ওপর ভিত্তি করে কাজ করে। এই মেকানিজমের মাধ্যমে ইভেন্টটি তার ইন্টেন্ডেড টার্গেট থেকে উপরের দিকে (parent elements-এর দিকে) propagate হতে থাকে, যতক্ষণ না তা document-এ পৌঁছে।

Event Bubbling কী?

Event Bubbling এমন একটি প্রক্রিয়া যেখানে একটি ইভেন্ট তার সবচেয়ে inner target element থেকে শুরু হয় এবং ক্রমান্বয়ে তার parent elements পর্যন্ত পৌঁছে। ধরুন, আপনি একটি <button>-এ ক্লিক করলেন যা একটি <div>-এর মধ্যে রয়েছে, এবং সেই <div> আবার একটি <body> ট্যাগের মধ্যে রয়েছে। ক্লিক ইভেন্টটি প্রথমে <button>-এ শুরু হয়, তারপর তা bubbling এর মাধ্যমে <div>, এবং শেষে <body> পর্যন্ত পৌঁছে। এই <button> থেকে <body> পর্যন্ত পৌঁছাই হচ্ছে Event Bubbling ।

ইভেন্ট ডেলিগেশন কীভাবে কাজ করে?

ইভেন্ট ডেলিগেশনকে কাজে লাগিয়ে, আমরা parent element-এ একটি ইভেন্ট লিসেনার অ্যাটাচ করি এবং event bubbling এর মাধ্যমে child elements-এর ইভেন্টগুলোকেও হ্যান্ডল করতে পারি।

যেমন:

একটি সাধারণ লিস্টে ক্লিক ইভেন্ট হ্যান্ডল করা

ধরা যাক, আমার কাছে একটি লিস্ট রয়েছে যেখানে অনেকগুলো li item রয়েছে। প্রতিটি li item-এ ক্লিক করলে একটি মেসেজ প্রদর্শিত হবে।

htmlCopy code
<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const myList = document.getElementById('my-list');

  // ইভেন্ট ডেলিগেশন ব্যবহার করে parent <ul> element-এ ইভেন্ট লিসেনার যোগ করা হলো
  myList.addEventListener('click', (e)=> {
    e.preventDefault();
    // নিশ্চিত করা হচ্ছে যে ক্লিকটি <li> element এ হয়েছে
    if (event.target.tagName === 'LI') {
      alert('You clicked on ' + event.target.textContent);
    }
  });
</script>

এই কোডে, শুধুমাত্র ul element-এ একটি ইভেন্ট লিসেনার যোগ করা হয়েছে। যখনই কোনো li element-এ ক্লিক করা হবে, ইভেন্টটি ul-এ bubble up হবে, এবং আমরা event.target থেকে জানতে পারব যে, ক্লিকটি কোন li element-এ ঘটেছে।

ইভেন্ট ডেলিগেশন কেন প্রয়োজন?

কোড সহজ ও সংক্ষিপ্ত করা: যদি অনেক চাইল্ড এলিমেন্টের উপর ইভেন্ট হ্যান্ডলার যোগ করতে হয়, তবে ইভেন্ট ডেলিগেশন ব্যবহার করলে শুধুমাত্র একটি ইভেন্ট হ্যান্ডলার দিয়েই সবগুলো এলিমেন্টের ইভেন্ট পরিচালনা করা সম্ভব।
পারফরম্যান্স বৃদ্ধি: প্রচুর সংখ্যক ইলিমেন্টের ইভেন্ট হ্যান্ডলার অ্যাসাইন করা ব্রাউজারকে ধীর করে দিতে পারে। কিন্তু ইভেন্ট ডেলিগেশন ব্যবহার করলে একটি ইভেন্ট হ্যান্ডলার পুরো প্যারেন্ট এলিমেন্টকে পরিচালনা করতে পারে, যা ব্রাউজারের কাজ সহজ করে।
ডাইনামিক কন্টেন্ট হ্যান্ডলিং: যখন নতুন এলিমেন্ট ডাইনামিকভাবে অ্যাড করা হয়, তখন আলাদাভাবে ইভেন্ট হ্যান্ডলার অ্যাসাইন করতে হয় না। ইভেন্ট ডেলিগেশন ব্যবহার করলে প্যারেন্ট এলিমেন্টের ইভেন্ট হ্যান্ডলার এমন নতুন এলিমেন্টগুলোর ইভেন্টও হ্যান্ডল করতে পারে।

ধরা যাক, উপরের উদাহরণে আমরা DOM-এ নতুন li item যোগ করব এবং তাদের ক্লিক ইভেন্ট হ্যান্ডল করব।

htmlCopy code
<button id="add-item">Add Item</button>
<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<script>
  const myList = document.getElementById('my-list');
  const addItemButton = document.getElementById('add-item');

  let itemCount = 2;

  addItemButton.addEventListener('click', (e)=>{
    e.preventDefault();
    itemCount++;
    const newItem = document.createElement('li');
    newItem.textContent = 'Item ' + itemCount;
    myList.appendChild(newItem);
  });

  myList.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      alert('You clicked on ' + event.target.textContent);
    }
  });
</script>

এখানে, আমরা একটি নতুন li item যোগ করার জন্য একটি বাটন যুক্ত করেছি। যখনই একটি নতুন item যোগ করা হবে, সেই item-এ ক্লিক করলে ul element-এ অ্যাটাচ করা ইভেন্ট লিসেনার তার ক্লিক ইভেন্টটি হ্যান্ডল করবে, এবং একটি মেসেজ দেখাবে।

ইভেন্ট ডেলিগেশন ছাড়া একই কাজ করা হলে কী সমস্যা হতো?

htmlCopy code
<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<script>
  // প্রত্যেকটি <li> element এ আলাদাভাবে ইভেন্ট লিসেনার যোগ করা হচ্ছে
  const items = document.querySelectorAll('#my-list li');
  items.forEach(function(item) {
    item.addEventListener('click', function() {
      alert('You clicked on ' + item.textContent);
    });
  });
</script>

এই কোডে, প্রত্যেকটি li item-এ আলাদাভাবে ইভেন্ট লিসেনার যোগ করা হচ্ছে। কিন্তু এই পদ্ধতি বেশি মেমোরি ব্যবহার করে এবং যদি নতুন li item যোগ করা হয়, তখন সেই item-এ আলাদাভাবে ইভেন্ট লিসেনার অ্যাটাচ করতে হবে। ইভেন্ট ডেলিগেশন এই সমস্যাগুলো দূর করতে পারে।

উপসংহার

ইভেন্ট ডেলিগেশন একটি শক্তিশালী এবং কার্যকর টেকনিক যা আপনাকে জাভাস্ক্রিপ্টে DOM ইভেন্ট ম্যানেজমেন্টের ক্ষেত্রে সহজ, পরিষ্কার, এবং মেমোরি সাশ্রয়ী কোড লিখতে সাহায্য করে। এটি parent elements-এর ইভেন্ট লিসেনার ব্যবহার করে child elements-এর ইভেন্টগুলোকে হ্যান্ডল করার মাধ্যমে ডাইনামিক কনটেন্ট ম্যানেজমেন্টকেও সহজ করে তোলে।

DEV Community: RSM Academy BD

React ফান্ডামেন্টাল প্রশ্ন ও উত্তর

1. React কি?

2. React-এর মূল বৈশিষ্ট্য কী কী?

3. JSX কী? এটি কেন ব্যবহার করা হয়?

4. Component কত প্রকার ও কী কী?

5. Props কী?

6. State কী?

7. State এবং Props-এর মধ্যে পার্থক্য কী?

8. Virtual DOM কী এবং এটি কীভাবে কাজ করে?

9. React Hook কী?

10. React Router কী?

11. React Lifecycle Method কী?

12. useEffect কী?

13. Redux কী এবং কেন ব্যবহার করা হয়?

14. React Performance অপটিমাইজ করার জন্য কী কী পদ্ধতি আছে?

15. React Context API কী?

Redux Middleware সম্পর্কে বিস্তারিত আলোচনা

Redux Middleware কী?

Middleware-এর কাজ করার ধরণ

Middleware ব্যবহার করার সুবিধা

Middleware তৈরির ফর্ম্যাট

Redux-এ Middleware যোগ করা

উদাহরণ:

Redux Middleware-এর জনপ্রিয় উদাহরণ

Middleware ব্যবহারের গুরুত্বপূর্ণ বিষয়

Describing the React UI

React First Component সম্পর্কে বিস্তারিত আলোচনা

1. Component কী?

2. React Functional Component তৈরি করা

উদাহরণ: First Functional Component

3. Component Rendering

4. JSX (JavaScript XML) ব্যবহার করে UI তৈরি

5. Props (Properties) দিয়ে Data Passing

উদাহরণ: Props ব্যবহার করে Data Passing

6. CSS Style সংযুক্ত করা

উদাহরণ: Inline Style

7. Component Composition

উদাহরণ: Component Composition

উপসংহার

Source:- https://react.dev/learn/your-first-component

Importing and Exporting Components সম্পর্কে বিস্তারিত আলোচনা

1. Exporting Components

1. Exporting Components

(i) Named Export

(ii) Default Export

2. Importing Components

(i) Named Import

(ii) Default Import

3. Named এবং Default Export একসাথে ব্যবহার করা

4. Alias ব্যবহার করে Import

5. প্রচলিত ভুল এবং সতর্কতা

উপসংহার

Source:- https://react.dev/learn/importing-and-exporting-components

Writing Markup with JSX সম্পর্কে বিস্তারিত আলোচনা

1. JSX কী?

উদাহরণ:

2. JSX ব্যবহার করার সুবিধা

3. JSX-এর Regular Syntax Rules

(i) Parent Element থাকা আবশ্যক

(ii) Self-Closing Tags

(iii) JavaScript Expressions ব্যবহার

4. JSX এ Style এবং CSS ক্লাস যুক্ত করা

(i) Inline Style

(ii) className ব্যবহার

5. JavaScript Expressions এবং Statements

(i) Ternary Operator

(ii) Map ব্যবহার করে Loop করা

6. Fragments ব্যবহার

7. JSX কোডকে JavaScript কোডে রূপান্তরিত করা

8. JSX এর সুবিধা এবং সীমাবদ্ধতা

উপসংহার

Source:- https://react.dev/learn/writing-markup-with-jsx

JavaScript in JSX with Curly Braces সম্পর্কে বিস্তারিত আলোচনা

1. Curly Braces {} এর ব্যবহার কীভাবে কাজ করে?

উদাহরণ:

2. JavaScript Expressions vs. Statements

উদাহরণ:

3. Variables ও Object Properties ব্যবহার

উদাহরণ:

1. Curly Braces `{}` এর ব্যবহার কীভাবে কাজ করে?

8. Inline Styling `{}` এর মাধ্যমে CSS ব্যবহার

1. `if` statement দিয়ে Conditional Rendering

2. `ternary` operator দিয়ে Conditional Rendering

4. `switch` case দিয়ে Conditional Rendering

2. `key` প্রপস এর গুরুত্ব

6. `Fragment` ব্যবহার করে লিস্ট রেন্ডার করা

8. `reduce()` মেথড ব্যবহার করে কাস্টম লিস্ট রেন্ডারিং