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

React.js একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যা ডেভেলপারদের কোড ক্যাপসুলেট করে পুনঃব্যবহারযোগ্য बनाने দেয়। এই ক্যাপসুলেট করা কোড স্নিপেটগুলোকে কম্পোনেন্ট বলা হয়। এগুলো নিজস্ব লজিক এবং স্টেট ধারণ করতে পারে, Document Object Model (DOM)-এর সাথে ছেড়छাড় ছাড়া।

ওয়েবসাইটের অংশগুলোকে ছোট ছোট কম্পোনেন্টে ভাগ করে ডেটা পাস করলে কোড পুনঃব্যবহারযোগ্য এবং DRY (Don't Repeat Yourself) নীতি মেনে চলে। রিয়্যাক্টে প্রধানত দুই ধরনের কম্পোনেন্ট পাওয়া যায়: ফাংশনাল এবং ক্লাস কম্পোনেন্ট।

রিয়্যাক্ট কম্পোনেন্টের মৌলিক ধারণা

উচ্চস্তরে রিয়্যাক্ট কম্পোনেন্ট মূলত জাভাস্ক্রিপ্ট ফাংশন যেগুলো props প্যারামিটার হিসেবে গ্রহণ করে এবং রিয়্যাক্ট এলিমেন্ট রিটার্ন করে যা স্ক্রিনে কী দেখানো হবে তা বর্ণনা করে।

import React from 'react';
import ReactDOM from 'react-dom';
const Greeting = (props) => {
  return (
    <div> Hello, {props.name} </div>
  );
};
const element = <Greeting name="Yolanda" />;
ReactDOM.render(element, document.getElementById('root'));

এখানে <Greeting /> কম্পোনেন্টে name নামক প্রপ পাস করা হয়েছে। প্রপস অবজেক্ট প্যারেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাস করে।

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

ফাংশনাল কম্পোনেন্ট আসলে জাভাস্ক্রিপ্ট ফাংশন। ES5 বা ES6 সিনট্যাক্স ব্যবহার করে লেখা যায়। রিয়্যাক্ট কম্পোনেন্টের নাম বড় হাতের অক্ষরে শুরু হয় (Capitalized) যাতে ট্রান্সপাইলার বুঝতে পারে যে এটি একটি কম্পোনেন্ট।

ES5 ফাংশনাল কম্পোনেন্ট (JSX বিনা)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic React Component</title>
</head>
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script>
    'use strict';
    const element = React.createElement;
    function Greeting() {
      return element('h4', null, 'Hello, World!');
    }
    function App() {
      return element(Greeting);
    }
    const domContainer = document.querySelector('#root');
    ReactDOM.render(element(App), domContainer);
  </script>
</body>
</html>

JSX এর ভূমিকা

JSX (JavaScript XML Extension) আমাদের জাভাস্ক্রিপ্টের ভিতরে HTML লিখতে দেয়, যা কোড পড়তে এবং স্কেল করা সহজ করে তোলে। এটি React.createElement মেথডের সিনট্যাক্টিক শুগার।

ES5 এবং ES6 ফাংশনাল কম্পোনেন্ট (JSX সহ)

ES5

import React from 'react';
import ReactDOM from 'react-dom';
function Animal(props) {
  const element = <h1>My cat's name is {props.name}</h1>;
  return element;
}
function App() {
  return <Animal name="Marshmallow"/>;
}
const domContainer = document.querySelector('#root');
ReactDOM.render(<App/>, domContainer);

ES6 (Arrow Function)

const Animal = (props) => {
  const element = <h1>My cat's name is {props.name}</h1>;
  return element;
}
const App = () => {
  return <Animal name="Marshmallow"/>;
}
const domContainer = document.querySelector('#root');
ReactDOM.render(<App/>, domContainer);

React v16 এর আগে ফাংশনাল কম্পোনেন্টকে স্টেটলেস (stateless) বলতো কারণ এগুলো শুধু প্রেজেন্টেশনাল (presentational) কাজ করতো, স্টেট হ্যান্ডল করতো না। React v16 থেকে হুক (Hooks) আসার পর ফাংশনাল কম্পোনেন্টও স্টেটফুল (stateful) হতে পারে।

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

ক্লাস কম্পোনেন্ট ES6 জাভাস্ক্রিপ্ট ক্লাসের কনসেপ্ট ব্যবহার করে। এগুলো একটি অবজেক্টের ইনস্ট্যান্স যাতে স্টেট (state) থাকে। স্টেট হলো কম্পোনেন্টের নিজস্ব ডেটা যা প্রেজেন্ট করা, পাস করা বা লজিকের জন্য ব্যবহার করা যায়।

import React from 'react';
import ReactDOM from 'react-dom';
import Name from './Name';

class Animal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      species: ['fox', 'tiger', 'bear', 'kangaroo', 'fish', 'cat', 'dog', 'squirrel']
    }
  }
  render() {
    return (
      <div>
        {this.state.species.map(animal => {
          return <Name animal={animal}/>
        })}
      </div>
    )
  }
}
ReactDOM.render(<Animal />, document.getElementById('root'));

এখানে this.state.species অ্যারের প্রতিটি প্রাণির নাম <Name /> কম্পোনেন্টে পাস করা হয়েছে। রিয়্যাক্টে ডেটা প্যারেন্ট থেকে চাইল্ডে এক লেভেল নিচে প্রবাহিত হয়।

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

ক্লাস কম্পোনেন্টে লাইফসাইকেল মেথড থাকে স্টেট ট্র্যাক করার জন্য। প্রধানত তিন ফেজ:

1. componentDidMount() - AJAX রিকোয়েস্ট করে স্টেট ইনিশিয়ালাইজ করার জন্য।
2. componentDidUpdate() - ইউজার ইন্টারঅ্যাকশনের পর স্টেট আপডেটের জন্য।
3. componentWillUnmount() - ক্লিনআপ ফাংশন (টাইমার, AJAX রিকোয়েস্ট বন্ধ করার জন্য)।

ক্লাস কম্পোনেন্টে render() মেথড ব্যবহার করা হয় কন্টেন্ট স্ক্রিনে দেখানোর জন্য।

ফাংশনাল কম্পোনেন্ট এবং useState() (React Hooks)

২০১৮ সালে React Hooks আনা হয়েছে যাতে ফাংশনাল কম্পোনেন্টও স্টেট এবং লাইফসাইকেল মেথড ব্যবহার করতে পারে। useState() হুক ব্যবহার করে স্টেট ডিক্লেয়ার করা হয়।

import React, {useState} from 'react';
import ReactDOM from 'react-dom';

const Animal = (props) => {
  const element = <h1>My cat's name is {props.name}</h1>;
  return element;
}
const App = () => {
  const [state, setState] = useState('Marshmallow');
  return <Animal name={state}/>;
}
const domContainer = document.querySelector('#root');
ReactDOM.render(<App/>, domContainer);

useState ইম্পোর্ট করে const [state, setState] = useState('Marshmallow') দিয়ে স্টেট ইনিশিয়ালাইজ করা হয়। setState ক্লাস কম্পোনেন্টের this.setState()-এর সমতুল্য।

useEffect() হুক ক্লাস কম্পোনেন্টের সকল লাইফসাইকেল মেথডের কাজ একসাথে করে।

উপসংহার

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