أساسيات React.js

إعداد بيئة تطوير React

15 دقيقة الدرس 2 من 40

المتطلبات الأساسية: تثبيت Node.js و npm

قبل أن تتمكن من بدء بناء تطبيقات React، تحتاج إلى إعداد بيئة التطوير الخاصة بك. الأداة الأساسية الأولى هي Node.js، والتي تتضمن npm (Node Package Manager).

لماذا Node.js لـ React؟ بينما يعمل React في المتصفح، نستخدم Node.js أثناء التطوير لتشغيل أدوات البناء ومديري الحزم وخوادم التطوير. أنت لا تبني خادم خلفي - Node.js هو فقط بيئة الأدوات.

تثبيت Node.js:

قم بزيارة nodejs.org
قم بتنزيل إصدار LTS (الدعم طويل الأمد)
قم بتشغيل المثبت واتبع التعليمات
تحقق من التثبيت بفتح الطرفية وتشغيل:

# تحقق من إصدار Node.js
node --version
# يجب أن يخرج شيئاً مثل: v18.17.0

# تحقق من إصدار npm
npm --version
# يجب أن يخرج شيئاً مثل: 9.6.7

توصية الإصدار: استخدم Node.js الإصدار 16.x أو أعلى. يُنصح بإصدار LTS للاستقرار. يعمل React مع إصدارات Node الأقدم، لكن الإصدارات الأحدث توفر أداءً وأماناً أفضل.

الطريقة 1: Create React App (CRA)

Create React App هي الأداة الرسمية لإعداد مشاريع React الجديدة. تتعامل مع جميع التكوينات المعقدة (Webpack و Babel و ESLint) حتى تتمكن من التركيز على البرمجة.

إنشاء تطبيق React الأول:

# إنشاء تطبيق React جديد
npx create-react-app my-first-app

# الانتقال إلى دليل المشروع
cd my-first-app

# بدء خادم التطوير
npm start

ما هو npx؟ يأتي npx مع npm 5.2+ ويسمح لك بتشغيل الحزم دون تثبيتها عالمياً. يقوم بتنزيل أحدث إصدار من create-react-app، ويستخدمه لإنشاء مشروعك، ثم يزيله.

ماذا يحدث عند تشغيل هذه الأوامر:

ينشئ مجلداً جديداً باسم مشروعك
يثبت React و ReactDOM والتبعيات التطويرية
يعد هيكل المشروع بإعدادات افتراضية معقولة
يكوّن أدوات البناء (Webpack و Babel) خلف الكواليس
ينشئ تطبيقاً أساسياً للبدء
يهيئ مستودع Git

بعد تشغيل npm start، سيفتح متصفحك الافتراضي على http://localhost:3000 وسترى شعار React يدور!

Hot Module Replacement: يتضمن خادم التطوير إعادة التحميل الساخنة. عند حفظ التغييرات في الكود، يتم تحديث المتصفح تلقائياً دون إعادة تحميل الصفحة بالكامل، مع الحفاظ على حالة التطبيق. هذا يجعل التطوير أسرع بكثير!

الطريقة 2: Vite (البديل الحديث)

Vite هي أداة بناء أحدث وسريعة للغاية أصبحت شائعة جداً في مجتمع React. توفر بدء خادم فوري واستبدال وحدة ساخنة سريع للغاية.

إنشاء تطبيق React مع Vite:

# إنشاء مشروع Vite جديد
npm create vite@latest my-vite-app

# سيُطلب منك:
# 1. اختر إطار عمل → اختر "React"
# 2. اختر متغير → اختر "JavaScript" (أو TypeScript)

# الانتقال إلى المشروع
cd my-vite-app

# تثبيت التبعيات
npm install

# بدء خادم التطوير
npm run dev

Vite مقابل Create React App:

Create React App (CRA):
✓ أداة React الرسمية، راسخة
✓ بدون تكوين، كل شيء مُعد مسبقاً
✓ نظام بيئي كبير ودعم مجتمعي
✓ أفضل للمبتدئين (المزيد من الدروس تستخدمها)
✗ أوقات بناء أبطأ مع نمو المشاريع
✗ أكثر رأياً، أصعب في التخصيص

Vite:
✓ خادم تطوير سريع للغاية (بدء فوري)
✓ استبدال وحدة ساخنة سريع للغاية
✓ حزم إنتاج أصغر
✓ أكثر مرونة وأسهل في التكوين
✓ أدوات حديثة مع DX أفضل (تجربة المطور)
✗ أداة أحدث، مجتمع أصغر قليلاً
✗ بعض الدروس القديمة لا تغطيها

أي واحد يجب أن تختار؟ لتعلم React، كلا الأداتين تعمل بشكل رائع! يستخدم هذا البرنامج التعليمي Create React App لأنه أكثر استخداماً في الدروس ولا يحتاج إلى تكوين. ومع ذلك، للمشاريع الإنتاجية، يفضل العديد من المطورين الآن Vite لسرعتها.

فهم هيكل المشروع

لنستكشف الملفات والمجلدات التي تولدها Create React App:

my-first-app/
├── node_modules/          # جميع التبعيات المثبتة (لا تعدل)
├── public/                # الملفات الثابتة
│   ├── index.html         # ملف HTML الرئيسي
│   ├── favicon.ico        # أيقونة علامة تبويب المتصفح
│   ├── manifest.json      # تكوين PWA
│   └── robots.txt         # تعليمات محرك البحث
├── src/                   # كود React الخاص بك هنا
│   ├── App.css            # أنماط لمكون App
│   ├── App.js             # مكون App الرئيسي
│   ├── App.test.js        # اختبارات لمكون App
│   ├── index.css          # الأنماط العامة
│   ├── index.js           # نقطة الدخول للتطبيق
│   ├── logo.svg           # صورة شعار React
│   └── reportWebVitals.js # مراقبة الأداء
├── .gitignore             # الملفات التي يجب أن يتجاهلها Git
├── package.json           # تبعيات ونصوص المشروع
├── package-lock.json      # إصدارات التبعيات المقفلة
└── README.md              # وثائق المشروع

الملفات الرئيسية موضحة:

1. public/index.html - ملف HTML الوحيد لتطبيقك بالكامل:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>تطبيق React</title>
  </head>
  <body>
    <!-- هذا هو المكان الذي يركب فيه React تطبيقك -->
    <div id="root"></div>
  </body>
</html>

2. src/index.js - نقطة دخول JavaScript:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

// إنشاء جذر وعرض مكون App
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

React.StrictMode: هذه أداة تطوير تفعّل فحوصات وتحذيرات إضافية لمكوناتك. لا تعرض أي واجهة مستخدم مرئية ولا تؤثر على بناءات الإنتاج. تساعدك على كتابة كود React أفضل من خلال اكتشاف المشاكل المحتملة مبكراً.

3. src/App.js - مكونك الرئيسي:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          عدل <code>src/App.js</code> واحفظ لإعادة التحميل.
        </p>
      </header>
    </div>
  );
}

export default App;

4. package.json - تكوين المشروع:

{
  "name": "my-first-app",
  "version": "0.1.0",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",      // خادم التطوير
    "build": "react-scripts build",      // بناء الإنتاج
    "test": "react-scripts test",        // تشغيل الاختبارات
    "eject": "react-scripts eject"       // متقدم: كشف التكوين
  }
}

لا تقم بـ Eject إلا إذا لزم الأمر: أمر eject يكشف جميع ملفات التكوين المخفية. هذه عملية أحادية الاتجاه - لا يمكنك التراجع عنها! قم بـ eject فقط إذا كنت بحاجة ماسة لتخصيص تكوين البناء. بالنسبة لـ 99٪ من المشاريع، لن تحتاج إلى eject.

نصوص npm المتاحة

توفر Create React App عدة أوامر مفيدة:

npm start
- يبدأ خادم التطوير على http://localhost:3000
- يفعّل إعادة التحميل الساخنة (التحديث التلقائي عند الحفظ)
- يظهر أخطاء lint في وحدة التحكم
- يفتح متصفحك الافتراضي تلقائياً

npm run build
- ينشئ بناء إنتاج محسّن
- يصغر JavaScript و CSS
- يولد ملفات ثابتة في مجلد build/
- جاهز للنشر على أي خدمة استضافة ثابتة

npm test
- يشغل مجموعة الاختبارات في وضع المراقبة التفاعلي
- يعيد تشغيل الاختبارات عند حفظ الملفات
- يستخدم إطار اختبار Jest

npm run eject
- عملية أحادية الاتجاه: تكشف جميع التكوينات
- تمنحك التحكم الكامل في Webpack و Babel و ESLint
- استخدم فقط إذا لزم الأمر

أول تغيير في الكود

لنقم بأول تعديل لرؤية React في العمل:

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

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>مرحباً، React!</h1>
        <p>هذا هو أول تطبيق React لي.</p>
        <p>الوقت الحالي هو: {new Date().toLocaleTimeString('ar-SA')}</p>
      </header>
    </div>
  );
}

export default App;

احفظ الملف، وشاهد متصفحك يتحدث تلقائياً! يجب أن تعرض الصفحة الآن رسالتك المخصصة مع الوقت الحالي.

لاحظ الأقواس المعقوفة: صيغة {new Date().toLocaleTimeString('ar-SA')} تسمح لك بتضمين تعبيرات JavaScript داخل JSX الخاص بك. هذه إحدى أقوى ميزات React - يمكنك إنشاء محتوى ديناميكياً باستخدام JavaScript. سنستكشف هذا بالتفصيل في الدرس التالي!

مقدمة إلى JSX

في الكود أعلاه، تكتب JSX (JavaScript XML). تبدو JSX مثل HTML لكن لديها القوة الكاملة لـ JavaScript:

// هذا كود JSX...
const element = <h1>مرحباً، {name}!</h1>;

// ...يتم تحويله بواسطة Babel إلى JavaScript:
const element = React.createElement(
  'h1',
  null,
  'مرحباً، ',
  name,
  '!'
);

الاختلافات الرئيسية بين JSX و HTML:

استخدم className بدلاً من class (لأن "class" كلمة محجوزة في JavaScript)
استخدم htmlFor بدلاً من for في الـ labels
يجب إغلاق جميع الوسوم: <img /> وليس <img>
camelCase لمعالجات الأحداث: onClick وليس onclick
خاصية Style تقبل الكائنات: style={{color: 'red'}}

JSX اختيارية: لا يتعين عليك استخدام JSX مع React. يمكنك استخدام استدعاءات React.createElement() العادية بدلاً من ذلك. ومع ذلك، تجعل JSX كود React أكثر قابلية للقراءة ويستخدمها 99٪ من مطوري React. سنتعمق في JSX في الدرس التالي.

أدوات التطوير

قم بتثبيت امتدادات المتصفح هذه لتعزيز تجربة تطوير React الخاصة بك:

1. React Developer Tools

Chrome: ابحث عن "React Developer Tools" في متجر Chrome الإلكتروني
Firefox: ابحث عن "React Developer Tools" في إضافات Firefox

الميزات:
- فحص التسلسل الهرمي لمكونات React
- عرض خصائص وحالة المكون
- تتبع تحديثات المكون والأداء
- تحرير الخصائص والحالة في الوقت الفعلي
- تحديد المكونات التي يتم إعادة عرضها

2. Redux DevTools (لاحقاً عندما تتعلم إدارة الحالة)

استخدام React DevTools:

افتح تطبيق React الخاص بك في المتصفح
افتح أدوات المطور في المتصفح (F12 أو انقر بزر الماوس الأيمن → فحص)
انقر على علامة تبويب "Components" (أضيفت بواسطة React DevTools)
سترى شجرة المكونات تبدأ بـ <App>
انقر على أي مكون لرؤية خصائصه وحالته

علامة تبويب Profiler: تتضمن React DevTools أيضاً علامة تبويب "Profiler" لقياس أداء المكونات. هذا لا يقدر بثمن عند تحسين تطبيقات React. سنغطي تحسين الأداء في الدروس اللاحقة.

إعداد محرر الكود

بينما يمكنك استخدام أي محرر نصوص، Visual Studio Code (VS Code) هو الخيار الأكثر شيوعاً لتطوير React:

امتدادات VS Code الموصى بها:

1. ES7+ React/Redux/React-Native snippets
   - اكتب اختصارات مثل "rfce" لإنشاء قالب مكون

2. Prettier - Code formatter
   - تنسيق الكود تلقائياً عند الحفظ
   - يضمن نمط كود متسق

3. ESLint
   - يلتقط أخطاء JavaScript الشائعة
   - يفرض معايير جودة الكود

4. Auto Rename Tag
   - يعيد تسمية وسوم JSX الإغلاق تلقائياً

5. Bracket Pair Colorizer
   - يرمّز الأقواس المتطابقة بالألوان لتسهيل القراءة

6. Path Intellisense
   - يكمل مسارات الملفات تلقائياً في الاستيرادات

إعدادات VS Code لـ React:

// أضف إلى settings.json في VS Code:
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "emmet.triggerExpansionOnTab": true
}

استكشاف مشاكل الإعداد الشائعة

المشكلة 1: "npm is not recognized"
الحل: لم يتم تثبيت Node.js بشكل صحيح أو ليس في PATH الخاص بك. أعد تثبيت Node.js وأعد تشغيل الطرفية. المشكلة 2: المنفذ 3000 قيد الاستخدام بالفعل
الحل: تطبيق آخر يستخدم المنفذ 3000. إما أغلق ذلك التطبيق أو ابدأ React على منفذ مختلف: PORT=3001 npm start (Mac/Linux) set PORT=3001 && npm start (Windows) المشكلة 3: أخطاء "Module not found"
الحل: احذف مجلد node_modules و package-lock.json، ثم شغل npm install مرة أخرى. المشكلة 4: التغييرات لا تظهر في المتصفح
الحل: امسح ذاكرة التخزين المؤقت للمتصفح (Ctrl+Shift+R)، أو أوقف خادم التطوير وأعد تشغيله بـ npm start.

التمرين 1: إنشاء أول تطبيق React

افتح الطرفية/سطر الأوامر
انتقل إلى مجلد حيث تريد إنشاء مشروعك
شغل: npx create-react-app my-react-journey
انتظر حتى يكتمل التثبيت (قد يستغرق 2-5 دقائق)
انتقل إلى المجلد: cd my-react-journey
ابدأ خادم التطوير: npm start
تحقق من فتح التطبيق في متصفحك على localhost:3000

التمرين 2: تخصيص التطبيق الافتراضي

عدل src/App.js لإنشاء صفحة ترحيب شخصية:

غيّر العنوان ليشمل اسمك
أضف فقرة تصف لماذا تتعلم React
اعرض التاريخ الحالي باستخدام: {new Date().toLocaleDateString('ar-SA')}
أضف 3 عناصر قائمة على الأقل مع أهداف التعلم الخاصة بك

احفظ الملف ولاحظ التحديث التلقائي للمتصفح!

التمرين 3: تثبيت React DevTools

افتح Chrome أو Firefox
ابحث عن "React Developer Tools" في متجر امتدادات متصفحك
ثبت الامتداد
افتح تطبيق React الخاص بك واضغط F12
ابحث عن علامة تبويب "Components" في DevTools
انقر على مكون <App> لفحصه
استكشف شجرة المكونات والخصائص

الملخص

في هذا الدرس، تعلمت كيفية:

تثبيت Node.js و npm، المتطلبات الأساسية لتطوير React
إنشاء تطبيق React باستخدام Create React App أو Vite
فهم هيكل المشروع والملفات الرئيسية
استخدام نصوص npm لبدء خادم التطوير والبناء للإنتاج
إجراء أول تغييرات في الكود ورؤية إعادة التحميل الساخنة في العمل
تثبيت واستخدام React Developer Tools لتصحيح الأخطاء
إعداد VS Code مع امتدادات مفيدة لتطوير React
استكشاف مشاكل الإعداد الشائعة

لديك الآن بيئة تطوير React كاملة الوظائف! في الدرس التالي، سنتعمق في صيغة JSX ونتعلم كيفية كتابة مكونات React ديناميكية ومعبرة.