قبل البدء في إنشاء التطبيقات باستخدام React، من المهم أن تتوفر لديك بيئة التطوير المناسبة. فيما يلي دليل خطوة بخطوة لمساعدتك على البدء:

الخطوة 1. تثبيت Node.js وnpm

الخطوة الأولى في إعداد بيئة React هي تثبيت Node.js، لأنه يوفر وقت تشغيل JavaScript الضروري لتنفيذ التعليمات البرمجية خارج المتصفح. عندما تقوم بتثبيت Node.js، فإنه يأتي مزودًا بـ npm (Node Package Manager)، وهو أمر ضروري لإدارة التبعيات في مشروعك. لتنزيل Node.js، قم بزيارة الموقع الرسمي وحدد الإصدار المناسب لنظامك.

الخطوة 2. إعداد مشروع React جديد باستخدام إنشاء تطبيق React (CRA)

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

npx إنشاء تطبيق تفاعلي تطبيق my-react

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

الخطوة 3. انتقل إلى مجلد المشروع الخاص بك

بمجرد إنشاء مشروع React، ستحتاج إلى الانتقال إلى مجلد مشروعك لبدء التطوير. استخدم الأمر التالي للانتقال إلى دليل المشروع الذي تم إنشاؤه حديثًا:

cd تطبيق تفاعلي

الخطوة 4. ابدأ تشغيل تطبيق React الخاص بك

الآن بعد أن تم إعداد مشروعك، يمكنك تشغيل خادم التطوير لرؤية تطبيق React الخاص بك قيد التنفيذ. قم بتشغيل الأمر التالي داخل دليل المشروع الخاص بك:

بداية npm

سيبدأ هذا الأمر خادم التطوير ويفتح متصفحك الافتراضي تلقائيًا لعرض التطبيق.

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

انتقل إلى الوسيط الخاص بي لمعرفة المزيد حول React: https://medium.com/@CodingAdventure