قرّرتُ أن أتعلّم رياكت React. لماذا؟ لأنه شاع ذكره في الأرجاء، الجميع يتكلّم عن مزاياه، جميع عروض العمل تطلب إتقان رياكت، جميع المنصات المتداولة أصبحت تدعمه، لذلك قلت في نفسي دعني أتعلّمه فالأرجح أنه يستحق الوقت المبذول في سبيله. وهذه مقدمة ستختصر عليك الطريق وتعطيك العصارة وتمدّك بكل ما يجب أن تعرفه عن رياكت.

طريقتي

لست ممّن يبدأ في التعلّم عن طريق تتبّع شروحات الخطوة بالخطوة حتى أحصل على النتيجة، كلا، أحبّ أن تتم الإجابة على جميع الأسئلة التي تدور في رأسي أوّلا، فإذا طلب مني في الشروحات تنصيب شيء ما فأنا لا أفعل ذلك ببساطة، بل يجب علي أن أعرف أوّلا لماذا يجب علي تنصيبه، ولماذا هو بالذات وليس غيره، وفيما سينفعني، وهل أستطيع العمل دونه.. هكذا هي طريقتي، فإذا تعلّمت شيئا فإنّي أعرف عنه كلّ شيء وأعرف ما في حشاشته من عناصر فلا أترك شيئا يعمل لمجرّد أنه يعمل بالصدفة. ولأن العثور على أجوبة لجميع تساؤلاتك يتطلب وقتا طويلا في البحث والقراءة، فإن مقالات كهذه هي أفضل وسيلة تساعدك إيجاد أجوبة لكل ما قد يزاحم ذهنك. فهلمّ بنا نبدأ على بركته.

لماذا رياكت وليس غيره؟

عندما تبحث على الويب لماذا يجب عليك تعلّم رياكت، فإنك غالبًا تجد المميزات التقنية لرياكت، مثل أنه يقوم بتحديث الواجهة تلقائيًا عند تغيّر الحالة، وأنه يقوم بتحديث الدوم (DOM) بشكل أسرع من خلال اعتماده على دوم وهمية تُخزّن في الذاكرة.. قد تكون هذه فعلًا مميزات عظيمة، لكنها لا تنفعني في شيء باعتباري أكتشف رياكت أوّل مرّة وأبحث عن دوافع تقنعني بتخصيص جزء من وقتي الثمين لتعلّمه، وذلك علمًا أنني أستعمل ما أستعمله من مكتبات أتقنها فعلًا وتقوم بالواجب على أحسن وجه. فأنا إذن أحتاج إلى مميزات واضحة مقنعة مفهومة تجعلني أقول: أها إنّما رياكت هو ما أبحث عنه.

أهمّ مميزات رياكت هو استناده على المكوّنات، فكما تعلم، غالبًا ما تجد نفسك تطوّر عناصر سبق لك تطويرها في تطبيقات سابقة، مثلا، سبق لك تطوير جدول بيانات يعرض نتائج البيانات ويضم حقول للبحث والفرز وكذا بعض المرشّحات، وبعد فترة من الزمن، تجد نفسك تحتاج إلى نفس الجدول في تطبيق آخر، فتبدأ غالبًا بعملية نسخ ولصق لمختلف الرِمازات (الأكواد) التي تكوّن هذا الجدول وغالبًا ما تنتهي هذه العملية بخَيلوطة تصعب السيطرة عليها. أمّا رياكت فهو يجعلك تطوّر جدول البيانات هذا كمكوّن قابل لإعادة الإستخدام على شكل وسم أشتمل بالضبط كما تستخدم <button> و <label>… أليس ذلك رائعًا؟

ثاني المميزات أن تعلّمه سريع وعلى المقاس، يعني يمكنك أن تتعلّم منه فقط ما تحتاجه للاستخدام، لست مجبرًا أن تتعلّم تفاصيل كثيرة وتقنيات قبل أن تصبح قادرًا على استخدامه في تطبيقاتك، رياكت يمكن إدماجه ضمن تطبيقاتك الموجودة واستخدامه جنبًا لجنب معية رمازاتك (أكوادك) الجاهزة، وبالتالي فإنك تستطيع تعلّمه بينما أنت تستخدمه، وهذا أمر ممتاز يوفّر كثيرًا من الوقت ويعطي نتائج سريعة تحفزّك أن تتعلّم أكثر.

ثالث المميزات أن رياكت هو إطار عمل متخصص، يستهدف فقط واجهات المستخدم، وبالتالي فإنه ليس وحشا كبيرًا يأتي على الأخضر واليابس ويغيّر كلّ جوانب التطوير لديك ويجعلك ترمي جانبًا كل ما تعلّمته سابقا واعتدت عليه ويفرض عليك سلوكيات جديدة. أبدًا، رياكت هو نفس جافاسكربت التي تعرفها مع بعض التسهيلات في بناء واجهات المستخدم (GUI). وبالتالي فإن اعتناقك لرياكت لا يجعلك تتخلى عن أصدقائك القدامى وعاداتك الجميلة. رياكت لا يجعلك تتغيّر، بل تتطوّر فقط.. نعم أجيد إضفاء جوّ الرمنسية على الأمور.

توجد مميزات رائعة أخرى طبعا لرياكت، لكني لن أتحدّث عنها في هذا القسم من المقالة لأنها تقنية أكثر، ولا يكون لها معنى إلا بعد أن تكون قد جرّبت رياكت وتفاعلت معه قليلًا، أما بالنسبة للشخص الذي لا يعرف عن رياكت سوى الإسم ويبحث عن أسباب تحفّزه لتعلّمه، فإن الدوافع الثلاثة السابقة هي أهم ما يجب معرفته: مكوّنات يعاد استخدامها، تعلّم سريع على المقاس، إطار عمل صغير متخصص في واجهات المستخدم.

ما الذي نحتاجه لنبدأ

يمكن استخدام رياكت بطرق مختلفة، منها السريعة والمباشرة مثل إضافته كوسم في صفحتك والبدء في الاستخدام، لكن دعنا من كل ذلك فنحن سنعتمد الطريقة والأدوات الرسمية التي تمكّنك من تطوير تطبيقات متكاملة وليس ترقيعات للبدء بسرعة، لأن ذلك لا ينفي حاجتك لبناء بيئة التطوير الخاصة بك في نهاية المطاف، بل إنك تؤجلها فقط كي تبدأ بسرعة، وهذه ليست طريقتي لأنني أريد أن أتعلّم كلّ شيء من أساسه دون اختصارات تجعلني غير مدرك لما يجري في الخفاء.

نحتاج NODEJS

نود جس (NodeJs) هو منصة تشغيل تسمح لك بتشغيل أرمزة (أكواد) جافاسكربت خارج المتصفح، أي تنفيذ جافاسكربت على نظام التشغيل كأنها تطبيقات عادية. لكن مادام رياكت مخصص لتطوير واجهات الاستخدام ويعمل جهة العميل (على متصفح الزائر)، فلماذا أحتاج نود؟ هذا سؤال تبادر إلي وجوابه أنك في الواقع لست مضطرًا لاستخدام نود كي تعمل بـ ريكات، لكن مع تقدّمك في الاستخدام، سوف تحتاج مكتبات تسهّل عليك بعض الأمور، مثل مكتبة بابل التي تسمح لك بكتابة أشتمل داخل جافاسكربت دون علامات اقتباس (“). وستعرف لاحقا لماذا ستحتاج إلى شيء كهذا. المهم أن بابل هذه مكتبة تقوم بمراقبة ملفاتك ورصد التغييرات وترجمتها (كمبلة/كمبايل) تلقائيا لصيغة يفهمها المتصفّح، وهذه العملية تتم بواسطة نود على نظام التشغيل لديك.

نحتاج NPM

إنبم (NPM) هو مدير حزمات جافاسكربت، والحزمة نعني بها مكتبة برمجية، فعوض البحث عن الحزمات وتنزيلها وإضافتها يدويا إلى مشروعك، وكذا تحديثها يدويا عند توفر التحديثات لها، والبحث عن اعتمادياتها (المكتبات الخارجية التي تعتمد عليها) وتنصيبها.. فإن إنبم يرفع عنك هذا العمل المضني غير الممتع ويتكفّل هو بجلب وتنصيب وتحديث الحزمات بشكل تلقائي، يكفيك أن تحدد له أسماء الحزم التي تحتاجها وهو يتكفّل بالباقي. وعلما أن إنبم تم تطويره بجافاسكربت فإنه يحتاج إلى نود كي يعمل، وبالتالي فإنك غالبا ما تجد نود وإنبم يُذكران جنبًا إلى جنب أينما قرأت عنهما، وهذا من الأسباب التي تجعل نود مطلوبًا للبدء برياكت، فرياكت إذن يعتمد على نود بشكل غير مباشر.

كيف نبدأ؟

هذه الأساسيات ليست دليلًا تطبيقيا يرشدك كيف تقوم بالأمور خطوة بخطوة، وإنما هي معلومات تجعلك واعٍ بكلّ ما يتعلّق بالموضوع، حتى إذا ما اتّبعت لاحقًا إحدى الشروحات التطبيقية تجد نفسك عارفًا بما يجري وما يجب القيام به.

بعد تنصيب نود وإنبم فإنك تُدخل الأمر أسفله، والذي سيقوم تلقائيًا بتنزيل، تنصيب وإعداد بيئة تطوير جاهزة. لكن كما أسلفت، نحن لن تمرّ علينا هكذا مرور الكرام، بل إننا سنُشَرّح أعضاء الجثة ونكشف عمّا بداخلها حتى نكتشف حقيقة الأمور. فيما يلي الأمر الذي يقوم بكلّ شيء.

npx create-react-app my-app
cd my-app
npm start

ستجد أنه تمّ إنشاء مجلّد بالإسم المعطى، my-app في هذه الحالة، وتمّ وضع مجموعة من الملفات والمجلدات بداخله، وفي ما يلي بيانها:

المجلد public يضم الصفحة الرئيسية إندكس، وفيها الهيكل فقط دون محتوى، هذا الأخير سيتم إنشاؤه في مكان آخر وليس مباشرة على الإندكس. يضم هذا المجلد أيضًا الأيقوفات (أيقونات المتصفح favicons)، وملف روبوتس، هذا كل شيء، المفروض أن لا يتم استعمال هذا المجلد لوضع ملفات سيسس (CSS) وجافاسكربت وذلك على عكس ما جرت العادة، وسأوضح لاحقا لماذا. إذن باختصار، هذا المجلد يضم ملف إندكس هيكلي تقوم فيه بتعديل عنوان الصفحة والأيقوفات فقط لا غير.

المجلد src وفيه موضع الحل والعقد، هنا مصادر التطبيق التي يتم لاحقًا تجميعها وتحزيمها ودمجها مع الملف إندكس الذي تكلّمنا عنه سابقًا. ضمن هذا المجلد ستجد بشكل افتراضي الملف index.js وهو مدخل التنفيذ، غالبًا يضم رماز التصيير العام. غير هذا، فإن بقية الملفات هي خاصة بالتطبيق وقد تختلف من مشروع لآخر، غالبًا ما تجد الملف App.js والذي يجمع الواجهة الرئيسية للتطبيق من مختلف المُكوّنات، حيث أنّ لكلّ مكوّن ملفه الخاص باسمه ضمن هذا المجلد.

يضم المجلد src أيضًا مختلف الأصول المتعلقة بالتطبيق كملفات سيسس (CSS) والصور وغيرها، ويتم إضمامها من خلال المفتاحية import. يمكن طبعًا استعمالها بالطريقة التقليدية أي بجعلها في المجلد public وإضمامها من خلال الوسم <link> وما شابه، لكن ينصح باستعمال import للاعتبارات التالية:

  • يتم تصغير (minify) وتحزيم (bundle) هذه الملفات ودمجها معًا لتقليل طلبات الشبكة.
  • الملفات المفقودة تمنع عملية التجميع وتعرض لك رسالة خطأ.
  • أسماء الملفات الناتجة تضمّ هاشات تمنع المتصفّح من تخبئة (caching) الملفات مما قد لا يعكس تغييراتك في الحال.

الملف package.json وهذا الملف يضم تصريحات بالحزمات المرغوب استخدامها، ويعتمد عليه مدير الحزمات إنبم لجلب الحزمات وتحديثها ضمن المشروع.

المجلد node_modules وهو الذي يضم الحزمات التي تمّ تعريفها في package.json وتنزيلها من طرف إنبم. لا يجدر بك تغيير محتوى هذا المجلد إلا من خلال أوامر إنبم.

كيف يعمل؟

في الملف index.js ستجد السطور التالية:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

يعمل السطران الأوّلان على إضمام مكتبات رياكت. فيما يقوم السطر الثالث بإضمام الملف app.js والذي يمثل واجهة التطبيق بكلّ ما تحويه من مكوّنات، تذكّر، ملف app.js ليس إجباري، يمكنك استعمال مكوّناتك مباشرة ضمن index.js أو أن تجعل لها أيّ ملف آخر غير app.js. المهم ألا تنسى إضمام import الملفات المستخدمة. السطر الأخير هو لإضمام عامل الخدمة serviceWorker.js وموضوعه خارج نطاق هذه المقالة. يمكنك حذفه لو شئت أو الإبقاء عليه فذلك لن يمنع تطبيقك من الاشتغال.

ReactDOM.render(<App />, document.getElementById('root'));

هذا السطر يقول لرياكت أن يقوم بتصيير المكوّن App ضمن القسم (div) ذي المعرّف root، وهذا القسم لعلّك لاحظت أنه مُعرّف في الملف index.html كما يلي:

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>

إذن ما سيحدث إجمالًا أن رياكت سيقوم بتصيير (render) أي إظهار مخرجات المكوّن app ضمن القسم root.

إذا فتحنا الملف app.js سنجد أنه يضمّ وظيفة باسم app تردّ واجهة التطبيق، وتستخدم في ذلك ما تمّ تعريفه من مكوّنات.

خاتمة

كانت هذه مقدمة تجعلك تأخذ فكرة شاملة عن رياكت لكي تقرّر ما إذا كان فعلًا مناسبًا لاحتياجاتك وتوقعاتك وما إذا كان يستحق بذل الوقت من أجل تعلّمه. صرتَ الآن تعرف لماذا رياكت وليس غيره، وتعرف كيف تقوم بإعداد بيئة تطوير مبدئية وما الملفات التي تضمّها هذه البيئة.

أدعوك لتقرأ عن:

كيف أستضيف مشروع نود على سيبانل.