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 ব্যবহারের মাধ্যমে স্টেট এবং লজিক পরিচালনা করা যায়।