وقتی صحبت از برنامه‌نویسی با React میشه، یکی از مهم‌ترین مفاهیمی که باید یاد بگیریم، استفاده از Props هست.
به زبان ساده، Props در React برای پاس دادن داده‌ها و اطلاعات به کامپوننت‌ها استفاده میشن.
در واقع Props به ما این امکان رو میده که کامپوننت‌هامون رو قابل استفاده مجدد کنیم، یعنی یک بار اون‌ها رو تعریف کنیم و بعد در جاهای مختلف با داده‌های مختلف از اون‌ها استفاده کنیم.
یکی از مزیت‌های مهم استفاده از Props اینه که می‌تونیم به راحتی داده‌های متفاوتی به یک کامپوننت پاس بدیم و اون کامپوننت با همون داده‌ها به درستی کار کنه.
حالا بذارید یه نمونه‌ی کد رو بررسی کنیم تا بهتر به مفهوم Props پی ببریم.
<!-- React Component.js -->
import React from "react";
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return (
<div>
<Greeting name="Ali" />
<Greeting name="Sara" />
</div>
);
}
export default App;
توضیح خط به خط کد
import React from "react"; این خط کتابخانه React رو وارد می‌کنه که لازمه کدهای React کار کنن.
function Greeting(props) اینجا یک کامپوننت به اسم Greeting تعریف کردیم که داده‌های props رو به عنوان ورودی می‌گیره.
return <h1>Hello, {props.name}!</h1>; این خط خروجی نمایشگر کامپوننت هست که یک پیام خوشامدگویی با نام و نام خانوادگی شخص مربوطه رو نشون میده.
function App() اینجا یک کامپوننت اصلی یا پدر به اسم App تعریف کردیم که بقیه کامپوننت‌ها رو شامل می‌شود.
<Greeting name="Ali" /> با این خط ما کامپوننت Greeting رو با props یا تعلقات name برابر با "Ali" صدا زدیم.
<Greeting name="Sara" /> اینجا همون کامپوننت Greeting دوباره با props متفاوتی به اسم "Sara" استفاده شده.
export default App; این خط باعث میشه که کامپوننت App به عنوان خروجی پیش‌فرض فایل در دسترس قرار بگیره تا در دیگر فایل‌ها بتونیم ازش استفاده کنیم.