ما هي React JS
هي مكتبة جافاسكريبت JavaScript تستخدم لبناء الواجهات المرئية للمستخدم في صفحات الانترنت. وقد تم تطوير هذه المكتبة من قبل شركة فيسبوك المعروفة .
وهذه المكتبة مصممة لصناعة تطبيقات الانترنت التي تعتمد على مبدأ SPA والذي يعني تصميم الموقع وعرضه ضمن صفحة واحدة.
وبما أن البرمجة هنا باستخدام لغة جافاسكريبت. هذا يعني أنه يمكن الاستفادة من جميع المكتبات الأخرى وإضافتها لبناء مشروع متكامل .
مع أن React بحد ذاتها كافية لصناعة موقع انترنت . ولكن قد نحتاج بعض المكتبات المشهورة لتسهيل العمل.
على سبيل المثال المكتبة Material-UI لبناء واجهة جميلة.
فكرة عمل ReactJS :
كما نعلم أن أي صفحة في مواقع الانترنت هي بالأصل مكتوبة بلغة HTML . وهذه اللغة الغنية عن التعريف تستخدم الوسوم كوسيلة تعريف لمكونات الصفحة.
فعلى سبيل المثال الكود التالي بلغة HTML هو لعرض صفحة فيها عنوان رئيسي , وكذلك فقرة مكونة من سطر واحد :
<!DOCTYPE html> <html> <head> </head> <body> <h1> العنوان </h1> <p> فقرة من سطر واحد </p> </body> </html>
وضعنا العنوان ضمن الوسم <h1> وكذلك الفقرة ضمن الوسم <p> .
وكل جزء نقوم بإضافته للصفحة يجب أن يتبع نفس القاعدة. بحيث نكتب وسم جديد لكل عنصر من عناصر الصفحة . وهكذا .
وكلما زاد عدد عناصر الصفحة تصبح كمية الوسوم كثيرة ويصعب التمييز بينها وتزداد الأخطاء . ومن ناحية أخرى ليس من السهل مشاركة أكثر من مبرمج في إضافة مكونات جديدة للصفحة .
وهنا يأتي دور ReactJS . لتنظيم هذه العملية بشكل سهل وأكثر ترتيباً .
حيث نحتاج فقط أن نكتب وسم واحد في الصفحة من نوع div . ونختار له إسم معرف ID خاص له ليكون هو الإطار الرئيسي والحاوي لمحتوى الصفحة. وليكن اسم هذا العنصر root . فيصبح كود الصفحة كما يلي :
<!DOCTYPE html> <html> <head> </head> <body> <div id="root"></div> </body> </html>
ثم نكتب مانشاء أن نعرضه في الصفحة في ملفات منفصلة بلغة جافاسكريبت حسب قواعد ReactJS كما سنتعلم لاحقا في هذه الدورة .
ويتولى ReactJS مهمة تحويل مانكتبه إلى عناصر مرئية في الصفحة ويضعها ضمن هذا العنصر ذو المعرف root بطريقة منتظمة وآمنة .
عند البرمجة باستخدام ReactJS يتم تقسيم الصفحة إلى أجزاء منفصلة بحسب رغبة المبرمج. على سبيل المثال كما في الشكل التالي:
تعتبر أجزاء الصفحة عبارة عن مكونات منفصلة تسمى Components . ولكل واحد منها الكود البرمجي الخاص به . ويكون هذا الكود مكتوب بلغة جافاسكريبت معدلة بحيث تحتوي كود HTML , وتدعى لغة JSX . وتكون ضمن ملف منفصل لكل مكون من مكونات الصفحة بلاحقة js أو jsx.
هذا التقسيم يفيد في الكثير من النواحي . وأهمها :
– إمكانية توزيع المكونات على المبرمجين للعمل على المشروع بشكل جماعي ضمن شركة مثلا .بحيث كل مبرمج يختص بجزء معين من الصفحة.
– إمكانية إعادة استخدام هذه الأجزاء في مشاريع أخرى. لأنها بالأصل ملفات منفصلة بحد ذاتها .
– سهولة تنقيح الأخطاء البرمجية .
مهمة ReactJS هي إدارة كل جزء أو كل مكون من مكونات الصفحة. وتنفيذ الأوامر الخاصة بهذا المكون . ووضعه في المكان المخصص له في الصفحة.
والجدير بالذكر هنا أن جميع المكونات التي نكتبها بلغة جافاسكريبت يتم تحويلها إلى أجزاء HTML افتراضية ضمن الذاكرة .
أي أنه لدينا نسختين من هذه المكونات . واحدة معروضة في نافذة المستعرض وهي مكونات حقيقية موجودة في ما يسمة DOM .
ونسخة ثانية افتراضية في الذاكرة تسمى نسخة Virtual DOM . وتقوم ReactJS بمراقبة التغيرات في المكونات الموجودة في الذاكرة الافتراضية وتنفيذ التعليمات في الذاكرة الافتراضية ثم نقل النتيجة النهائية للنسخة الحقيقية المرئية .
لهذه العملية فائدة كبيرة في سرعة التنفيذ وتقديم صفحة انترنت أكثر استقرارا .
هذه كانت لمحة عامة . وسننتقل للشرح بالتفصيل في المراحل التالية.
المتطلبات قبل البدء بالبرمجة
هذه الدورة لشرح البرمجة بالاعتماد على React JS , والتي تعتمد بشكل رئيسي على لغة البرمجة جافاسكريبت. لذلك من المفروض أن يكون لدى القارئ معلومات سابقة عن أساسيات هذه اللغة .
وبما أننا بالأصل نستخدم React لبناء موقع انترنت. فهذا يتطلب من القارء أن يكون يعرف أساسيات مواقع الانترنت مثل HTML و CSS وغيرها .
الأدوات المطلوبة للبرمجة هي :
– نحتاج Node JS : وهو برنامج نحتاجه في إنشاء المشروع و تجريبه وإضافة المكتبات وغيرها بالاعتماد على خدمة NPM المرفقة مع هذا البرنامج.
يمكن تحميله من هنا
– نحتاج أيضا محرر نص لكتابة الأوامر والتعليمات , وهنا يمكن استخدام أي محرر نصوص مثل المفكرة في نظام وندوز. ولكن من الأفضل استخدام بيئة برمجة مخصصة لكتابة البرامج للاستفادة من جميع الميزات مثل تنقيح الأخطاء , والكتابة بالألوان المتعددة للتعليمات وغيرها من متطلبات البرمجة .
وهنا نختار أشهر بيئة برمجة من شركة مايكروسوقت وهي Visual Studio Code . يمكن تحميله من هنا
ملاحظة :
سنشرح فيما يلي تثبيت وتجهيز الأدوات والبرامج التي ذكرناها. فإذا كنت ممن يعرف هذه المعلومات يمكنك الانتقال للجزء التالي من الدورة.
تثبيت Node JS على نظام وندوز Windows
بعد تحميل برنامج Node JS نقوم بتثبيته بالنقر على أيقونة البرنامج. فتظهر نافذة الإعداد التالية:
نضغط على التالي Next للانتقال للنافذة التالية :
نوافق على إتفاقية الاستخدام و نضغط التالي Next للانتقال للنافذة التالية :
هنا نختار مكان تخزين البرنامج على القرص الصلب , ومن الأفضل تركه حسب الاعدادات الافتراضية . ثم نضغط التالي للانتقال للنافذة التالية :
هنا نختار المكونات التي نريد تثبيتها , وفي حالتنا هنا نترك الخيارات كما هي لتثبيت جميع مكونات البرنامج .
بالضغط على التالي Next تظهرالنافذة التالية :
هذه النافذة تنصح بتثبيت بعض البرامج الإضافية ولكن في حالتنا هنا لا نحتاجها لذلك المسألة اختيارية . ونضغط التالي Next للانتقال للمرحلة التالية:
هذه مجرد نافذة للتأكيد على الموافقة على تنزيل البرنامج . نضغط على Install ليبدأ تثبيت البرنامج .
وعندما ينتهي من التثبيت تظهر النافذة التالية :
وهكذا نكون قد انتهينا من تثبيت البرنامج .
وللتأكد من ذلك نفتح موجه الأوامر في نظام وندوز مثلا . ونكتب الأمر node -v ثم نضغط Enter :
node -v v17.4.0
فتظهر على الشاشة رقم الإصدار للبرنامج . مثلا : v17.4.0
هذه كل ما يلزم بالنسبة لبرنامج NodeJS , فنحن لن نستخدم هذا البرنامج . وإنما سنحتاج واحدة من مرفقاته التي هي NPM . وهي عبارة عن مدير للمكتبات البرمجية التي سنستخدمها . ومن خلالها نقوم بتثبيت و إزالة هذه المكتبات بكل سهولة من خلال سطر الأوامر. سنشرحها بالتفصيل لاحقا.
تثبيت Visual Studio Code
هذا البرنامج هو محرر النصوص البرمجية الذي سنعتمد عليه في هذه الدورة.
بعد تحميل البرنامج من موقع شركة مايكروسوفت . نضغط على أيقونة البرنامج لنبدأ بالتثبيت . وتظهر لنا النافذة التالية:
نختار I accept the agreement للموافقة على اتفاقية الاستخدام . ثم نضغط التالي Next فتظهر لنا النافذة التالية :
هنا يوجد بعض الخيارات مثل وضع أيقونة للبرنامج على سطح المكتب , وغيرها من الخيارات التي سنتركها كما هي . ونضغط التالي لننتقل للنافذة التالية:
هذه رسالة تأكيد على الموافقة . نضغط Install ليبدأ تثبيت البرنامج على القرص الصلب.
وعندما ينتهي معالج الإعداد تظهر النافذة التالية التي تخبرنا بنجاح عملية التثبيت :
نضغط على إنهاء Finish . وهكذا نكون قد انتهينا من تثبيت بيئة البرمجة .
وسنجد إيقونة هذا البرنامج في قائمة إبدأ كما هو الحال بالنسبة لجميع البرامج في نظام وندوز .
بالضغط على هذه الإيقونة يبدأ برنامج Visual Studio Code بالعمل وتظهر الواجهة الرئيسية للبرنامج كما في الشكل التالي :
بيئة البرمجة هذه بسيطة وسهلة الاستخدام . وكما نشاهد في البداية تظهر لنا نافذة الترحيب Get Started التي تحتوي بعض الاختصارات مثل إنشاء ملف جديد أو مجلد جديد. وغيرها من وسائل المساعدة . لكن لانحتاجها حاليا وسنكتفي بإغلاقها .
ولنبدأ أولا بإنشاء مجلد جديد وليكن اسمه React101 في أي مكان على القرص الصلب.
ثم من نافذة Visual Studio Code السابقة نختار Open Folder .
فتظهر نافذة مستعرض الملفات , ثم نقوم بتحديد المجلد الذي أنشأناه كما في الشكل :
بالضغط على Add تظهر لنا الرسالة التالية التي تطلب الموافقة على السماح بتنفيذ البرامج ضمن هذا المجلد :
نضغط على Yes, I trust the authors . وبذلك يكون قد تم إضافة المجلد React101 ليكون هو المجلد الرئيسي لهذه الدورة .
لنلقي نظرة سريعة على الواجهة الرئيسية لبيئة البرمجة Visual Studio Code .
في القسم 1 من أقصى اليسار يوجد مجموعة من الرموز التي هي أزرار لتحدد ماهو محتوى النافذة ذات الرقم 2 . وأهم هذه الأزرار هي بالترتيب :
– 
مستعرض الملفات.
– 
البحث ضمن ملفات المشروع.
في القسم 2 نجد حاليا مستعرض ملفات المشروع Explorer . ونلاحظ وجود المجلد الذي أنشأناه قبل قليل وهو React101 .
أما في القسم 3 فيوجد محرر الملفات الذي من خلاله نقوم بكتابة وتعديل الأوامر البرمجية .
هكذا نكون قد انتهينا من تثبيت البرامج وتجهيز بيئة العمل المطلوبة لكتابة البرامج في هذه الدورة.
في الجزء التالي نبدأ بكتابة المشروع الأول.
