إنشاء مشروع React باستخدام Create React App
| الأمر البرمجي | الدور الهندسي له في النظام | الحالة البيئية والنتيجة |
|---|---|---|
| npx create-react-app | جلب الأداة من خوادم نود وتوليد مشروع كامل مباشرة دون تثبيتها محلياً | بناء مجلد متكامل يحتوي على مكتبة ريأكت وأدوات ربط الأكواد وضغطها |
| cd my-legacy-app | تغيير مسار موجه الأوامر والدخول إلى داخل المجلد المنشأ حديثاً | نقل نطاق العمل البرمجي إلى داخل بيئة المشروع لبدء التحكم به |
| npm start | تشغيل خادم التطوير المحلي وربط ملفات المشروع بمتصفح المطور | فتح نافذة تلقائية على منفذ محلي لمشاهدة التعديلات البرمجية فوراً أثناء الكتابة |
عندما تنضم إلى شركة برمجية قوية أو تعمل على صيانة وتطوير كود قديم (Legacy Code) تم بناؤه قبل سنوات، ستجد بنسبة 90% أن المشروع قد تم إنشاؤه باستخدام الأداة الكلاسيكية الشهيرة Create React App (ويختصرها المطورون بـ CRA).
كانت هذه الأداة هي المعيار الرسمي والمدعوم من شركة فيسبوك لسنوات طويلة لتهيئة مشاريع ريأكت بضغطة زر واحدة دون الدخول في تعقيدات ضبط أدوات التجميع مثل Webpack و Babel يدوياً.
هي عبارة عن حزمة برمجية ضخمة تقوم بتوليد قالب جاهز ومتكامل لمشروع ريأكت. تحتوي خلف الكواليس على كل ما تحتاجه: خادم تطوير محلي، أدوات لترجمة كود JSX إلى جافا سكريبت عادية يفهمها المتصفح، ونظام اختبار للأكواد.
في هذا الدرس، سنستخدم أمراً جديداً يُدعى npx (مختصر Node Package Execute).
ℹ️ معلومة
الفارق الهندسي: الأمر العادي npm يُستخدم لـ "تحميل وتثبيت" الحزم على جهازك. أما الأمر npx فهو أداة ذكية تقوم بـ "تشغيل وتنفيذ" الحزم مباشرة من الإنترنت دون الحاجة لتثبيتها بشكل دائم على حاسوبك، مما يوفر مساحة قرصك الصلب ويضمن استخدامك لأحدث إصدار من الأداة دائماً.
ℹ️ معلومة
اكتب الأمر في المجلد الذي ترغب بحفظ مشروعك بداخله
قم بفتح موجه الأوامر (Terminal) واكتب الأمر التالي لبناء مجروع جديد باسم my-legacy-app:
| 1 | npx create-react-app my-legacy-app |
| 2 |
(انتظر بضع دقائق حتى ينتهي من جلب الحزم وبناء المجلد).
ℹ️ معلومة
تحرك داخل المجلد برمجيا لتتمكن من تشغيل الأوامر التالية
بعد اكتمال البناء بنجاح، اطلب من موجه الأوامر الدخول إلى مجلد التطبيق الذي تم إنشاؤه عبر هذا الأمر:
| 1 | cd my-legacy-app |
| 2 |
ℹ️ معلومة
سيفتح المتصفح تلقائيا على الرابط المحلي localhost:3000
الآن، قم بتشغيل المشروع وفتح خادم المطورين المحلي لرؤية النتيجة الحية عبر كتابة:
| 1 | npm start |
| 2 |
إليك الأوامر الثلاثة متتالية داخل صندوق العمل لتطبيقها مباشرة في موجه الأوامر:
| 1 | # الخطوة 1: إنشاء وتوليد القالب الكلاسيكي للمشروع |
| 2 | npx create-react-app my-legacy-app |
| 3 | |
| 4 | # الخطوة 2: الانتقال برمجياً إلى داخل مسار مجلد المشروع |
| 5 | cd my-legacy-app |
| 6 | |
| 7 | # الخطوة 3: تشغيل بيئة العمل الحية للمطور |
| 8 | npm start |
| 9 |