আমার সাথে

Personal Blog of Zonayed
ওয়েব টেকনোলোজি কম্পিউটার সাইন্স জাভাস্ক্রিপ্ট প্রোগ্রামিং বাংলা রিঅ্যাক্ট

রিঅ্যাক্ট ব্যাসিকসঃ কম্পোনেন্ট (Component)

মার্চ 10, 2019

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

রিঅ্যাক্টেও কম্পোনেন্ট অনেকটাই এমন। তবে রিঅ্যাক্ট এর কম্পোনেন্টকে আপনি যতবার ইচ্ছা ব্যবহার করতে পারবেন। আপনার অ্যাপ্লিকেশনে হেডার, ফুটার আছে। এগুলো একটা একটা করে কম্পোনেন্ট হলে আমরা চাইলেই এই কম্পোনেন্টগুলো যত ইচ্ছা ততগুলো পেজে বারবার ব্যবহার করতে পারবো। চাইলে আমরা সেগুলোকে কাস্টমাইজ করেও ব্যবহার করতে পারবো।

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

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

রিঅ্যাক্ট এ কম্পোনেন্ট দুইরকমের হতে পারেঃ

১। ক্লাস কম্পোনেন্ট

২। ফাংশন কম্পোনেন্ট

নিচে আমরা একটা একটা করে বিস্তারিত দেখবোঃ

১। ক্লাস কম্পোনেন্টঃ ক্লাস কম্পোনেন্ট আসলে জাভাস্ক্রিপ্ট এর ক্লাসইঃ

class MyClassComponent {
  ...
}

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

class MyClassComponent extends React.Component {
  ...
}

ব্যাস এবার আমরা আমাদের ক্লাসে রিঅ্যাক্ট এর ফাংশানালিটি পেয়ে যাবো। এখন আমরা এগুলো ব্যবহার করতে পারবো।

আমরা আমাদের আগের প্রোজেক্টটিতে কাজ শুরু করবো অথবা আপনি চাইলে নতুন প্রোজেক্ট জেনারেট করেও কাজ শুরু করতে পারেন। আমরা আমাদের প্রোজেক্টেরsrc ডিরেক্টরির ভিতরে index.js ফাইলে ক্লাস লিখবো এবং সেই সাথে আমরা আমাদের react থেকেও Component ও এক্সটেন্ড করবোঃ

class MyClassComponent extends React.Component {
  ...
}

আমরা চাইলে Component কে এভাবে না লিখে ডিস্ট্রাকচারিং ব্যবহার করেও react থেকে এভাবে ইম্পোর্ট করতে পারিঃ

import React, { Component } from 'react';

এখন যেহেতু আমরা আমাদের ক্লাসকে Component থেকে এক্সটেন্ড করেছি, এখন আমরা আমাদের ক্লাসের ভিতরে বেশ কিছু রিঅ্যাক্ট এর ফাংশানালিটি পাবো। তারমধ্যে একটা আছে render() , যার কাজ হচ্ছে আমাদের ক্লাসের ইলিমেন্ট কিভাবে ডমে রেন্ডার হবে সেটা রিটার্ণ করা। এখন আমরা এটার ভিতরে জেএসএক্স ইলিমেন্টও রেন্ডার করতে পারবোঃ

class MyClassComponent extends React.Component {
  render() {
    return <p>React Component</p>
  }
}

এখানে আপনি জেএসএক্স ইলিমেন্ট এর মতোই একটা মাত্র ইলিমেন্ট রিটার্ণ করতে পারবেন। মানে এভাবে করতে চাইলে হবে নাঃ

class MyClassComponent extends React.Component {
  render() {
    return (
      <p>React Component</p>
      <p>React Another Component</p>
    )  
  }
}

তবে একটা ইলিমেন্ট এর ভিতরে যতইচ্ছা ইলিমেন্ট নেস্টেড করে রিটার্ন করতে পারবেন। এভাবে হবেঃ

class MyClassComponent extends React.Component {
  render() {
    return (
      <div>
        <p>React Component</p>
        <p>React Another Component</p>
      </div>
    )  
  }
}

২। ফাংশন কম্পোনেন্টঃ ফাংশন কম্পোনেন্টও ঠিক জাভাস্ক্রিপ্ট এর নরমাল ফাংশনই। এক্ষেত্রে ক্লাসের মতো এতো জটিলতা নেই। জাস্ট একটা ফাংশন যেটা কিছু আপনার রিঅ্যাক্ট ইলিমেন্ট রিটার্ণ করবে। আমরা জাভাস্ক্রিপ্ট এ ফাংশন লিখি এভাবেঃ

function aFunction() {
   // some code
}

রিঅ্যাক্টেও একইভাবে ফাংশন কম্পোনেন্ট লিখা যায়ঃ

function FunctionComponent() {
   // some code
}

তবে রিঅ্যাক্ট এ যেহেতু আমরা ইএস৬ এর সিনট্যাক্স ব্যবহার করি, তাই আমরা ফ্যাট অ্যারো ফাংশন ব্যবহার করতে পারিঃ

const FunctionComponent = () => {
   // some code
}

তবে এখানে খেয়াল রাখবেন যে আমরা ফাংশনের নামটা বড় হাতের অক্ষর দিয়ে লিখা শুরু করেছি। এটাকে প্যাসকেল ফরম্যাট বলা হয় এবং রিঅ্যাক্ট এর কম্পোনেন্ট লেখার ক্ষেত্রে জরুরী।

এবার এই ফাংশন থেকে আমাদের রিঅ্যাক্ট ইলিমেন্ট রিটার্ণ করতে হবে। এখানেও একইভাবে আমরা একটাই ইলিমেন্টই রিটার্ণ করতে পারবো ক্লাস কম্পোনেন্ট এর মতোই। আমরা আমাদের প্রোজেক্ট ফাইলে এরকমভাবে একটা ফাংশন কম্পোনেন্ট লিখবোঃ

const FunctionComponent = () => {
   return <p>A Function Component</p>
}

ব্যাস এভাবেই হয়ে গেলো আমাদের ফাংশন কম্পোনেন্ট লিখা। এখন আমরা যেহেতু এখানে একটাই জেএসএক্স ইলিমেন্ট রিটার্ণ করতেছি, তাইলে আমরা এই ফাংশনটাকে আরো শর্টে লিখতে পারি। যদি আপনি ইএস৬ এর ফ্যাট অ্যারো ফাংশন কিভাবে কাজ করে সেটা মনে করতে পারেন, একইভাবেঃ

const FunctionComponent = () => (
   <p>A Function Component</p>
)

এখন আমরা এই কম্পোনেন্টগুলো চাইলে ডমে রেন্ডার করতে পারবো কম্পোনেন্ট ইন্সট্যান্স ব্যবহার করে। কম্পোনেন্ট এর নাম যদি হয় FunctionComponent তাহলে এর ইন্সট্যান্স হবে এরকমঃ <FunctionComponent /> আমরা এটাকে এভাবে ব্যবহার করে আমাদের ডমে রেন্ডার করতে পারিঃ

ReactDOM.render(<FunctionComponent />, document.getElementById('renderhere'));

ব্যাস এবার দেখবেন আপনার কম্পোনেন্ট ডমে রেন্ডার হয়েছে যেটা আপনি ব্রাউজারে দেখতে পাবেনঃ

এবার চাইলে আপনি আপনার একটা কম্পোনেন্টকে আরেকটা কম্পোনেন্ট থেকেও ভিতর থেকেই কল করতে পারবেন। আমরা যদি চাই আমাদের ক্লাস কম্পোনেন্ট MyComponent কে আমরা আমাদের ফাংশন কম্পোনেন্ট এর ভিতরে কল করবো, তাহলে এভাবে হবেঃ

const FunctionComponent = () => (
  <div>
    <MyComponent />
    <p>A Function Component</p>
  </div>
)

আমরা যেহেতু একটাই মাত্র ইলিমেন্ট রিটার্ণ করতে পারবো, তাই অতিরিক্ত div দিয়েছি। আর বাকিটা আগের মতোই। এটাকে সেইভ করে ব্রাউজারে দেখবেন আপনার ক্লাস কম্পোনেন্টও চলে এসেছেঃ

আলাদা আলাদা ফাইলে কম্পোনেন্ট

এবার আমরা তো কম্পোনেন্টগুলোকে এক ফাইলেই রাখলাম। কিন্তু প্রথমে তো বলেছিলাম আমরা চাইলে আলাদা আলাদা ফাইলেও রাখতে পারি যাতে পরবর্তিতে সহজেই কম্পোনেন্টগুলো খুঁজে পাওয়া যায়। এই জিনিসটা একদম সোজা। আমরা রিঅ্যাক্ট এর প্রোজেক্টে সাধারণত components নামে একটা ডিরেক্টরি করে ঐটার ভিতরে কম্পোনেন্টগুলো ভালো, যথার্থ নামকরণ করে রাখি। এখন আপনি আপনার প্রোজেক্টের স্ট্রাকচার যেকোনোরকম ইচ্ছা করতে পারবেন। তবে এই স্ট্রাকচারেই অনেককে ব্যবহার করতে দেখবেন। প্রথমে src ডিরেক্টরির ভিতরে আরেকটা ডিরেক্টরি করুন components নামেঃ

এবার এটার ভিতরে আমাদের দুই কম্পোনেন্ট এর নামে দুইটা জেএস ফাইল MyComponent.js, FunctionComponent.js তৈরী করে নিন। আপনি চাইলে যেকোনো নামই দিতে পারবেন, তবে কম্পোনেন্ট এর নামে নামকরণ করাই ভালো।

এবার কম্পোনেন্ট দুইটার সবগুলো কোড কাট করে ওদের জন্য করা পৃথক ফাইলগুলোতে রাখুন। তাহলে আপনার MyComponent.js দেখতে হবে এরকমঃ

class MyComponent extends Component {
  render() {
    return <p>React Component</p>
  }
}

আর FunctionComponent.js দেখতে এরকম হবেঃ

const FunctionComponent = () => (
  <div>
    <MyComponent />
    <p>A Function Component</p>
  </div>
)

এখন আমরা জানি জেএসএক্স এর জন্যে এবং একই সাথে Component এর জন্যে আমাদের react ইম্পোর্ট করতে হবে। তাই আমরা দুইটা ফাইলেই react ইম্পোর্ট করে নিবোঃ

MyComponent.js দেখতে এরকম হবেঃ

import React, { Component } from 'react';
class MyComponent extends Component {
  render() {
    return <p>React Component</p>
  }
}

আর FunctionComponent.js দেখতে এরকম হবেঃ

import React from 'react';
const FunctionComponent = () => (
  <div>
    <MyComponent />
    <p>A Function Component</p>
  </div>
)

ফাংশন কম্পোনেন্ট এ যেহেতু আমাদের Component দরকার নাই, তাই আমরা এটা আলাদা করে ইম্পোর্ট করি নাই।

এখন দুইটা ফাইল থেকেই আমাদের কম্পোনেন্টগুলো এক্সপোর্ট করতে হবে যাতে বাইরে থেকে আমরা এগুলোকে আবার ইম্পোর্ট করতে পারি। কেনো ইম্পোর্ট করবো? কারণ এইগুলো আবার আরেক জায়গায় ব্যবহৃত হচ্ছে। তাই আমরা এক্সপোর্ট ও করবো এভাবে।

MyComponent.js দেখতে এরকম হবেঃ

import React, { Component } from 'react';
class MyComponent extends Component {
  render() {
    return <p>React Component</p>
  }
}
export default MyComponent;

আর FunctionComponent.js দেখতে এরকম হবেঃ

import React from 'react';
const FunctionComponent = () => (
  <div>
    <MyComponent />
    <p>A Function Component</p>
  </div>
)
export default FunctionComponent;

ব্যাস! এবার আমরা এগুলো বাইরে থেকে ইম্পোর্ট করতে পারবো। তাহলে আমাদের FunctionComponent.js এর ভিতরে MyComponentলাগবে, তাই আমরা FunctionComponent.js এ সেটা ইম্পোর্ট করে নিবো। MyComponent যেহতু একই ডিরেক্টরিতে আছে তাই ইম্পোর্টটা এভাবে হবেঃ

import MyComponent from './MyComponent';

মনে রাখবেন ইম্পোর্ট স্টেটমেন্টগুলো সবসময়েই ফাইলের মাথায় থাকবে। তারপর আমাদের FunctionComponent src এর index.js এর ভিতরে লাগবে। তাই আমরা index.js ভিতরেও FunctionComponent ইম্পোর্ট করে নিবো এভাবেঃ

import FunctionComponent from './components/FunctionComponent';

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

ব্যাস! এভাবেই আমরা আলাদা আলাদা ফাইলে আমাদের কম্পোনেন্টগুলো নিয়ে গেলাম। কতো ক্লিন দেখাচ্ছে না? হ্যাঁ এটাই কম্পোনেন্ট এর সুবিধা। আবার চাইলে আমরা একই কম্পোনেন্টকে বিভিন্ন জায়গায় ব্যবহারও করতে পারবো। পরবর্তিতে আমরা কম্পোনেন্ট এ ডাটা পাস করাও দেখবো। তখন আসলে রিঅ্যাক্ট এর কম্পোনেন্ট কতটা পাওয়ারফুল সেটা সহজেই বুঝা যাবে।

ক্লাস কম্পোনেন্ট নাকি ফাংশন কম্পোনেন্ট?

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

কিভাবে কম্পোনেন্ট ভাগ করবো

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


আমার নতুন ব্লগ পোস্ট গুলোর আপডেট পেতে আপনি আপনার ইমেইল দিয়ে আমার ব্লগ পোস্টগুলো সাবস্ক্রাইব করে রাখতে পারেন, নতুন পোস্টগুলো সপ্তাহে একদিন আপনার ইনবক্সে চলে যাবে

Comments

comments