DEV Community

Cover image for React Props Explained with Examples
RSM Academy BD
RSM Academy BD

Posted on

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;
Enter fullscreen mode Exit fullscreen mode

এখানে, 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;
Enter fullscreen mode Exit fullscreen mode

এখানে, 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;
Enter fullscreen mode Exit fullscreen mode

ব্যাখ্যা:

  • 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;

Enter fullscreen mode Exit fullscreen mode

এখানে, আমরা 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>
  );
}
Enter fullscreen mode Exit fullscreen mode

Default Props

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

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

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
};
Enter fullscreen mode Exit fullscreen mode

উপসংহার

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

DevCycle image

Ship Faster, Stay Flexible.

DevCycle is the first feature flag platform with OpenFeature built-in to every open source SDK, designed to help developers ship faster while avoiding vendor-lock in.

Start shipping

👋 Kindness is contagious

Dive into this thoughtful piece, beloved in the supportive DEV Community. Coders of every background are invited to share and elevate our collective know-how.

A sincere "thank you" can brighten someone's day—leave your appreciation below!

On DEV, sharing knowledge smooths our journey and tightens our community bonds. Enjoyed this? A quick thank you to the author is hugely appreciated.

Okay