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

React-এ import এবং export মেকানিজমের মাধ্যমে বিভিন্ন component এক ফাইল থেকে আরেক ফাইলে ব্যবহার করা যায়। এটি একটি প্রোজেক্টকে মডিউলার এবং পুনঃব্যবহারযোগ্য রাখে। React-এ import এবং 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 থাকা আবশ্যক, যদিও এটি ফ্র্যাগমেন্ট দিয়ে সমাধানযোগ্য।

💡

1. JSX এ HTML এর মতো সিনট্যাক্স ব্যবহার করা হয় যা জাভাস্ক্রিপ্টের ভেতরে লেখা হয়।
2. { } চিহ্নের মধ্যে জাভাস্ক্রিপ্ট এক্সপ্রেশন ব্যবহার করা যায়।
3. className ব্যবহার করে CSS ক্লাস অ্যাসাইন করা হয়।
4. স্টাইল যোগ করতে style অ্যাট্রিবিউটের মান হিসেবে অবজেক্ট ব্যবহার করতে হয়।
5. ফ্র্যাগমেন্ট, লিস্ট এবং কন্ডিশনাল রেন্ডারিং 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! বার্তা দেখাবে।

সংক্ষেপে:

1. if-else statement : একাধিক শর্তের জন্য সাধারণত ব্যবহৃত।
2. ternary operator : সাধারণত সহজ এবং ইনলাইন শর্তের জন্য ব্যবহৃত।
3. && operator : একক শর্তে কন্ডিশনাল রেন্ডারিং এর জন্য খুবই সহায়ক।
4. switch-case : একাধিক নির্দিষ্ট কেস রেন্ডারিং এর জন্য।
5. কন্ডিশনাল স্টাইলিং এবং ক্লাস প্রয়োগ : ডাইনামিক সিএসএস প্রয়োগে সহায়ক।
6. 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