کامپوننت ها مثل توابع در جاوا اسکریپت هستند که ورودی را قبول میکنند (props) و یک reactElement برگشت میدهند که توضوح میدهد چه چیزی باید نمایش داده شود .

به طور ساده یک تابع هستند که یک ورودی را قبول و با پردازش خروجی را  تولید خواهد کرد .

به طور مثال شما برای هر یک از اجزای سایت خود میتوانید یک Component‌ داشته باشید و هر جایی از سایت خود باشید میتوانید با صدا زدن این Component‌ به اجزای Component‌ دسترسی داشته باشید 

اولین کامپوننت شما میتواند به صورت زیر باشید :

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

و یا میتوانید به صورت فاکشن کامپوننت های خود را ایجاد کنید 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

به طور مثال هنگامی که کد زیر رندر میشود چه اتفاقی خواهد افتاد ؟

const element = <Welcome name="Hamed" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

۱ - ما ReactDOM.render() را  با مقدار <Welcome name="Hamed" /> صدا خواهیم زد 

۲ - react کامپوننت Welcome را با جایگزینی مقدار {name: 'Hamed'} فراخوانی خواهد کرد 

۳ - کامپوننت Welcome  المنت <h1>Hello, Hamed</h1> را بازمیگرداند 

۴ - React DOM آپدیت میکند DOM  را مطابق با <h1>Hello, Hamed</h1> 

props چیست و چطور میتوان از آن استفاده کرد ؟

پراپس ها یا (Props) داده های هستند که میتوانیم آن ها را میان کامپوننت ها انتفال بدیم . برای مثال ما یک کامپوننت A داریم و قصد داریم که مقادیری از داخل این کامپوننت به کامپوننت B ارسال کنیم .

به طور مثال در مثال بالا name یک props هست که  با مقدار Hamed  به کامپوننت Welcome ارسال شده است