React Component এর পরিচয়?

  React Component এর পরিচয়? React এ component হলো ইউজার ইন্টারফেস তৈরি করার জন্য একটু মডুলার এবং রি-ইউজেবল বিল্ডিং ব্লক। এটি ইউজার ইন্টারফ...

 React Component এর পরিচয়?

React এ component হলো ইউজার ইন্টারফেস তৈরি করার জন্য একটু মডুলার এবং রি-ইউজেবল বিল্ডিং ব্লক। এটি ইউজার ইন্টারফেস (UI) এর একটি অংশকে উপস্থাপন করে এবং এটি একটি Button এর মতো সাধারণ অথবা একটি পরিপূর্ণ পেইজ এর মতো জটিল হতে পারে। React এ দুই ধরনের component রয়েছে, যথাক্রমে – Functional Component (ফাংশনাল কম্পোনেন্ট) এবং Class Component (ক্লাস কম্পোনেন্ট)। নিম্নে React এর component গুলো নিয়ে উদাহরণসহ বিস্তারিত আলোচনা উল্লেখ করা হলো।

Functional Component (ফাংশনাল কম্পোনেন্ট) : React এ ফাংশনাল কম্পোনেন্ট স্টেটলেস এবং জাভাস্ক্রিপ্ট এর ফাংশন হিসাবে সংজ্ঞায়িত করা হয়। কম্পনেন্টগুলো সাধারণত আর্গুমেন্ট হিসাবে Porps (Properties এর সংক্ষিপ্ত রুপ ‘Props’) গ্রহণ করে এবং কি রেন্ডার করতে হবে তা বর্ণনা করার জন্য React Element এ রিটার্ণ করে দেয়।

Functional Component (ফাংশনাল কম্পোনেন্ট) এর উদাহরণ –

import React from "react";

// Functional Component
const Greeting = (props) => {
  return <h1>Welcome, {props.name}!</h1>;
};

// Usage of the component
const App = () => {
  return <Greeting name="Notesaid24" />;
};

export default App;

উপরের উদাহরণে, ‘Greeting” ফাংশনটি একটি ফাংশনাল কম্পোনেন্ট যা একটি ‘name’ প্রপস হিসেবে গ্রহণ করে এবং একটি Greetings প্রদর্শন করে। পাশাপাশি App Component একটি নির্দিষ্ট নামের প্রপ সহ Greeting Component টি ব্যবহার করে।

 

Class Component (ক্লাস কম্পোনেন্ট) : Class component এ সাধারণত State এবং Lifecycle method রয়েছে, যা ব্যবহার করার মাধ্যমে functional component এর চেয়ে আরও শক্তিশালো করে তোলে। Class component কে ES6 এর ক্লাস হিসাবে সংজ্ঞায়িত করা হয় যা React.Component কে extend করে।

Class Component (ক্লাস কম্পোনেন্ট) এর উদাহরণ –

import React, { Component } from "react";
// Class Component
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>

        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// Usage of the component
const App = () => {
  return <Counter />;
};
export default App;

উপরের উদাহরণে, Counter Component হলো একটি Class Component যা তার State এর কাউন্ট maintain করে। কাউন্ট আপডেট করার জন্য “increment” নামে একটি মেথড রয়েছে এবং UI (ইউজার ইন্টারফেস) এ একটি বাটন এই মেথডকে trigger করে।

 

পরিশেষে, React Applications এ Functional components এবং Class components উভয়ের ব্যবহার গুরুত্বপূর্ণ। ব্যবহারের দিক এবং লেখার দিক থেকে সহজ হওয়ায় functional component অনেকেরই পছন্দ তবে Class Component ব্যবহারের দিক এবং লেখার দিক থেকে জটিল হওয়া সত্ত্বেও class component অতিরিক্ত কিছু সুযোগ সুবিধা প্রদান করে থাকে। কিন্তু ডেভেলপারদের কথা চিন্তা করে এবং কোড বেইজড সিম্পল রাখার জন্য React এর ১৬.৮ ভার্সনে Hook (হুক) এর প্রবর্তন হয় এবং এই হুকের মাধ্যমে class components এর state এবং lifecycle মেথড functional component ব্যবহার করা যায়, যার ফলে ধীরে ধীরে class component এর ব্যবহারের প্রয়োজনীয়তা হ্রাস পাচ্ছে।

নোটঃ React এর হুক (Hook) শুধুমাত্র Functional component ব্যবহার করা যায়। এদের মধ্যে উল্লেখযোগ্য কয়েকটি হলো – useState(), useEffect(), useContext(), useReducer(), useCallback(), useMemo() এবং useRef()

 

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