Class Component লেখার নিয়ম এবং এর ব্যবহার

React এ জাভাস্ক্রিপ্টের ES6 এর ক্লাস সিনট্যাক্স ব্যবহার করে Class Component সহজে তৈরি করা যায়। ফাংশনাল কম্পোনেন্ট আসার পূর্ব পর্যন্ত React এ ক্লাস কম্পোনেন্ট জাভাস্ক্রিপ্টের class কিওয়ার্ডের মাধ্যমে তৈরি করা হতো। নিম্নে কিভাবে React এ সহজে Class Component তৈরি করতে হয় তার একটি উদাহরণসহ বর্ণনা দেওয়া হলো।

import React, { Component } from "react";
class MyClassComponent extends Component {
  render() {
    return (
      <div>
        <h1>Hello, I am a simple class component!</h1>
      </div>
    );
  }
}
export default MyClassComponent;

উপরের উদাহরণ বিশ্লেষণঃ

প্রথমে, React লাইব্রেরী থেকে React এবং Component কে import করেছি। তারপর জাভাস্ক্রিপ্টের class কিওয়ার্ডের মাধ্যমে “MyClassComponent” তৈরি করে যা Component কে extends করে। রেন্ডার মেথড একটি JSX এর কাঠামো রিটার্ণ করে এবং UI তে তা রিপ্রেজেন্ট করে। এই ক্লাস কম্পোনেন্টে একটি সিম্পল <div> এবং এর মধ্যে <h1> এলিমেন্ট রয়েছে। পরিশেষে, তৈরিকৃত ক্লাস কম্পোনেন্টটি export করা হয়েছে যাতে করে এ্যাপ্লিকশনের অন্য কোনো জায়গায় বা কম্পোনেন্টে ব্যবহার করা যায়।

Class Component এর আরও একটি উদাহরণ –

import React, { Component } from "react";
class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    // Initialize state if needed
    this.state = {
      stateValue: "Initial value",
    };
  }

  // Lifecycle method: componentDidMount
  componentDidMount() {
    // Executed after the component is inserted into the DOM
    console.log("Component is mounted");
  }

  // Event handler function
  handleClick = () => {
    // Update state when an event occurs
    this.setState({ stateValue: "New value" });
  };

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.state.stateValue}</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default MyClassComponent;

যদিও বর্তমানে class component এর পরিবর্তে ফাংশনাল কম্পোনেন্ট সচরাচর ব্যবহার বৃদ্ধি পাচ্ছে। তাই বলে যে ক্লাস কম্পোনেন্টের ব্যবহার হয় না এমন না। তবে এ্যাপ্লিকেশন এবং প্রজেক্টের প্রয়োজনের উপর ভিত্তি করে ক্লাস কম্পোনেন্ট অথবা ফাংশনাল কম্পোনেন্ট এর ব্যবহার নির্ভর করে।

 

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