كورس ReactJS .. اتعلم بالامثلة
ما هو React؟
هو اطار عمل Javascript لعمل واجهة مستخدم تفاعلية interactive UI
يتم تقسيم واجهة المستخدم الي وخدات صغيرة تسمي Components
كما هو واضح, لدينا هنا مجموعة Components مثل Logo, Navbar, Sidebar, Posts
كل Component يكون معزول تماما عن باقي المكونات, فمثلا عند اضافة CSS style لمكون ما فانه لا يؤثر علي باقي المكونات
المكون الواحد يمكن أن يحتوي علي مكونات أصغر, كل منها يمكن أيضا أن يحتوي علي مكونات أصغر, مما يكون شجرة, تماما مثل شجرة DOM tree في جافاسكريبت
يقوم المتصفح بترجمة هذه الشجرة الي عناصر تظهر علي الشاشة وهي التي تكون بدورها واجهة المستخدم
اليك مثال لشجرة DOM tree قام المتصفح بترجمتها الي عناصر ظاهرة علي الشاشة
يمكن استخدام DOM API للتحكم في هذه العناصر, مثلا تغيير مظهرها او حذف عنصر أو تحريك عنصر من مكانه
فمثلا لاضافة عنصر H2 جديد أسفل عنصر H1 الموجود بالفعل في الصفحة يمكن تنفيذ الكود التالي
// create a new H2 element
const h2 = document.createElement('h2');
// add text content
const text = 'I ♡ mobarmegeen.com';
const headerContent = document.createTextNode(text);
h2.appendChild(headerContent);
// append our header to the existing H1
const h1 = document.getElementsByTagName('h1')[0];
h1.appendChild(header);اذا شعرت أننا قمنا بعمل خطوات كثيرة فقط لاضافة عنصر واحد في الصفحة, فهنا تأتي ReactJS حيث لا تحتاج لكتابة عشرات الاسطر لتكوين واجهة مستخدم رائعة.
يتعامل ReactJS بطريقة وصفية declarative بدلا من صيغة التعليمات imperative مما يسهل علينا الأمر كثيرا
تريد أن تعرف المزيد عن الفرق بين declarative و imperative؟
الفرق بين declarative و imprative
تخيل أنك ركبت تاكسي, كيف تحدد له وجهتك؟
أذا أعطيته الخطوات بالتفصبل, مثلا تقول له اتجه يمينا ثم يسارا وادخل الشارع التالي ثم انعطف يمينا .. وهكذا, فانت تصف الطريق بالتفصيل علي هيئة تعليمات وهو ما يسمي imprative
هذه الطريقة مملة للغاية وتتطلب أن تكون ملما بكل تفاصيل الطريق جيدا
ماذا لو قلت للسائق فقط اريد التوجه للمكان الفلاني, والسائق يعرف كيف يذهب … هذه الطريقة اريح وأسهل كثيرا .. صحيح؟ هذه الطريقة تسمي declarative
حيث نصف فقط ما نريد ويقوم شخص أخر (في حالتنا سائق التاكسي) بتنفيذ الخطوات بمعرفته
بدلا من أن نقوم بكتابة تعليمات كثيرة في Javascript لبناء واجهة المستخدم, نخبر React عن الشكل النهائي وهي تقوم ببناء كل شئ من أجلنا