প্রপস ("properties"-এর সংক্ষিপ্ত রূপ) হলো একটি কম্পোনেন্টে ডেটা পাস করার উপায় — যে প্রক্রিয়া একটি কম্পোনেন্ট সংজ্ঞাকে প্রতিবার ভিন্ন ডেটাসহ পুনঃব্যবহারযোগ্য কিছুতে রূপান্তরিত করে।
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return (
<div>
<Welcome name="Priya" />
<Welcome name="Amit" />
</div>
);
}
// Renders: Hello, Priya! and Hello, Amit! — same component, different dataপ্রপস একটি একক অবজেক্ট হিসেবে আসে — উপরের প্রথম কলের জন্য {name: "Priya"} — JSX ট্যাগে আপনার পাস করা প্রতিটি অ্যাট্রিবিউটের জন্য একটি করে key।
বাস্তব React কোড প্রায় সবসময় ফাংশন সিগনেচারেই সরাসরি প্রপস ডিস্ট্রাকচার করে, JavaScript থেকে ইতিমধ্যে জানা ডিস্ট্রাকচারিং ব্যবহার করে:
function Welcome({ name }) {
return <h1>Hello, {name}!</h1>;
}একটি কম্পোনেন্ট যে প্রপস পায় তা কখনো পরিবর্তন করা উচিত নয় — সেগুলো যে কম্পোনেন্ট পাস করেছে তার অন্তর্গত। এটি শুধু একটি স্টাইল নিয়ম নয়; একটি re-render আসলেই প্রয়োজন কিনা তা জানতে React প্রপস অপরিবর্তিত থাকার উপর নির্ভর করে:
function Welcome({ name }) {
// name = "Someone else"; // Never do this — props are read-only
return <h1>Hello, {name}!</h1>;
}একটি কম্পোনেন্টের ওপেনিং আর ক্লোজিং ট্যাগের মাঝে যা রাখা হয় তা স্বয়ংক্রিয়ভাবে children নামের একটি বিশেষ প্রপ হিসেবে পাস হয়:
function Card({ children }) {
return <div className="card">{children}</div>;
}
function App() {
return (
<Card>
<p>This paragraph becomes the Card's children.</p>
</Card>
);
}এই অংশের পরের Component Composition পাঠে children-এর উপর আরও অনেক বেশি ভিত্তি করে তৈরি করা হবে — এটি পুরো ভাষার সবচেয়ে দরকারি প্যাটার্নগুলোর একটি।