React Props Explained with Examples

React JS Props নিয়ে বিস্তারিত আলোচনা করতে পারবেন?

React props নিয়ে বিস্তারিত আলোচনা করার আগে, React-এর মূল ধারণা এবং props এর ভূমিকা সম্পর্কে একটু ধারণা নিই।

React Props কী?

React props (Properties) হচ্ছে এমন এক ধরনের data যা component গুলোর মধ্যে পাস করা হয়। এক component থেকে আরেক component এ data পাঠানোর জন্য props ব্যবহার করা হয়। এটি function-এর argument-এর মত কাজ করে। যখন একটি component তার parent component থেকে data পায়, তখন এই data গুলোকে props বলা হয়।

Props-এর বৈশিষ্ট্য

1. Read-Only: Props হলো read-only, অর্থাৎ props-কে পরিবর্তন করা যায় না। এদের value immutable, এটি শুধুমাত্র parent component থেকেই পাস করা যেতে পারে।
2. Unidirectional Data Flow: Props-এর data flow একমুখী, অর্থাৎ data শুধু parent component থেকে child component এ যায়। Child component থেকে parent component এ data পাঠানো যায় না।
3. Dynamic Data Transfer: Props-এর মাধ্যমে ডাইনামিক্যালি ডাটা component এ পাঠানো যায়।

Props কিভাবে কাজ করে?

ধরুন আমাদের একটি parent component আছে এবং আমরা চাচ্ছি যে কিছু data child component এ পাঠাতে। আমরা props ব্যবহার করে এই কাজটি করতে পারি। নিচের উদাহরণে এটি দেখানো হলো:

উদাহরণ

প্রথমে একটি parent component তৈরি করি যেটি child component এ কিছু data পাঠাবে।

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Hello from Parent!";

  return (
    <div>
      <h1>This is the Parent Component</h1>
      <ChildComponent msg={message} />
    </div>
  );
}

export default ParentComponent;

এখানে, ParentComponent এ আমরা একটি string message তৈরি করেছি এবং এটি ChildComponent-এ msg props হিসেবে পাঠিয়েছি।

এখন ChildComponent তৈরি করি যেটি এই props ব্যবহার করবে।

// ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <h2>This is the Child Component</h2>
      <p>{props.msg}</p>
    </div>
  );
}

export default ChildComponent;

এখানে, ChildComponent এ আমরা props parameter গ্রহণ করেছি এবং props.msg এর মাধ্যমে parent component থেকে পাঠানো data access করেছি।

Props এর আরও কাজ (Best Practice)

React-এ props কাজ করে HTML attributes এর মতো। আপনি যখন একটি কম্পোনেন্টে props পাস করবেন, তখন তা attributes হিসাবে উল্লেখ করতে হবে।

উদাহরণ:

Copy code
// Parent component
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <div>
      <ChildComponent name="John" age={25} />
    </div>
  );
}

export default ParentComponent;
jsx
Copy code
// Child component
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Age: {props.age}</p>
    </div>
  );
}

export default ChildComponent;

ব্যাখ্যা:

• ParentComponent এ name এবং age এর মান পাঠানো হয়েছে ChildComponent এর কাছে।
• ChildComponent এ props ব্যবহার করে সেই মানগুলো প্রদর্শিত হয়েছে।

Props ব্যবহারের উপকারিতা

1. Component Reusability: Props ব্যবহার করে component গুলোকে reusable করা যায়, কারণ একবার component তৈরি করে বিভিন্ন data পাঠিয়ে তা বিভিন্নভাবে ব্যবহার করা যায়।
2. Cleaner Code: Props ব্যবহারের ফলে code clean এবং structured হয়।
3. Separation of Concerns: Component গুলোর কাজের সীমা নির্ধারণ করে দেওয়া যায়। অর্থাৎ, এক component এর কাজ অন্য component এ প্রভাব ফেলে না।

Props Validation

React-এ props validation করার জন্য propTypes ব্যবহার করা যায়। এটি component এ পাস হওয়া props গুলোর ধরন চেক করে।

import React from 'react';
import PropTypes from 'prop-types';

function ChildComponent(props) {
  return (
    <div>
      <h2>This is the Child Component</h2>
      <p>{props.msg}</p>
    </div>
  );
}

ChildComponent.propTypes = {
  msg: PropTypes.string.isRequired,
};

export default ChildComponent;

এখানে, আমরা propTypes ব্যবহার করে বলেছি যে msg props অবশ্যই একটি string হতে হবে এবং এটি অবশ্যই প্রয়োজনীয়।

আরো কিছু উদাহরণঃ-

Destructuring Props

Props কে সরাসরি destructure করে সহজভাবে ব্যবহার করা যায়:

jsx
Copy code
function ChildComponent({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Age: {age}</p>
    </div>
  );
}

Default Props

আপনি defaultProps ব্যবহার করে props এর ডিফল্ট মান সেট করতে পারেন:

jsx
Copy code
function ChildComponent({ name = "Guest", age = 18 }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Age: {age}</p>
    </div>
  );
}

PropTypes

React কম্পোনেন্টে কোন ধরনের props পাস হবে তা যাচাই করার জন্য PropTypes ব্যবহার করা হয়:

jsx
Copy code
import PropTypes from 'prop-types';

function ChildComponent({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Age: {age}</p>
    </div>
  );
}

ChildComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired
};

উপসংহার

React props হচ্ছে এমন একটি মেকানিজম যা component গুলোর মধ্যে data পাঠানোর জন্য ব্যবহার করা হয়। এটি component গুলোর মধ্যে data flow সহজ করে এবং component গুলোর reusability বাড়ায়। Props এর data গুলো immutable, অর্থাৎ এগুলোকে পরিবর্তন করা যায় না। Props validation এর মাধ্যমে আমরা নিশ্চিত করতে পারি যে, আমাদের component এ সঠিক data পাঠানো হচ্ছে।