یکی از بخش های مهم برنامه React مبحث کامپوننت ها یا components می باشد.
استفاده از کامپوننت ها لازم و ضروری نیست اما آنها پایه و اساس برنامه های react هستند
ویژگی کامپوننت ها در react:
- تکرارپذیری استفاده از کدها در قسمت های مختلف برنامه بدون محدودیت است.
- نوشتن کدها را تمیزتر می کند
- دیباگ کردن و خطایابی را راحتتر می کند
درصورت عدم استفاده از کامپوننت ها باید المنت های خود را در قالب متغیرها تعریف کنیم.
مثال:
|
1 2 3 4 5 |
const element = ( <div> <p>the time is {new Date().toLocaleTimeString()}</p> </div> ); |
دو روش برای ایجاد کامپوننت وجود دارد:
- تعریف کامپوننت بصورت کلاس یا class
- تعریف کامپوننت بصورت تابعی یا function
نمونه یک کامپوننت
به این تصویر نگاه کنید.این یک برنامه todo است.این برنامه از بخش searchbox، لیست todo ها و اضافه کردن todo جدید تشکیل شده است.
همانطور که در تصویر مشاهده می کنید برنامه شما همان todo app است که دارای خط مشکی رنگ می باشد.این برنامه شامل کامپوننت های کوچکتری به نام search،todolist و add todo به رنگ های قرمز،نارنجی و آبی است.
بخش نارنجی رنگ خود دارای کامپوننت زیر مجموعه به رنگ سبز رنگ است.بنابراین یک طبقه بندی از بالا به سمت پایین است.
