إن بدء مشروع React جديد أمر معقد للغاية، مع وجود العديد من أدوات البناء. يستخدم العديد من التبعيات وملفات التكوين والمتطلبات الأخرى مثل Babel وWebpack وESLint قبل كتابة سطر واحد من كود React. تعمل أداة إنشاء React App CLI على إزالة كل هذه التعقيدات وتجعل تطبيق React بسيطًا. لهذا، تحتاج إلى تثبيت الحزمة باستخدام NPM، ثم تشغيل بعض الأوامر البسيطة للحصول على مشروع React جديد.

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

متطلبات

تتم صيانة تطبيق Create React بواسطة فيسبوك ويمكن أن يعمل على أي منصة ، على سبيل المثال، macOS، وWindows، وLinux، وما إلى ذلك. لإنشاء مشروع React باستخدام تطبيق create-react-app، يلزمك تثبيت الأشياء التالية في نظامك.

1. إصدار العقدة >= 8.10
2. إصدار NPM >= 5.6

دعونا نتحقق من الإصدار الحالي من العقدة و الآلية الوقائية الوطنية في النظام.

قم بتشغيل الأمر التالي للتحقق من إصدار العقدة في موجه الأوامر.

 $ node -v 

قم بتشغيل الأمر التالي للتحقق من إصدار NPM في موجه الأوامر.

 $ npm -v 

تثبيت

سنتعلم هنا كيف يمكننا تثبيت React باستخدام CRA أداة. لهذا، نحن بحاجة إلى اتباع الخطوات كما هو موضح أدناه.

قم بتثبيت رد الفعل

يمكننا تثبيت React باستخدام مدير الحزم npm باستخدام الأمر التالي. لا داعي للقلق بشأن تعقيد تثبيت React. سيقوم مدير الحزم create-react-app npm بإدارة كل ما هو مطلوب لمشروع React.

 C:Usersjavatpoint> npm install -g create-react-app 

إنشاء مشروع React جديد

بمجرد نجاح تثبيت React، يمكننا إنشاء مشروع React جديد باستخدام الأمر create-react-app. هنا أختار اسم 'reactproject' لمشروعي.

 C:Usersjavatpoint> create-react-app reactproject 

ملحوظة:يمكننا الجمع بين الخطوتين أعلاه في أمر واحد باستخدامnpx. إن npx عبارة عن أداة تشغيل حزمة تأتي مع الإصدار npm 5.2 والإصدارات الأحدث.

 C:Usersjavatpoint> npx create-react-app reactproject 

سيستغرق الأمر أعلاه بعض الوقت لتثبيت React وإنشاء مشروع جديد باسم 'reactproject'. الآن، يمكننا أن نرى المحطة كما هو موضح أدناه.

توضح الشاشة أعلاه أنه تم إنشاء مشروع React بنجاح على نظامنا. الآن، نحن بحاجة إلى تشغيل الخادم حتى نتمكن من الوصول إلى التطبيق على المتصفح. اكتب الأمر التالي في النافذة الطرفية.

 $ cd Desktop $ npm start 

NPM هو مدير الحزم الذي يبدأ الخادم ويصل إلى التطبيق على الخادم الافتراضي http://localhost:3000 . الآن سنحصل على الشاشة التالية

بعد ذلك، افتح المشروع على محرر التعليمات البرمجية. أنا هنا أستخدم Visual Studio Code. يبدو الهيكل الافتراضي لمشروعنا كما هو موضح في الصورة أدناه.

يوجد في تطبيق React العديد من الملفات والمجلدات في الدليل الجذر. بعض منها على النحو التالي:

وحدات العقدة:يحتوي على مكتبة React وأي مكتبات أخرى مطلوبة لجهات خارجية.عام:يحمل الأصول العامة للتطبيق. يحتوي على ملف Index.html حيث ستقوم React بتثبيت التطبيق افتراضيًا على العنصر.سرك:فهو يحتوي على ملفات App.css وApp.js وApp.test.js وindex.css وindex.js وserviceWorker.js. هنا، يكون ملف App.js مسؤولًا دائمًا عن عرض شاشة الإخراج في React.حزمة lock.json:يتم إنشاؤه تلقائيًا لأي عمليات تقوم فيها حزمة npm بتعديل شجرة العقدة_الوحداتية أو الحزمة.json. لا يمكن نشره. سيتم تجاهله إذا وجد أي مكان آخر بدلاً من حزمة المستوى الأعلى.الحزمة.json:أنه يحمل مختلف البيانات الوصفية المطلوبة للمشروع. فهو يعطي معلومات إلى npm، مما يسمح بتحديد المشروع وكذلك التعامل مع تبعيات المشروع.التمهيدي.md:يوفر الوثائق اللازمة للقراءة حول موضوعات React.

رد فعل إعداد البيئة

الآن، افتح src >> App.js الملف وإجراء التغييرات التي تريد عرضها على الشاشة. بعد إجراء التغييرات المطلوبة، يحفظ الملف. بمجرد حفظ الملف، يقوم Webpack بإعادة ترجمة التعليمات البرمجية، وسيتم تحديث الصفحة تلقائيًا، وتنعكس التغييرات على شاشة المتصفح. الآن، يمكننا إنشاء أي عدد نريده من المكونات، واستيراد المكون الذي تم إنشاؤه حديثًا داخل الملف App.js file وسيتم تضمين هذا الملف في ملفنا الرئيسي Index.html الملف بعد التجميع بواسطة Webpack.

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

 $ npm build