إعداد مشروع React باستخدام Create React App

React هي واحدة من أكثر مكتبات JavaScript شعبية لتطوير تطبيقات الواجهة الأمامية. إنها مكتبة مفتوحة المصدر تم تطويرها في الأصل بواسطة Facebook. سرعان ما أصبحت React شائعة لإنشاء تطبيقات سريعة باستخدام JSX – نموذج برمجة يجمع بين JavaScript وبنية شبيهة بـ HTML.

في السابق، كان إعداد مشروع React عملية معقدة. فقد تطلب تكوين المكونات التالية يدويًا:

• نظام بناء
• مترجم الكود (يحول الصيغ الحديثة إلى أكواد يمكن للمتصفح قراءتها)
• بنية الدليل الأساسية للمشروع

لحسن الحظ، ولت تلك الأيام منذ زمن طويل، بفضل Create React App. إنها أداة رائعة تقوم بأتمتة كل هذه الخطوات. يتولى Create React App مسؤولية ترجمة الكود، وفحصه (linting)، واختباره، وأنظمة البناء. بالإضافة إلى ذلك، فهو يأتي مع خادم يدعم إعادة التحميل السريع (hot reloading)، مما يعني تحديث صفحات الويب عند إجراء التغييرات. بالطبع، يتم كل هذا ضمن بنية دليل منظمة.

باختصار، لا داعي للمرور بالجهد اليدوي لتكوين أنظمة بناء مثل Webpack، أو مترجم مثل Babel. مع وجود أشياء أقل للقلق بشأنها، فأنت حر في التركيز بشكل كامل على تطوير الواجهة الأمامية. يتيح لك Create React App البدء مع React بأقل قدر من التحضير.

في هذا الدليل، سنعرض كيفية استخدام Create React App وتشغيل تطبيق React أساسي. ويمكن أن يكون بمثابة الأساس لأي مشروع تطبيق مستقبلي.

المتطلبات الأساسية

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

• • خادم Ubuntu مهيأ بشكل صحيح. يمكنك اتباع خطوات تكوين خادم Ubuntu على CloudSigma.
  • تثبيت أحدث إصدار من Node.js. إليك دليل خطوة بخطوة حول تثبيت Node.js على Ubuntu.

الخطوة 1: إنشاء دليل مشروع npm مخصص

بالنسبة لحزم Node.js، فإن npm هو مدير الحزم الافتراضي. سنستخدم npm لإنشاء دليل مشروع مخصص. سيستضيف ملفات مهمة مثل package.json التي تخزن جميع البيانات التعريفية (metadata) حول المشروع ووحدات تبعية Node.js الإضافية. JSON هو تنسيق قياسي لمشاركة البيانات يعتمد على كائنات JavaScript. راجع هذا الدليل إذا كنت تريد معرفة المزيد عن JSON.

أولاً، قم بإنشاء دليل مخصص:

بعد ذلك، سنخبر npm لبدء بيئة تطوير داخل الملف. سيؤدي ذلك إلى إنشاء ملف package.json المطلوب للمشروع. قم بتغيير الدليل الحالي:

قم بتشغيل أمر npm init:

لاحظ أنه إذا كنت تريد أن يكون هذا الدليل جزءًا من مستودع git، فمن المستحسن إعداده أولاً. سيكتشف برنامج الإعداد النصي ذلك تلقائيًا ويكوّن كل شيء وفقًا لذلك. بمجرد الانتهاء، يجب أن يكون هناك ملف package.json في الدليل. تحقق منه باستخدام محرر نصوص:

الخطوة 2: إنشاء مشروع React باستخدام Create React App

في هذه الخطوة، سنستدعي Create React App لإنشاء مشروع React التجريبي الخاص بنا. سيقوم هذا البرنامج النصي بنسخ كل ما هو ضروري إلى دليل جديد مع جميع التبعيات. يأتي مدير الحزم npm أيضًا مع الأداة npx. تُستخدم لتشغيل الحزم القابلة للتنفيذ. سنستخدمها لتشغيل برنامج Create React App النصي دون تنزيل المشروع فعليًا.

سيقوم التنفيذ بتشغيل create-react-app في الدليل المحدد. سيقوم أيضًا بتشغيل أوامر npm install لتثبيت التبعيات. لسهولة الاستخدام، سنستخدم الاسم cloudsigma-react-react-tutorial. قم بتشغيل الأمر التالي:

في نهاية العملية، سترى الإشعار التالي. إنها رسالة النجاح إذا تمت عملية التثبيت بنجاح. كما توضح أيضًا الموقع الذي تم إنشاء المشروع فيه.

الخطوة 3: تطبيق React-Scripts

الآن، سنلقي نظرة عامة سريعة على برامج react-النصية المختلفة التي تم تثبيتها أثناء التثبيت.

• • سنقوم بتشغيل برنامج test النصي لتنفيذ كود الاختبار.
  • يقوم برنامج build النصي بإنشاء نسخة مصغرة من مشروعنا (لبيئة الإنتاج).
  • أخيرًا، يتيح برنامج eject النصي التحكم الكامل في التخصيص.

أولاً، تحقق من محتويات دليل مشروع React:

فيما يلي وصف لكل ملف:

• • node_modules/: يحتوي هذا الدليل على جميع مكتبات JavaScript الخارجية التي سيستخدمها التطبيق. نادراً ما يكون من الضروري العبث هنا.
  • public/: يستضيف بعض ملفات HTML و JSON والصور الأساسية. وهو بمثابة جذر المشروع.
  • src/: يحتوي هذا الدليل على أكواد React JavaScript لمشروعنا. هذا هو المكان الذي سنقضي فيه معظم وقتنا. سنستكشف هذا الدليل بشكل أكبر في الجزء التالي من الدليل.
  • .gitignore: هو ملف يصف المجلدات التي سيتجاهلها git، على سبيل المثال، مجلد node_modules. بشكل عام، من الأفضل استبعاد المجلدات التي تحتوي على ملفات كبيرة أو تستضيف ملفات سجل غير ضرورية لتضمينها في نظام التحكم في الإصدار. في هذه الحالة، سيشمل أيضًا بعض المجلدات الخاصة بـ React.
  • README.md: هو ملف markdown يحتوي على الكثير من المعلومات المفيدة حول Create React App. على سبيل المثال، يتضمن ملخصًا لروابط الأوامر للتكوين المتقدم. في الوقت الحالي، ليس لدينا عمل معه. ومع ذلك، مع تقدم المشروع، ستضيف المزيد من التوثيق حول المشروع.

تُستخدم الملفات package.json و package-lock.json بواسطة npm. عند تشغيل أمر npx الأولي، قام بإنشاء المشروع الأساسي. وعندما تم تثبيت الاعتماديات الإضافية، قام بإنشاء package-lock.json. npm يستخدم package-lock.json لضمان تطابق الحزم مع الإصدارات الدقيقة. بهذه الطريقة، إذا قام شخص آخر بتثبيت مشروعك، فسيحصل أيضًا على اعتماديات متطابقة. ونظرًا لأنه يتم إنشاؤه وإدارته تلقائيًا، فنادرًا ما تحتاج إلى لمسه.

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

إنه ملف JSON يحتوي على كائنات مختلفة. ألقِ نظرة على كائن البرامج النصية (scripts). وهو يحتوي على أربعة برامج نصية مختلفة:

• • start
  • build
  • test
  • eject

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

• • البرنامج النصي للبناء

لتشغيل برنامج npm نصي، تكون بنية الأمر كما يلي:

لتشغيل برنامج build النصي، استخدم الأمر التالي:

سيبدأ عملية تجميع الأكواد في حزمة قابلة للاستخدام. بمجرد الانتهاء، تحقق من دليل المخرجات:

لاحظ أن هناك دليلاً جديدًا باسم build/ متاح. وهو يحتوي على نسخة مصغرة ومحسنة من الملفات الأخرى. يوصى بوضعه في ملف .gitignore حيث يمكننا دائمًا إنشاؤه باستخدام برنامج build النصي.

• • البرنامج النصي للاختبار

إن برنامج test النصي هو أحد تلك البرامج النصية التي لا تتطلب معامل التشغيل (run) لـ npm لتشغيله. ومع ذلك، فإنه سيظل يعمل بشكل جيد معه. عند تشغيله، سيبدأ هذا البرنامج النصي أداة تشغيل اختبار تسمى Jest. يبحث برنامج الاختبار عن أي ملف مشروع بامتدادات الملفات .spec.js أو test.js ويقوم بتشغيل تلك الملفات.

أمر npm التالي سيقوم بتشغيل برنامج test النصي:

هناك بعض الأشياء التي يجب ملاحظتها في المخرجات. تذكر أن أداة تشغيل الاختبار تبحث فقط عن الملفات ذات الامتدادات المحددة؟ في هذه الحالة، لا توجد سوى مجموعة اختبار واحدة (ملف واحد فقط يحتوي على .test.js امتداد). وهو يحتوي فقط على اختبار واحد. يمكن لـ Jest اكتشاف الاختبارات تلقائيًا في التسلسل الهرمي للكود، لذا فأنت’ حر في تضمين الاختبارات في دليل.

بالإضافة إلى ذلك، لا يقوم Jest’ بمجرد تشغيل الاختبار مرة واحدة والخروج. بل يستمر في تشغيل الاختبار في الطرفية. إذا تم إجراء أي تغييرات على الكود المصدري، فإنه سيعيد تشغيل الاختبارات مرة أخرى. يتيح Jest أيضًا تحديد الاختبارات التي سيتم تشغيلها. على سبيل المثال، بالضغط على 0، يمكنك إخبار Jest باختبار تلك الملفات التي تم تغييرها فقط. ومع نمو مجموعات الاختبار، يوفر هذا الخيار الكثير من الوقت. للخروج من مشغل اختبار Jest، اضغط على q.

• • سكربت Eject

إن eject يقوم السكربت بنسخ جميع التبعيات وملفات التكوين إلى المشروع، مما يمنحك تحكمًا كاملاً في الكود. ومع ذلك، من خلال القيام بذلك، فإنك تقوم بإزالة المشروع من سلسلة الأدوات المتكاملة لـ Create React App. بمجرد تشغيله، لا توجد’ طريقة للتراجع عن ذلك.

فائدة Create React App هي أنه يرفع عنك عبء التكوينات العديدة. يتطلب بناء أي تطبيق JavaScript حديث الكثير من الأدوات التي تعمل معًا. يتعامل Create React App مع جميع التكوينات نيابة عنك، لذا فإن فك (ejecting) المشروع يعني أنه يتعين عليك القيام بكل ذلك يدويًا بعد ذلك.

أحد العيوب الملحوظة في Create React App هو أنه نظرًا لأنه يدير جميع التكوينات بنفسه، فإنه لا’ يوفر تخصيصًا كاملاً للمشروع. بالنسبة لمعظم المشاريع، لا يمثل ذلك مشكلة. ومع ذلك، إذا كنت تريد التحكم الكامل في المشروع، فسيتعين عليك فك (eject) الكود. بمجرد فكه، لن’ تتمكن من التحديث إلى إصدارات جديدة من Create React App. يجب عليك إدارة جميع التحسينات يدويًا.

الخطوة 4: بدء تشغيل الخادم

الآن، سنقوم’ ببدء تشغيل الخادم المحلي وتشغيل المشروع على متصفح الويب. لبدء تشغيل الخادم، لدينا سكربت آخر في متناول اليد. لا يتطلب تنفيذه الأمر npm run . عند تشغيله، يبدأ السكربت خادمًا محليًا، ويشغل كود المشروع، ويطلق مراقبًا، ويستمع لتغييرات الكود. تظهر التغييرات مباشرة على المتصفح. الأمر التالي سيبدأ تشغيل الخادم:

سيعرض المخرج عنوان URL لزيارة المشروع في المتصفح. كما سيعرض معلومات متنوعة حول المشروع قيد التشغيل. افتح عنوان URL في المتصفح:

كما يوضح المخرج، يستخدم Create React App المنفذ 3000 لخدمة المشروع. إذا كان المنفذ قيد الاستخدام بالفعل، فسيستخدم Create React App المنفذ التالي المتاح. إذا كان لديك جدار حماية مهيأ، فيجب أن يسمح بمرور حركة المرور إلى المنفذ 3000 (أو المنفذ الذي يبلغ عنه Create React App). يمكنك معرفة المزيد حول إدارة جدار حماية UFW هنا.

للخروج من الخادم، اضغط على Ctrl+C من نافذة الطرفية. سيؤدي ذلك إلى إنهاء العملية الجارية (مثيل الخادم).

الخطوة 5: تعديل الصفحة الرئيسية

بعد ذلك، سنتعلم’ كيفية تعديل الأكواد المخزنة في الدليل public/ . يحتوي على صفحة HTML الأساسية ويعمل كجذر للمشروع. على الرغم من أنك قد لا تحتاج إلى تعديله أكثر في المستقبل، إلا أنه يمثل أساس المشروع.

أولاً، قم بتشغيل الخادم باستخدام npm، ثم انتقل إلى الدليل public/ :

سيحتوي الدليل على ملفات مثل favicon.ico, logo192.png, logo512.png، وما إلى ذلك. هذه هي الرموز التي سيراها المستخدم الذي يزور صفحة الويب على علامة التبويب أو المتصفح أو الهاتف الخاص به. سيقوم المتصفح تلقائيًا بتحديد الحجم المناسب. في النهاية، ستقوم’ باستبدالها برموز مناسبة لمشروعك. في الوقت الحالي، سنتركها كما هي.

الملف manifest.json يستضيف مجموعة منظمة من metadata. وهو يصف المشروع، ويسرد الرموز المتاحة، والمزيد.

الملف robots.txt يستضيف معلومات لـ web crawlers. تقوم برامج زحف الشبكة “بالزحف” عبر الشبكة العنكبوتية العالمية، وفهرسة الصفحات لمحركات البحث. لا توجد’ حاجة لتعديل الملف ما لم يكن لديك سبب محدد لذلك. على سبيل المثال، قد ترغب في جعل بعض عناوين URL لمحتوى معين غير سهلة الوصول. أضف الموقع إلى robots.txtولن’ يتم فهرسته بواسطة محركات البحث.

الملف index.html هو جذر تطبيقنا. عند الوصول إلى التطبيق، هذا هو الملف الذي يتم تقديمه. هذا هو الملف الذي تراه على الشاشة. فلنلقِ نظرة سريعة عليه. افتحه في محرر نصوص:

إنه ملف قصير جدًا. لاحظ أنه لا توجد صور أو كلمات في <body>. يقوم React ببناء هذه المحتويات باستخدام محركه الخاص ويحقنها باستخدام JavaScript. ومع ذلك، يحتاج React إلى معرفة مكان حقن الكود. الملف index.html يفي بالغرض.

فلنغير الـ <title> إلى My React App:

ثم، احفظ الملف وأغلق المحرر. الآن، تحقق من صفحة الويب في المتصفح:

كما ترى، تم تغيير عنوان علامة التبويب إلى My React App. إذا لم يتغير تلقائيًا، فأعد تحميل الصفحة بالضغط على F5 أو Ctrl+R.

فلنعد إلى محرر النصوص. يجب أن تبدأ جميع مشاريع React من عنصر جذر. يمكن أن يكون هناك أكثر من عنصر واحد في صفحة واحدة. ومع ذلك، فإن وجود عنصر واحد على الأقل أمر إلزامي. فهو يخبر React بمكان وضع جميع أكواد HTML التي تم إنشاؤها. في ملف index.html الخاص بنا، ابحث عن موقع العنصر <div id="root">. إنه الـ <div> الذي سيستخدمه React للتغييرات المستقبلية. حاول تغيير قيمة id من root إلى base:

 

 

بعد ذلك، أعد تحميل الصفحة على المتصفح. لن تظهر أي محتوى. كما تظهر Web Developer Tools الخاصة بـ Firefox، فإنه يعرض خطأً:

عد إلى محرر النصوص وغير قيمة id مجددًا إلى root:

Step 6: Heading Tag and Styling Changes

حتى الآن، قمنا بتشغيل الخادم المحلي وأجرينا تغييرات صغيرة على ملف HTML الجذري. الآن، سنعمل مع مكونات React الموجودة في مجلد src/ . سنجري تغييرات على كود CSS و JavaScript. سيتم تطبيق التغييرات تلقائيًا باستخدام إعادة التحميل السريع (hot reloading).

إذا تم إيقاف الخادم، فقم بتشغيله باستخدام npm. ثم، ألقِ نظرة على محتويات مجلد src/ :

هناك العديد من ملفات JavaScript و CSS هنا. سنمر عليها واحدًا تلو الآخر.

• ServiceWorker.js

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

• SetupTests.js and App.test.js

كما يوحي اسم هذه الملفات، فإنها تُستخدم لاختبار الملفات. كلما قمنا بتشغيل برنامج test النصي باستخدام npm، فإنه يقوم بتشغيل هذه الملفات. يحتوي الملف setupTests.js على بعض دوال expect المخصصة.

دعونا نلقي نظرة على App.test.js. افتحه في محرر نصوص:

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

• CSS Files

هناك العديد من ملفات التنسيق المتاحة: App.css, index.css، و logo.svg. يمكنك اتباع طرق متعددة للتنسيق في React. أسهل طريقة هي كتابة CSS عادي حيث لا يلزم تكوين إضافي.

يُسمح لك باستيراد CSS مباشرة إلى المكون. يتيح ذلك تقسيم ملفات CSS لتطبيقها فقط على مكون فردي. أنت لا تفصل بالفعل CSS عن JavaScript. بدلاً من ذلك، تقوم بتجميع جميع المكونات ذات الصلة (CSS و JavaScript والصور والترميز) معًا.

افتح App.css باستخدام محرر نصوص:

إنه ملف CSS قياسي بدون معالجات CSS مسبقة خاصة. يمكنك إضافتها لاحقًا إذا أردت. يسعى Create React App إلى أن يكون محايدًا مع تقديم تجربة ممتازة وجاهزة للاستخدام.

Let’s make a change and see it in action. Change the value of the background-color to blue:

تحقق من التغيير على المتصفح:

• • Index.js

الآن، حان الوقت لإجراء تغييرات على كود React JavaScript. افتح index.js باستخدام محرر نصوص:

في الأعلى، يتم استيراد React, ReactDOM, index.css, App، و serviceWorker. من خلال استيراد React، فإننا نسحب الكود اللازم لتحويل JSX إلى JavaScript. ReactDOM هو الكود الذي يربط كود React الخاص بنا بالعنصر الأساسي ( index.html، على سبيل المثال). انظر إلى السطر التالي:

إنه يوجه React للعثور على id بواسطة التسمية root وحقن أكواد React هناك. <App/> هو العنصر الجذري وكل شيء يتفرع من هناك.

لاحظ أننا قمنا أيضًا باستيراد ملفات CSS (مثل index.css) ولكننا لم نفعل شيئًا بها في الواقع. من خلال الاستيراد، فإننا نخبر في الواقع Webpack عبر سكربتات React لتضمين أكواد CSS في الحزمة النهائية المترجمة. وإلا، فلن تظهر أنماط CSS.

• App.js

بعد ذلك، سنلقي نظرة على App.js. افتحه في محرر نصوص:

 

دعنا نرى كيف يؤثر تغيير محتواه على مشروعنا. قم بتغيير محتوى <p>الوسم:

ثم احفظ الملف وتحقق من المتصفح لمعرفة التغييرات:

ها قد انتهيت! لقد أجريت أولى تعديلاتك على مكون React!

هناك شيء آخر يجب ملاحظته. انظر إلى العنصر <img>:

لاحظ أن logo يتم تمريره داخل أقواس متعرجة. عند تمرير السمات (التي ليست سلاسل نصية أو أرقامًا)، يجب تمريرها داخل أقواس متعرجة. بعد ذلك، سيعاملها React ككائنات JavaScript بدلاً من سلاسل نصية.

في هذه الحالة، لا يقوم التطبيق باستيراد الصورة فعليًا. بدلاً من ذلك، هو مرجع للصورة. عندما يقوم Webpack ببناء المشروع، فإنه يضع الصورة في الموضع المناسب. يمكننا التحقق من ذلك في المتصفح. افتح Web Developer Tools في Firefox:

يريد Webpack تعيين مسارات ملفات فريدة لجميع الصور. لذلك، حتى لو تم استيراد الصور بنفس الاسم، فسيكون لها مسارات مختلفة.

Step 7: Project Building

في هذه الخطوة، سنتعلم كيفية تجميع المشروع في حزمة قابلة للنشر. افتح الطرفية وقم بتشغيل سكربت build الخاص بالمشروع:

سيقوم المترجم بإنشاء المجلد المخصص build/حيث سيضع المخرجات. لرؤية ما تفعله عملية التجميع، افتح ملف index.html ملف من build/مجلد:

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

أفكار نهائية

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

هنا، أوضحنا أيضًا كيفية بدء مشروع React واختباره وبنائه. هذه الأوامر جوهرية للمشاريع بجميع أحجامها.

حوسبة سعيدة!