React Components

ReactJS-এর কম্পোনেন্টস হল অ্যাপ্লিকেশনের পুনঃব্যবহারযোগ্য, স্বতন্ত্র অংশ। প্রতিটি React কম্পোনেন্ট একটি নির্দিষ্ট UI (User Interface) তৈরি করে এবং এর মধ্যে থাকা লজিক, স্টেট (State), এবং প্রপস (Props) দ্বারা অন্যান্য কম্পোনেন্টের সাথে ইন্টারঅ্যাক্ট করে। React অ্যাপ্লিকেশন তৈরি করতে, কম্পোনেন্টগুলো একটি মৌলিক উপাদান হিসেবে ব্যবহৃত হয়।

React কম্পোনেন্ট কি?

React কম্পোনেন্ট হল একটি সেগমেন্ট বা একক অংশ যা UI-র একটি নির্দিষ্ট অংশকে রেন্ডার করে এবং এই অংশটির মধ্যে লজিক থাকে। React-এ দুটি ধরনের কম্পোনেন্ট থাকে:

1. Functional Components (ফাংশনাল কম্পোনেন্ট)
2. Class Components (ক্লাস কম্পোনেন্ট)

১. Functional Components (ফাংশনাল কম্পোনেন্ট)

ফাংশনাল কম্পোনেন্টগুলো React 16.8-এর পর থেকে অধিক ব্যবহৃত হয়ে উঠেছে, কারণ এতে সরল সিনট্যাক্স এবং হুকস (Hooks) ব্যবহার করা যায়। ফাংশনাল কম্পোনেন্টে শুধুমাত্র একটি ফাংশন থাকে যা JSX রিটার্ন করে।

উদাহরণ:

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

const element = <Welcome name="John" />;

এখানে Welcome একটি ফাংশনাল কম্পোনেন্ট যা props ব্যবহার করে ইনপুট হিসেবে ডেটা নেয় এবং একটি HTML ট্যাগ রিটার্ন করে।

ফাংশনাল কম্পোনেন্টের বৈশিষ্ট্য:

• সহজ সিনট্যাক্স
• ডেটা পাস করার জন্য props ব্যবহার করা হয়
• React Hooks এর সাহায্যে স্টেট এবং অন্যান্য React ফিচার ব্যবহার করা যায়

২. Class Components (ক্লাস কম্পোনেন্ট)

ক্লাস কম্পোনেন্ট React-এ আরও পুরনো পদ্ধতি, যা একটি ES6 ক্লাস ব্যবহার করে তৈরি হয়। ক্লাস কম্পোনেন্টে render() মেথড থাকে যা JSX রিটার্ন করে এবং স্টেট এবং লাইফ সাইকেল মেথড ব্যবহার করা যায়।

উদাহরণ:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

const element = <Welcome name="John" />;

এখানে Welcome একটি ক্লাস কম্পোনেন্ট যা this.props ব্যবহার করে ইনপুট হিসেবে ডেটা নেয় এবং একটি HTML ট্যাগ রিটার্ন করে।

ক্লাস কম্পোনেন্টের বৈশিষ্ট্য:

• স্টেট এবং লাইফ সাইকেল মেথড ব্যবহার করা যায়
• render() মেথডে JSX রিটার্ন হয়
• this.props ব্যবহার করে ডেটা পাস করা হয়

React কম্পোনেন্টে Props

React কম্পোনেন্টে Props (Properties) হল এমন একটি উপায়, যার মাধ্যমে প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাঠানো হয়। Props মূলত Immutable (পরিবর্তনীয় নয়), এবং এটি কম্পোনেন্টে ইনপুট হিসেবে কাজ করে।

উদাহরণ:

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

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

এখানে App কম্পোনেন্ট Greeting কম্পোনেন্টে name নামে একটি prop পাস করেছে।

React কম্পোনেন্টে State

State হল React কম্পোনেন্টের একটি মিউটেবল (পরিবর্তনযোগ্য) অংশ যা UI এর ডায়নামিক অংশ নিয়ন্ত্রণ করে। যখন স্টেট পরিবর্তিত হয়, তখন কম্পোনেন্টটি রি-রেন্ডার হয়, যার ফলে UI আপডেট হয়।

উদাহরণ:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

এখানে, Counter কম্পোনেন্টের মধ্যে একটি স্টেট রয়েছে যার নাম count, এবং increment ফাংশনটি স্টেট পরিবর্তন করতে ব্যবহৃত হয়।

React কম্পোনেন্টের Lifecycle Methods

React ক্লাস কম্পোনেন্টে বিভিন্ন Lifecycle Methods থাকে, যা কম্পোনেন্টের জীবনের বিভিন্ন পর্যায়ে কার্যকরী হয়, যেমন: componentDidMount(), componentDidUpdate(), এবং componentWillUnmount()।

উদাহরণ:

class MyComponent extends React.Component {
  componentDidMount() {
    console.log("Component Mounted");
  }

  componentWillUnmount() {
    console.log("Component Unmounted");
  }

  render() {
    return <h1>Hello, Lifecycle!</h1>;
  }
}

এখানে componentDidMount() মেথডটি কম্পোনেন্ট মাউন্ট হওয়ার পর কল হয় এবং componentWillUnmount() মেথডটি কম্পোনেন্ট আনমাউন্ট হওয়ার আগে কল হয়।

React Hooks (ফাংশনাল কম্পোনেন্টে State এবং Lifecycle ব্যবহারের পদ্ধতি)

React 16.8 থেকে ফাংশনাল কম্পোনেন্টে স্টেট এবং লাইফ সাইকেল মেথড ব্যবহার করতে React Hooks যোগ করা হয়েছে। এর মাধ্যমে ফাংশনাল কম্পোনেন্টেও useState, useEffect ইত্যাদি ফিচার ব্যবহার করা যায়।

উদাহরণ:

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

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

  useEffect(() => {
    const interval = setInterval(() => setCount(count + 1), 1000);
    return () => clearInterval(interval);
  }, [count]);

  return <h1>Count: {count}</h1>;
}

এখানে useState হুকটি স্টেট পরিবর্তন করতে এবং useEffect হুকটি লাইফ সাইকেল মেথডের মতো কাজ করে।

React কম্পোনেন্টের উপকারিতা

• পুনঃব্যবহারযোগ্যতা: একবার তৈরি করা কম্পোনেন্ট বিভিন্ন জায়গায় পুনরায় ব্যবহার করা যায়।
• একক দায়িত্বের নীতি (Single Responsibility Principle): প্রতিটি কম্পোনেন্ট একটি নির্দিষ্ট কাজ করে, যা কোডকে সিম্পল এবং মেইনটেনেবল করে।
• ডায়নামিক UI: স্টেট এবং প্রপস ব্যবহার করে ডায়নামিক কন্টেন্ট তৈরি করা যায়, যা UI কে ইন্টারেক্টিভ এবং ফ্লেক্সিবল করে তোলে।
• ফাংশনাল কোডিং: ফাংশনাল কম্পোনেন্টের মাধ্যমে সরল এবং কোড কমপ্লেক্সিটি কম রাখা যায়।

React কম্পোনেন্ট হল React অ্যাপ্লিকেশনের একটি মূল উপাদান। এগুলো কোডের পুনঃব্যবহারযোগ্যতা, মেইনটেনেবলতা এবং ডায়নামিক কন্টেন্ট তৈরি করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।

Component কী?

ReactJS-এ Component হল UI (User Interface) এর একটি মৌলিক বিল্ডিং ব্লক। এটি একটি স্বতন্ত্র, পুনঃব্যবহারযোগ্য কোড ব্লক যা একটি নির্দিষ্ট অংশের UI এবং তার লজিক (logic) ধারণ করে। একটি কম্পোনেন্ট সাধারণত HTML (JSX), CSS এবং JavaScript এর সমন্বয়ে গঠিত হয়, যা UI রেন্ডারিং এবং ব্যবহারকারী ইনপুট প্রক্রিয়া নিয়ন্ত্রণ করে।

ReactJS অ্যাপ্লিকেশনে দুটি ধরনের কম্পোনেন্ট থাকে:

1. Functional Component: শুধুমাত্র UI রেন্ডার করার জন্য ব্যবহৃত একটি ফাংশনাল কম্পোনেন্ট।
2. Class Component: React কম্পোনেন্টের ক্লাসের মাধ্যমে লেখা হয় এবং এতে আরও কিছু ফিচার যেমন স্টেট (state) এবং লাইফসাইকেল মেথড থাকে।

Functional Component উদাহরণ:

const Greeting = () => {
  return <h1>Hello, World!</h1>;
};

Class Component উদাহরণ:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

Component এর গুরুত্ব

১. পুনঃব্যবহারযোগ্যতা

React কম্পোনেন্টের সবচেয়ে বড় সুবিধা হল তাদের পুনঃব্যবহারযোগ্যতা। একবার একটি কম্পোনেন্ট তৈরি করলে, আপনি সেটি অ্যাপের বিভিন্ন স্থানে ব্যবহার করতে পারেন। এটি ডেভেলপমেন্টের সময় সংরক্ষণ করে এবং কোড রিপিটিশন কমায়।

উদাহরণস্বরূপ, যদি আপনি একটি বাটন কম্পোনেন্ট তৈরি করেন, তবে এটি একাধিক স্থানে ব্যবহার করা সম্ভব:

const Button = ({ label }) => {
  return <button>{label}</button>;
};

এখানে Button কম্পোনেন্টটি যেকোনো লেবেল দিয়ে ব্যবহার করা যাবে:

<Button label="Click Me" />
<Button label="Submit" />

২. UI এর বিভাজন এবং সংগঠন

কম্পোনেন্ট ব্যবহার করে অ্যাপ্লিকেশনের UI কে ছোট ছোট অংশে বিভক্ত করা যায়, যা কোডের সংগঠন এবং মেইন্টেনেন্স অনেক সহজ করে তোলে। একে "কম্পোনেন্ট ভিত্তিক আর্কিটেকচার" বলা হয়, যেখানে প্রতিটি কম্পোনেন্ট একটি নির্দিষ্ট UI অংশের জন্য দায়ী থাকে।

উদাহরণস্বরূপ, একটি অ্যাপের বিভিন্ন অংশ যেমন হেডার, ফুটার, এবং কন্টেন্ট অঞ্চল পৃথক পৃথক কম্পোনেন্টের মাধ্যমে তৈরি করা যায়:

const Header = () => <h1>Welcome to My App</h1>;
const Footer = () => <footer>© 2024 My App</footer>;

const App = () => {
  return (
    <div>
      <Header />
      <main>Content goes here</main>
      <Footer />
    </div>
  );
};

৩. স্টেট (State) এবং প্রপ্স (Props) ব্যবস্থাপনা

কম্পোনেন্টে স্টেট এবং প্রপ্স ব্যবস্থাপনা সহজ করে দেয় React। স্টেট হল কম্পোনেন্টের অভ্যন্তরীণ ডেটা যা UI পরিবর্তন করতে ব্যবহৃত হয়, এবং প্রপ্স হল ডেটা যা এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে পাস করা হয়।

উদাহরণস্বরূপ, একটি কম্পোনেন্টের স্টেট পরিবর্তন হলে, সেই কম্পোনেন্টের UI স্বয়ংক্রিয়ভাবে আপডেট হয়ে যাবে:

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

এখানে, useState হুক ব্যবহার করে count নামক স্টেট তৈরি করা হয়েছে, এবং এটি পরিবর্তিত হলে UI রিফ্রেশ হবে।

৪. লাইফসাইকেল মেথডস (Lifecycle Methods)

Class Components-এ বিভিন্ন লাইফসাইকেল মেথড ব্যবহার করে কম্পোনেন্টের বিভিন্ন অবস্থায় (initialization, updating, unmounting) বিশেষ কার্যক্রম করা যায়। React কম্পোনেন্টের এই লাইফসাইকেল মেথডগুলি ডেটা লোড করা, API কল করা, বা ক্লিন-আপ কার্যক্রম পরিচালনা করতে সাহায্য করে।

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component mounted!');
  }

  render() {
    return <div>Hello</div>;
  }
}

৫. React-এ রেন্ডারিং

React-এ, কম্পোনেন্টগুলির রেন্ডারিং খুব দ্রুত এবং কার্যকরভাবে ঘটে, কারণ React Virtual DOM ব্যবহৃত হয়। React কম্পোনেন্ট যখন স্টেট বা প্রপ্স পরিবর্তন পায়, তখন এটি শুধুমাত্র পরিবর্তিত অংশগুলোই DOM-এ আপডেট করে, ফলে অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত হয়।

৬. কম্পোনেন্ট এবং Reusability (পুনঃব্যবহারযোগ্যতা)

কম্পোনেন্টের পুনঃব্যবহারযোগ্যতা React-এ উন্নত অ্যাপ্লিকেশন তৈরি করার অন্যতম মূল উপাদান। একবার একটি কম্পোনেন্ট তৈরি করলে, আপনি সেটি যে কোনো স্থানে এবং যেকোনো সময়ে ব্যবহার করতে পারেন, যা কোডকে আরও মডুলার এবং সুসংগঠিত রাখে।

উপসংহার

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

ReactJS-এ কম্পোনেন্ট দুই ধরনের হতে পারে: Functional Components এবং Class Components। যদিও উভয়ই React অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়, তাদের মধ্যে কিছু গুরুত্বপূর্ণ পার্থক্য রয়েছে। নিচে আমরা উভয়ের বৈশিষ্ট্য এবং পার্থক্য বিশদভাবে আলোচনা করবো।

Functional Components

Functional Components হল সাধারণ JavaScript ফাংশন, যা UI রেন্ডার করার জন্য React এর মাধ্যমে ব্যবহৃত হয়। এর মধ্যে কোনো স্টেট (State) বা লাইফসাইকেল মেথড ব্যবহার করার সুযোগ ছিল না, তবে React Hooks এর আগমনের পর Functional Components-এ স্টেট এবং লাইফসাইকেল ফিচার যোগ করা সম্ভব হয়েছে।

বৈশিষ্ট্য:

• JavaScript ফাংশন: Functional Components সাধারণ JavaScript ফাংশন হিসেবে তৈরি হয়।
• স্টেট এবং লাইফসাইকেল হুক: React Hooks ব্যবহার করে Functional Components-এ স্টেট এবং লাইফসাইকেল কার্যক্রম যোগ করা যায়।
• পাঠযোগ্য এবং কমপ্যাক্ট কোড: Functional Components-এ কোড সাধারণত কমপ্যাক্ট এবং পড়তে সহজ হয়।

উদাহরণ:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

export default MyComponent;

এখানে useState হুক ব্যবহার করে স্টেট পরিচালনা করা হচ্ছে, এবং UI রেন্ডার করা হচ্ছে। এটি একটি Functional Component।

Class Components

Class Components React-এর পূর্ববর্তী সংস্করণে ব্যবহৃত হতো। এটি ES6 ক্লাস ব্যবহার করে তৈরি হয় এবং স্টেট এবং লাইফসাইকেল মেথডগুলো সরাসরি অন্তর্ভুক্ত করতে পারে।

বৈশিষ্ট্য:

• ES6 ক্লাস: Class Components ES6 ক্লাসের মাধ্যমে তৈরি হয়।
• স্টেট এবং লাইফসাইকেল মেথড: Class Components-এ স্টেট এবং লাইফসাইকেল মেথড যেমন componentDidMount, componentDidUpdate এবং componentWillUnmount ব্যবহার করা যায়।
• কিছুটা বড় কোড: Class Components সাধারণত Functional Components এর তুলনায় কিছুটা বড় হয় এবং বোঝা কঠিন হতে পারে।

উদাহরণ:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increaseCount}>Increase</button>
      </div>
    );
  }
}

export default MyComponent;

এখানে, state ব্যবহৃত হয়েছে এবং increaseCount মেথড দিয়ে স্টেট আপডেট করা হচ্ছে। এটি একটি Class Component।

Functional এবং Class Components এর মধ্যে প্রধান পার্থক্য

Functional Components কেন বেশি জনপ্রিয়?

React 16.8-এ React Hooks এর আগমনের পর থেকে Functional Components অনেক বেশি জনপ্রিয় হয়ে উঠেছে। Hooks, যেমন useState, useEffect, ইত্যাদি, Functional Components-এ স্টেট এবং লাইফসাইকেল ফিচার যোগ করা সহজ করেছে, যা আগে শুধুমাত্র Class Components-এ সম্ভব ছিল। এতে কোড আরও সোজা এবং কমপ্যাক্ট হয়।

তাছাড়া, Functional Components ছোট এবং পরিষ্কার হওয়ায় এগুলোকে মেইন্টেন করা সহজ হয়, এবং ডেভেলপাররা সহজেই কমপোনেন্টগুলির মধ্যে পারস্পরিক সম্পর্ক বুঝতে পারেন।

সারাংশ

• Functional Components সাধারণ JavaScript ফাংশন হিসেবে তৈরি হয় এবং React Hooks ব্যবহার করে স্টেট এবং লাইফসাইকেল ম্যানেজমেন্ট করা যায়। এগুলি ছোট এবং পরিষ্কার কোড লেখার জন্য উপযুক্ত।
• Class Components ES6 ক্লাস ব্যবহার করে তৈরি হয় এবং স্টেট এবং লাইফসাইকেল মেথডের জন্য অনেক বেশি কোড লিখতে হয়। এগুলি কিছুটা জটিল হতে পারে।

React-এ আধুনিক ডেভেলপমেন্টে Functional Components অধিক জনপ্রিয় এবং অধিক ব্যবহৃত হয়, তবে পুরনো অ্যাপ্লিকেশনে Class Components এখনও পাওয়া যায়।

ReactJS-এ কম্পোনেন্ট একটি সিলভেট (self-contained) ইউনিট যা UI রেন্ডার করে এবং ডাটা বা স্টেট নিয়ে কাজ করে। React-এর মূল ধারণা হচ্ছে কম্পোনেন্ট ভিত্তিক অ্যাপ্লিকেশন তৈরি করা, যেখানে UI এর প্রতিটি অংশ একটি কম্পোনেন্ট হয়ে থাকে। এটি কোড পুনরায় ব্যবহারযোগ্য (reusable) এবং মেইন্টেনেবল (maintainable) করতে সহায়তা করে।

১. React কম্পোনেন্ট তৈরি করা

ReactJS-এ দুটি প্রধান ধরনের কম্পোনেন্ট থাকে:

• ফাংশনাল কম্পোনেন্ট (Functional Components)
• ক্লাস কম্পোনেন্ট (Class Components)

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

২. ফাংশনাল কম্পোনেন্ট (Functional Component)

ফাংশনাল কম্পোনেন্ট হল একটি সাধারণ JavaScript ফাংশন, যা return স্টেটমেন্টের মাধ্যমে JSX রিটার্ন করে। এটি কমপ্লেক্স লজিকের জন্য ব্যবহৃত হয় না, বরং UI রেন্ডার এবং প্রপস গ্রহণের জন্য ব্যবহৃত হয়।

ফাংশনাল কম্পোনেন্টের উদাহরণ:

import React from 'react';

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

export default Welcome;

এখানে, Welcome হল একটি ফাংশনাল কম্পোনেন্ট যা props থেকে name গ্রহণ করে এবং তা UI তে প্রদর্শন করে।

ফাংশনাল কম্পোনেন্ট ব্যাখ্যা:

• props: এটি React কম্পোনেন্টে ডাটা পাঠানোর একটি উপায়। উপরের উদাহরণে, props.name ব্যবহার করে name ডাটা কম্পোনেন্টে পাঠানো হয়েছে।
• return: JSX কোড রেন্ডার করতে return ব্যবহৃত হয়।

৩. ক্লাস কম্পোনেন্ট (Class Component)

React-এ ক্লাস কম্পোনেন্ট তৈরি করতে React.Component ক্লাসের সাথে একটি ক্লাস ডিফাইন করতে হয়। ক্লাস কম্পোনেন্টগুলোতে state পরিচালনা এবং lifecycle methods ব্যবহৃত হয়।

ক্লাস কম্পোনেন্টের উদাহরণ:

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Welcome;

ক্লাস কম্পোনেন্ট ব্যাখ্যা:

• this.props: ক্লাস কম্পোনেন্টে props অ্যাক্সেস করার জন্য this.props ব্যবহার করতে হয়।
• render(): render() মেথডে JSX কোড রিটার্ন করা হয় যা UI রেন্ডার করবে।

৪. কম্পোনেন্টে স্টেট (State) ব্যবহারের নিয়ম

React কম্পোনেন্টে স্টেট (State) ব্যবহারের মাধ্যমে কম্পোনেন্টের ডাটা পরিচালনা করা হয়। যখন স্টেট পরিবর্তিত হয়, React সেই কম্পোনেন্টের UI রেন্ডার করে নতুন ডাটার সাথে।

ফাংশনাল কম্পোনেন্টে স্টেট ব্যবহারের উদাহরণ (Hooks ব্যবহার করে):

React 16.8 থেকে, React-এ Hooks যুক্ত করা হয়েছে, যা ফাংশনাল কম্পোনেন্টে স্টেট এবং অন্যান্য React ফিচার ব্যবহার করতে সাহায্য করে। সবচেয়ে বেশি ব্যবহৃত Hook হল useState।

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

ব্যাখ্যা:

• useState(0): এটি count নামক একটি state ভ্যারিয়েবল তৈরি করে, যার প্রাথমিক মান 0।
• setCount: এটি একটি ফাংশন, যা count এর মান পরিবর্তন করতে ব্যবহৃত হয়।
• onClick: বাটনে ক্লিক করার সময় setCount ফাংশন কল করা হয় এবং count এর মান বাড়ানো হয়।

ক্লাস কম্পোনেন্টে স্টেট ব্যবহারের উদাহরণ:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.increment}>Click me</button>
      </div>
    );
  }
}

export default Counter;

ব্যাখ্যা:

• this.state: এটি ক্লাস কম্পোনেন্টে স্টেট তৈরি করে এবং count মানের শুরু 0।
• this.setState: এটি স্টেট পরিবর্তন করার জন্য ব্যবহৃত হয় এবং UI রেন্ডার করতে সহায়তা করে।

৫. প্রপস (Props) ব্যবহার

React কম্পোনেন্টের মধ্যে ডাটা পাস করার জন্য প্রপস (Props) ব্যবহৃত হয়। প্রপস সাধারণত প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডাটা পাঠাতে ব্যবহৃত হয়।

প্রপস ব্যবহার করার উদাহরণ:

import React from 'react';

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

function App() {
  return <Greeting name="John" />;
}

export default App;

এখানে, App কম্পোনেন্ট Greeting কম্পোনেন্টে name প্রপস পাঠাচ্ছে এবং Greeting কম্পোনেন্ট সেই প্রপস ব্যবহার করে UI রেন্ডার করছে।

৬. কম্পোনেন্ট ব্যবহার

একটি কম্পোনেন্ট ব্যবহার করার জন্য, শুধু সেই কম্পোনেন্টটি অন্য কম্পোনেন্টে ইম্পোর্ট করে এবং JSX-এ ব্যবহার করতে হবে।

কম্পোনেন্ট ইম্পোর্ট এবং ব্যবহার:

import React from 'react';
import Welcome from './Welcome';  // কম্পোনেন্ট ইম্পোর্ট

function App() {
  return <Welcome name="Alice" />;  // কম্পোনেন্ট ব্যবহার
}

export default App;

এখানে, App কম্পোনেন্টে Welcome কম্পোনেন্টটি ইম্পোর্ট করা হয়েছে এবং JSX-এ ব্যবহার করা হয়েছে।

সারাংশ

ReactJS-এ কম্পোনেন্ট তৈরি এবং ব্যবহারের মূল উদ্দেশ্য হল UI-এর প্রতিটি অংশকে ছোট এবং পুনরায় ব্যবহারযোগ্য ইউনিটে বিভক্ত করা। আপনি ফাংশনাল কম্পোনেন্ট বা ক্লাস কম্পোনেন্ট ব্যবহার করে React অ্যাপ্লিকেশন তৈরি করতে পারেন। ফাংশনাল কম্পোনেন্ট ব্যবহার করা এখন সাধারণত বেশি জনপ্রিয়, কারণ এগুলি সহজ এবং হালকা হয়, এবং Hooks ব্যবহারের মাধ্যমে স্টেট এবং লজিক পরিচালনা করা যায়।

ReactJS-এ Props (প্রপস) একটি খুব গুরুত্বপূর্ণ ধারণা, যা ব্যবহার করে আমরা একটি কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা পাঠাতে পারি। Props হল একটি অবজেক্ট যা কম্পোনেন্টের মধ্যে ডেটা বা কনফিগারেশন প্যারামিটার হিসেবে কাজ করে। React কম্পোনেন্টগুলি সাধারণত ইনপুট (ডেটা) গ্রহণ করে এবং সেই অনুযায়ী UI রেন্ডার করে, এবং এই ডেটা Props এর মাধ্যমে প্রেরণ করা হয়।

Props কী?

Props (Property) হল React কম্পোনেন্টের জন্য একটি প্যারামিটার বা ইনপুট ডেটা, যা প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে পাঠানো হয়। Props এর মাধ্যমে আমরা ডাইনামিক ডেটা কম্পোনেন্টে ইনজেক্ট করতে পারি। এটি একটি রিড-অনলি (read-only) অবজেক্ট, অর্থাৎ একবার Props প্রেরণ করার পর, চাইল্ড কম্পোনেন্ট এই ডেটা পরিবর্তন করতে পারে না, শুধুমাত্র রেন্ডারিংয়ের জন্য ব্যবহার করতে পারে।

Props এর মাধ্যমে Data পাঠানোর প্রক্রিয়া

1. প্যারেন্ট কম্পোনেন্ট থেকে Props প্রেরণ
   প্রথমে, প্যারেন্ট কম্পোনেন্টে ডেটা সেট করতে হবে এবং তারপর সেই ডেটা চাইল্ড কম্পোনেন্টে প্রপস হিসেবে পাঠাতে হবে।
2. চাইল্ড কম্পোনেন্টে Props গ্রহণ
   চাইল্ড কম্পোনেন্টে props প্যারামিটার ব্যবহার করে প্যারেন্ট থেকে প্রাপ্ত ডেটা গ্রহণ করা হয় এবং UI তে রেন্ডার করা হয়।

Props এর মাধ্যমে Data পাঠানোর উদাহরণ

ধরা যাক, আপনি একটি Greeting নামে প্যারেন্ট কম্পোনেন্ট তৈরি করেছেন এবং এই কম্পোনেন্ট থেকে একটি Message নামক চাইল্ড কম্পোনেন্টে একটি নাম প্রেরণ করতে চান।

১. প্যারেন্ট কম্পোনেন্ট (Greeting)

import React from 'react';
import Message from './Message';  // Message কম্পোনেন্ট আমদানি

function Greeting() {
  const name = "John";

  return (
    <div>
      <h1>Welcome to React!</h1>
      {/* Props এর মাধ্যমে data পাঠানো হচ্ছে */}
      <Message userName={name} />
    </div>
  );
}

export default Greeting;

এখানে, Greeting কম্পোনেন্টের মধ্যে name ভ্যারিয়েবলটি Message কম্পোনেন্টে userName নামক prop হিসেবে পাঠানো হচ্ছে।

২. চাইল্ড কম্পোনেন্ট (Message)

import React from 'react';

function Message(props) {
  return <h2>Hello, {props.userName}!</h2>;
}

export default Message;

এখানে, Message কম্পোনেন্টে props প্যারামিটার ব্যবহার করে প্যারেন্ট কম্পোনেন্ট থেকে প্রাপ্ত userName প্রপস রেন্ডার করা হচ্ছে।

আউটপুট:

Welcome to React!
Hello, John!

Props এর কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য

1. Read-Only: Props পরিবর্তন করা যায় না। এটি শুধুমাত্র প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা প্রেরণের জন্য ব্যবহৃত হয়।
2. ডেটা প্রপস হিসেবে পাস করা: Props এর মাধ্যমে কম্পোনেন্টে স্ট্যাটিক বা ডাইনামিক ডেটা পাঠানো যেতে পারে। যেমন, একটি নাম, বয়স, ছবি, বা ফাংশন ইত্যাদি।
3. Reusability: Props ব্যবহার করে আপনি আপনার কম্পোনেন্টগুলোকে পুনরায় ব্যবহারযোগ্য করতে পারেন। উদাহরণস্বরূপ, আপনি একই কম্পোনেন্টে বিভিন্ন ডেটা পাঠিয়ে একাধিক বার ব্যবহার করতে পারেন।
4. Data Flow: Props React এর একমুখী ডেটা প্রবাহের (unidirectional data flow) মূল অংশ। অর্থাৎ, ডেটা শুধুমাত্র প্যারেন্ট থেকে চাইল্ড কম্পোনেন্টে প্রেরিত হয়, তবে চাইল্ড কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ডেটা প্রেরণ করা সম্ভব নয়।

Props এবং State এর মধ্যে পার্থক্য

• Props: প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা প্রেরণ করা হয় এবং এটি রিড-অনলি (read-only) হয়। একে পরিবর্তন করা সম্ভব নয়।
• State: একটি কম্পোনেন্টের ভেতরের পরিবর্তনশীল ডেটা, যেটি কম্পোনেন্টের UI পরিবর্তন করতে ব্যবহৃত হয়। State পরিবর্তনশীল এবং এটি কম্পোনেন্টের মধ্যে স্থানান্তরিত হয় না, তবে Props-এর মাধ্যমে State উপরের কম্পোনেন্টে পাস করা যায়।

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

1. ডেটা শেয়ারিং: Props ব্যবহার করে আপনি এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা শেয়ার করতে পারেন, যা React অ্যাপ্লিকেশনের মধ্যে কোড পুনরায় ব্যবহারযোগ্যতা (reusability) বাড়ায়।
2. সহজ ডাইনামিক UI: Props এর মাধ্যমে আপনি ডাইনামিকভাবে UI রেন্ডার করতে পারেন, যেমন, ব্যবহারকারীর নাম, ছবি বা অন্য কোনো তথ্য যা পরিবর্তনশীল হতে পারে।
3. কম্পোনেন্টের বিচ্ছিন্নতা (Decoupling): Props ব্যবহারের ফলে কম্পোনেন্টগুলোর মধ্যে নির্ভরশীলতা কমে যায়, কারণ প্যারেন্ট কম্পোনেন্টের পরিবর্তন চাইল্ড কম্পোনেন্টে স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়।

সারাংশ

ReactJS-এ Props হল প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা প্রেরণের প্রধান উপায়। এটি রিড-অনলি (read-only) একটি অবজেক্ট, যা React অ্যাপ্লিকেশনের মধ্যে ডেটা প্রবাহকে পরিচালিত করে। Props ব্যবহার করে আপনি React কম্পোনেন্টগুলোর মধ্যে ডেটা শেয়ার করতে এবং UI ডাইনামিকভাবে রেন্ডার করতে পারেন।