كيف تثبت React على ويندوز وماك — دليل خطوة بخطوة 2026

بعد أن أتقنت JavaScript و TypeScript، حان الوقت للارتقاء إلى React — المكتبة الأكثر شعبية لبناء واجهات المستخدم. React تغيّر طريقة تفكيرك في بناء الويب.

في هذا الدليل العملي، سنأخذك خطوة بخطوة لتثبيت React وإعداد بيئة العمل باستخدام Vite و TypeScript على ويندوز وماك.

ما هو React؟

React هي مكتبة JavaScript لبناء واجهات المستخدم (UI)، طورتها Meta (فيسبوك سابقاً).

تشبيه بسيط: تخيل أن موقعك منزل. HTML هو الهيكل، CSS هو الديكور، JavaScript هي الكهرباء. React هي المهندس المعماري الذي ينظم كل شيء.

المفاهيم الأساسية:

• المكونات (Components): قطع مستقلة قابلة لإعادة الاستخدام.
• JSX: صيغة تشبه HTML داخل JavaScript.
• State: بيانات تتغير مع تفاعل المستخدم.
• Props: بيانات تُمرر بين المكونات.
• Virtual DOM: نسخة افتراضية من DOM تُحسّن الأداء.

لماذا React؟

قبل أن نبدأ، دعنا نتفق على الأسباب:

• الأكثر شعبية: تستخدمها Meta، Netflix، Airbnb، Uber.
• المطلوبة في سوق العمل: معظم الوظائف تطلب React.
• مكونات قابلة لإعادة الاستخدام: اكتب مرة، استخدم في كل مكان.
• أداء ممتاز: Virtual DOM يحدّث فقط ما يحتاج.
• مجتمع ضخم: مصادر لا تنتهي.
• نظام بيئي غني: Next.js, React Native, Redux.

لماذا Vite بدلاً من Create React App؟

Create React App (CRA) كان الأداة الرسمية، لكنه أصبح بطيئاً وأُهمل. Vite هو البديل الحديث:

المعيار	CRA	Vite
سرعة التشغيل	⏱️ ثوانٍ	⚡ مللي ثانية
سرعة التحديث	🐢 بطيء	🚀 فوري
حجم المشروع	📦 كبير	🪶 صغير
الدعم	⚠️ مهمل	✅ نشط

القاعدة الذهبية: استخدم Vite لكل مشاريع React الجديدة.

ما ستحتاجه

المتطلب	التفاصيل
جهاز كمبيوتر	ويندوز 10/11 أو ماك
Node.js	الإصدار 18 أو أحدث
VS Code	محرر الأكواد
معرفة بـ TypeScript	من مسار TypeScript
وقت	20-30 دقيقة

⚠️ مهم: إذا لم تكن قد ثبت Node.js بعد، راجع مقال "كيف تثبت JavaScript".

الجزء الأول: التحقق من Node.js

على ويندوز:

افتح Command Prompt أو PowerShell:

node --version

النتيجة المتوقعة:

v20.x.x

ثم:

npm --version

النتيجة المتوقعة:

10.x.x

على ماك:

افتح Terminal:

node --version
npm --version

إذا ظهرت رسالة 'node' is not recognized — يجب تثبيت Node.js أولاً من nodejs.org.

الجزء الثاني: إنشاء مشروع React

الخطوة 1: إنشاء المشروع بـ Vite

في Terminal، اذهب إلى المجلد الذي تريد إنشاء المشروع فيه:

cd Desktop

ثم اكتب:

npm create vite@latest my-react-app -- --template react-ts

شرح الأمر:

• npm create vite@latest: أحدث إصدار من Vite.
• my-react-app: اسم المشروع (يمكنك تغييره).
• --template react-ts: قالب React + TypeScript.

الخطوة 2: الانتقال إلى المشروع

cd my-react-app

الخطوة 3: تثبيت المكتبات

npm install

⏱️ قد يستغرق هذا 1-2 دقيقة.

الخطوة 4: تشغيل المشروع

npm run dev

النتيجة المتوقعة:

  VITE v5.x.x  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

🎉 مبروك! مشروع React يعمل!

افتح المتصفح على: http://localhost:5173

سترى صفحة React الافتراضية مع شعار Vite و React.

الجزء الثالث: فهم بنية المشروع

افتح المشروع في VS Code. سترى:

my-react-app/
├── node_modules/          # المكتبات المثبتة
├── public/                # الملفات العامة
│   └── vite.svg
├── src/                   # كود المشروع
│   ├── assets/            # الصور والملفات
│   ├── App.css            # أنماط App
│   ├── App.tsx            # مكوّن App الرئيسي
│   ├── index.css          # الأنماط العامة
│   ├── main.tsx           # نقطة البداية
│   └── vite-env.d.ts      # تعريفات Vite
├── .gitignore
├── index.html             # ملف HTML الرئيسي
├── package.json           # تبعيات المشروع
├── tsconfig.json          # إعدادات TypeScript
├── tsconfig.node.json
└── vite.config.ts         # إعدادات Vite

الملفات المهمة:

• index.html: الصفحة الوحيدة في المشروع (Single Page Application).
• src/main.tsx: نقطة البداية — حيث يُركّب React.
• src/App.tsx: المكوّن الرئيسي.
• src/index.css: الأنماط العامة.

الجزء الرابع: تخصيص المشروع

الخطوة 1: عدّل src/App.tsx

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

function App() {
  return (
    <div className="app">
      <h1>مرحباً بالعالم! 👋</h1>
      <p>أول تطبيق React لي</p>
    </div>
  );
}

export default App;

احفظ الملف (Ctrl + S).

النتيجة: المتصفح سيتحدّث فورياً (بفضل Vite Hot Reload).

الخطوة 2: عدّل src/index.css

افتح src/index.css واستبدل محتواه:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  direction: rtl;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app {
  background: white;
  padding: 40px 60px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  text-align: center;
}

h1 {
  color: #1e293b;
  margin-bottom: 12px;
}

p {
  color: #64748b;
}

احفظ الملف.

النتيجة: صفحة جميلة بتصميم أنيق.

الجزء الخامس: إعداد VS Code

1. تثبيت الإضافات المهمة

افتح VS Code، واضغط Ctrl + Shift + X، ثم ابحث عن:

• ES7+ React/Redux/React-Native snippets (لاختصارات React).
• Prettier - Code formatter (لتنسيق الكود).
• ESLint (لأخطاء الكود).

2. اختصارات مهمة

الاختصار	الوظيفة
rafce	إنشاء مكون React سريع
Ctrl + S	حفظ
Ctrl + P	فتح ملف بسرعة
Ctrl + Shift + P	Command Palette
F12	الانتقال للتعريف

3. جرب اختصار rafce

في VS Code:

1. أنشئ ملفاً جديداً في src/ باسم Hello.tsx.
2. اكتب rafce واضغط Tab.

النتيجة:

import React from 'react'

const Hello = () => {
  return (
    <div>Hello</div>
  )
}

export default Hello

🎉 هذا اختصار سيوفر عليك الكثير من الوقت!

حل المشاكل الشائعة

🔴 المشكلة 1: 'npm' is not recognized

السبب: Node.js غير مثبت أو غير مضاف إلى PATH.

الحل: راجع مقال "تثبيت JavaScript" لحل هذه المشكلة.

🔴 المشكلة 2: Port 5173 is already in use

السبب: منفذ مشغول (سيرفر آخر يعمل).

الحل: أوقف السيرفر الآخر، أو استخدم منفذاً آخر:

npm run dev -- --port 3000

🔴 المشكلة 3: Cannot find module 'react'

السبب: لم تثبّت المكتبات بعد.

الحل:

npm install

🔴 المشكلة 4: الصفحة فارغة في المتصفح

السبب: خطأ في الكود.

الحل:

1. افتح Console في المتصفح (F12).
2. اقرأ رسالة الخطأ.
3. تحقق من src/App.tsx و src/main.tsx.

🔴 المشكلة 5: Vite بطيء في التشغيل

السبب: مشكلة في الكاش.

الحل:

rmdir /s /q node_modules\.vite
npm run dev

إعداد Tailwind CSS (اختياري)

إذا أردت استخدام Tailwind CSS (مثل ما فعلناه في TypeScript):

1. تثبيت Tailwind:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. عدّل tailwind.config.js:

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. عدّل src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. جرب في src/App.tsx:

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
      <div className="bg-white p-8 rounded-2xl shadow-2xl text-center">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">
          مرحباً بالعالم! 👋
        </h1>
        <p className="text-gray-600">Tailwind CSS يعمل!</p>
      </div>
    </div>
  );
}

export default App;

جدول الأوامر الأساسية

الأمر	الوظيفة
npm create vite@latest	إنشاء مشروع جديد
npm install	تثبيت المكتبات
npm run dev	تشغيل السيرفر
npm run build	بناء للإنتاج
npm run preview	معاينة الإنتاج
rafce	اختصار مكون React

قائمة تحقق نهائية

المهمة	الحالة
تأكيد وجود Node.js	⬜
إنشاء مشروع React بـ Vite	⬜
تثبيت المكتبات	⬜
تشغيل السيرفر (npm run dev)	⬜
تعديل App.tsx	⬜
تعديل index.css	⬜
تثبيت إضافة React Snippets	⬜
تجربة rafce	⬜

ماذا بعد التثبيت؟

الآن بعد أن أصبحت بيئة العمل جاهزة، حان وقت التعلم:

1. أول تطبيق React — تعمق في JSX.
2. المكونات (Components) — أساس React.
3. State و Props — إدارة البيانات.

الخلاصة

تثبيت React باستخدام Vite عملية بسيطة. أهم النقاط:

• ✅ Vite أسرع من Create React App.
• ✅ TypeScript يجعل الكود أكثر أماناً.
• ✅ rafce اختصار يوفّر الوقت.
• ✅ Hot Reload يُحدّث المتصفح فوراً.
• ✅ Tailwind CSS اختياري لكن موصى به.

تذكر: إذا واجهت مشكلة، ابحث عنها بالإنجليزية على Google.

هل نجح تثبيت React؟ شاركنا في التعليقات!