كيفية تثبيت واستخدام react.js

React.js واحدة من أشهر مكتبات JavaScript لبناء واجهات المستخدم. طورتها Facebook، وتتيح للمطورين إنشاء مكونات واجهة مستخدم سريعة وتفاعلية وقابلة لإعادة الاستخدام لتطبيقات الويب.
يرشدك هذا الدليل خلال إعداد بيئة تطوير React وإنشاء تطبيق React الأول.

مقدمة

يبسط React بناء واجهات الويب الديناميكية باستخدام هندسة معمارية قائمة على المكونات. كل جزء من واجهة المستخدم — مثل الأزرار والنماذج أو أشرطة التنقل — يمكن إنشاؤه كمكون مستقل يسهل إعادة استخدامه وصيانته.

في هذا الدرس (دليل المبتدئين لـ react.js)، ستتعلم كيفية:

1. تثبيت Node.js و npm (مطلوبان لـ React)
2. إنشاء مشروع React جديد باستخدام Create React App
3. تشغيل خادم التطوير
4. فهم بنية المشروع
5. تعديل مكون React الأول

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

قبل البدء، تأكد من أن لديك:

• معرفة أساسية بـ HTML و CSS و JavaScript
• محرر أكواد مثل Visual Studio Code
• Node.js و npm مثبتان على نظامك

يمكنك التحقق مما إذا كان Node.js و npm مثبتين بالفعل. يمكنك تعلم كيفية تثبيت Node.js على جهازك من هذا الرابط:

node -v
npm -v

node -v
npm -v

إذا لم يكونا مثبتين، حملهما من موقع Node.js الرسمي.

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

1. زر https://nodejs.org/
2. حمل إصدار LTS (الدعم طويل المدى).
3. ثبته باتباع تعليمات الإعداد.
4. تحقق من التثبيت:

node -v
npm -v

node -v
npm -v

الخطوة 2 — إنشاء تطبيق react جديد

يوفر React طريقة بسيطة لبدء مشروع باستخدام أداة Create React App الرسمية.

شغل الأمر التالي في terminal:

npx create-react-app my-react-app

npx create-react-app my-react-app

الشرح:

• npx يشغل أوامر من npm بدون تثبيت عام.
• create-react-app ينشئ مشروع React جاهز للاستخدام.
• my-react-app هو اسم مشروعك — يمكنك تغييره لأي شيء.

سيثبت هذا جميع التبعيات الضرورية وينشئ بنية المجلدات الأساسية.

الخطوة 3 — الانتقال لمجلد المشروع

بعد التثبيت، انتقل لدليل مشروعك:

cd my-react-app

cd my-react-app

الخطوة 4 — تشغيل خادم التطوير

شغل الأمر التالي لبدء تطبيق React:

npm start

npm start

سيقوم هذا بـ:

• تجميع كود React.
• تشغيل خادم التطوير.
• فتح تطبيقك تلقائياً في المتصفح على http://localhost:3000.

ستشاهد صفحة ترحيب React الافتراضية تؤكد أن كل شيء يعمل بشكل صحيح.

الخطوة 5 — استكشاف بنية المشروع

يحتوي تطبيق React على الأدلة والملفات الرئيسية التالية:

my-react-app/
├── node_modules/ # تبعيات المشروع
├── public/ # الملفات الثابتة (HTML، الأيقونات)
├── src/ # كود React الرئيسي
│ ├── App.js # المكون الجذر
│ ├── index.js # نقطة الدخول
│ └── App.css # تنسيق المكون
├── package.json # إعدادات المشروع
└── README.md

my-react-app/
├── node_modules/       # Project dependencies
├── public/             # Static files (HTML, icons)
├── src/                # Main React source code
│   ├── App.js          # Root component
│   ├── index.js        # Entry point
│   └── App.css         # Component styling
├── package.json        # Project configuration
└── README.md

• src/App.js — ملف المكون الرئيسي. ستحرر هذا لتغيير ما يظهر على الشاشة.
• src/index.js — يعرض تطبيق React في عنصر HTML الجذر.
• public/index.html — قالب HTML الرئيسي.

الخطوة 6 — تعديل مكون react الأول

افتح ملف src/App.js واستبدل محتوياته بـ:

function App() {
  return (
    <div>
      <h1>مرحباً، React!</h1>
      <p>أهلاً بك في تطبيق React الأول.</p>
    </div>
  );
}

export default App;

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Welcome to your first React application.</p>
    </div>
  );
}

export default App;

احفظ الملف. سيتم تحديث المتصفح تلقائياً وستشاهد رسالتك الجديدة على الصفحة.

الخطوة 7 — البناء للإنتاج (اختياري)

عندما يصبح تطبيقك جاهزاً للنشر، يمكنك إنشاء بناء محسن:

npm run build

npm run build

ينشئ هذا الأمر دليل build/ يحتوي على ملفات الإنتاج المضغوطة الجاهزة للرفع على أي خادم ويب.

الخاتمة

لقد نجحت في تثبيت React.js وإنشاء مشروعك الأول وعرض مكون بسيط على الشاشة. من هنا، يمكنك البدء في استكشاف ميزات React الأساسية، مثل:

• المكونات والخصائص
• الحالة والخطافات
• معالجة الأحداث
• التوجيه (react router)
• تكامل API (fetch أو Axios)

للتعلم المفصل أكثر، راجع:

• وثائق React الرسمية