نوفيل
الرئيسيةالكورساتالتحديات⚔️ المبارزاتالمقالاتالأدواتتغريداتالمجتمع
دخولابدأ مجاناً
نوفيل

منصة تعليم البرمجة الأولى بالعربي. تعلم من الصفر حتى الاحتراف مع كورسات احترافية وتحديات ذكاء اصطناعي.

المنصة

  • الكورسات
  • التحديات
  • المقالات
  • الأدوات

الحساب

  • إنشاء حساب
  • تسجيل الدخول
  • لوحة التحكم
  • الملف الشخصي

روابط

  • سياسة الخصوصية
  • شروط الاستخدام
  • عن نوفيل
  • تواصل معنا

© 2026 نوفيل. جميع الحقوق محفوظة.

صُنع بـ في مصر

نوفيل
الرئيسيةالكورساتالتحديات⚔️ المبارزاتالمقالاتالأدواتتغريداتالمجتمع
دخولابدأ مجاناً
REA

منهج React Js

دليل مرجعي شامل

كل اللغات
مدرسة البرمجة/منهج React Js/تهيئة بيئة العمل المحلية باستخدام Node.js و npm

تهيئة بيئة العمل المحلية باستخدام Node.js و npm

شرح npmتثبيت Node.jsتهيئة بيئة عمل ريأكتأدوات مطور ريأكتأمر تثبيت الحزمكورس ريأكت للمبتدئين

جدول مرجعي سريع

1

تهيئة بيئة العمل المحلية وتثبيت Node.js و npm

الأداة التقنيةدورها الجوهري في بيئة العملكيف يتأكد المطور من سلامة تثبيتها
Node.jsالبيئة الأساسية لتشغيل أكواد جافا سكريبت خارج المتصفح وبناء حزم المشروععبر كتابة الأمر node -v في موجه الأوامر لتوليد رقم الإصدار الحالي
npmمدير الحزم والأدوات المسؤول عن تحميل المكتبات الخارجية وإدارة اعتماديات الكودعبر كتابة الأمر npm -v للتأكد من جاهزيته لجلب حزم ريأكت

الشرح

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

في هذا الدرس، سنقوم بتهيئة الأرضية الصلبة التي ستقف عليها طوال مسيرتك البرمجية عبر تثبيت الأداة الحتمية لكل مطور ويب: Node.js.

1. ما هو Node.js ولماذا نحتاجه لريأكت؟

بشكل افتراضي، لا تستطيع جافا سكريبت العمل إلا داخل أسوار المتصفح (مثل كروم أو فايرفوكس). جاءت Node.js لتقوم بتحرير جافا سكريبت؛ حيث تُعد بيئة تشغيل (Runtime Environment) تسمح لنا بتشغيل أكواد جافا سكريبت مباشرة على نظام التشغيل الخاص بجهازك (ويندوز، ماك، أو لينكس) تماماً مثل بايثون أو C++.

ℹ️ معلومة

علاقتها بريأكت: نحن لا نستخدم Node.js لكتابة كود ريأكت نفسه، بل نحتاجها لأن أدوات بناء ومترجمات ريأكت الحديثة (مثل تحويل كود JSX إلى كود يفهمه المتصفح، وإدارة الخوادم المحلية للمطورين) هي في الأصل برامج مكتوبة ومبنية فوق بيئة Node.js.

2. ما هو npm (مدير الحزم)؟

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

خطوات العمل والتطبيق (Sequence)

1- تحميل حزمة التثبيت الرسمية

⚠️ تحذير

اختر دائما إصدار LTS المستقر

اذهب إلى الموقع الرسمي لـ Node.js وقم بتحميل الإصدار المكتوب بجانبه LTS (مختصر Long Term Support). هذا الإصدار هو الأكثر استقراراً وأماناً للمشاريع البرمجية.

Node Js

2- تثبيت البرنامج على الجهاز

ℹ️ معلومة

اتبع معالج التثبيت الافتراضي

قم بفتح الملف المحمل واضغط على Next في جميع المراحل مع الإبقاء على الخيارات الافتراضية كما هي، وتأكد من الموافقة على إضافة مسار البرنامج للنظام (Add to PATH).

3- فتح موجه الأوامر والتحقق

💡 نصيحة

تأكد من نجاح التثبيت برمجيا

قم بفتح مبوب الأوامر في جهازك (Terminal في الماك، أو Command Prompt / PowerShell في الويندوز)، واكتب الأوامر التالية بالترتيب للتحقق من أن جهازك تعرف على الأدوات بنجاح.

الأكواد البرمجية البرمجية للتحقق في Terminal

بعد إتمام التثبيت، اكتب هذه الأوامر في موجه الأوامر للتأكد من إرجاع رقم الإصدار الفعلي:

bash
1# التحقق من تثبيت بيئة نود بنجاح
2node -v
3# المخرجات المتوقعة (تختلف الأرقام حسب وقت التثبيت): v22.x.x أو أحدث
4
5# التحقق من تثبيت مدير الحزم بنجاح
6npm -v
7# المخرجات المتوقعة: 10.x.x أو أحدث

نصائح احترافية

  • —تركاية هندسية هامة جداً تقع للعديد من المطورين المبتدئين: إذا قمت بتثبيت Node.js وكان موجه الأوامر (Terminal) مفتوحاً بالفعل أثناء التثبيت، وكتبت الأوامر وظهر لك الخطأ الشهير "command not found"، لا تقلق! كل ما عليك فعله هو إغلاق موجه الأوامر بالكامل وإعادة فتحه، أو عمل إعادة تشغيل خفيفة لمحرر الأكواد الخاص بك؛ وذلك لكي يقوم نظام التشغيل بتحديث قائمة المتغيرات البيئية لديه ويتعرف على الأدوات الجديدة التي تم إدراجها.

الدرس السابق

الفرق بين الـ Real DOM والـ Virtual DOM

الدرس التالي

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

نوفيل

منصة تعليم البرمجة الأولى بالعربي. تعلم من الصفر حتى الاحتراف مع كورسات احترافية وتحديات ذكاء اصطناعي.

المنصة

  • الكورسات
  • التحديات
  • المقالات
  • الأدوات

الحساب

  • إنشاء حساب
  • تسجيل الدخول
  • لوحة التحكم
  • الملف الشخصي

روابط

  • سياسة الخصوصية
  • شروط الاستخدام
  • عن نوفيل
  • تواصل معنا

© 2026 نوفيل. جميع الحقوق محفوظة.

صُنع بـ في مصر