بناء الـ UI باستخدام React
الـ Component عبارة عن function عادية جدا تقوم بارجاع كود JSX نصف به العنصر الذي سيظهر في الواجهة.
هذه الـ function تستقبل props وهي عبارة عن الـ properties التي يتم تمريرها بين الـ components وبعضها, وهي طريقة التواصل بين المكونات كما سنري الان.
// component name starts with a capital letter
function Header() {
// it returns a JSX code
return Hello React!
;
}أكيد انت تعلم الان ما سيحدث خلف الكواليس, ستقوم React بتحويل كود الـ JSX الراجع من هذه الدالة الي عنصر مرئي علي الشاشة بطريقة declarative كما شرحنا في الدروس السابقة.
لاحظ أن اسم دالة الـ component تبدأ بحرف كبير لتفرقتها عن الدوال العادية.
ليتم ادراج هذا المكون في مكان ما في الصفحة يتم استداؤه هكذا
Header()لنقوم الان بدمج هذا المكون مع تطبيقنا الصغير الذي أنشأناه في الدرس السابق
كما ذكرنا أيضا في المحاضرات السابقة أن أي مكون يمكنه أن يحتوي علي مكونات أخري تعتبر مكونات أبناء له.
فمثلا يمكن لهذا الـ header أن يحتوي قائمة navbar.
الخطوات بسيطة, لنقم أولا بانشاء مكون Navbar ثم نقوم باضافته داخل الـ header
ماذا لو أردنا تمرير بعض البيانات من Header الي المكونات الابناء؟ هنا تأتي ميزة props وهذا ما سنتعلمه في الدرس القادم