React
كيف تثبت React على ويندوز وماك — دليل خطوة بخطوة 2026
📅 2026-10-10⏱ 7 دقائق قراءة
بعد أن أتقنت 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** هو البديل الحديث:
<table>
<thead>
<tr>
<th>المعيار</th>
<th>CRA</th>
<th>Vite</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>سرعة التشغيل</strong></td>
<td>⏱️ ثوانٍ</td>
<td>⚡ مللي ثانية</td>
</tr>
<tr>
<td><strong>سرعة التحديث</strong></td>
<td>🐢 بطيء</td>
<td>🚀 فوري</td>
</tr>
<tr>
<td><strong>حجم المشروع</strong></td>
<td>📦 كبير</td>
<td>🪶 صغير</td>
</tr>
<tr>
<td><strong>الدعم</strong></td>
<td>⚠️ مهمل</td>
<td>✅ نشط</td>
</tr>
</tbody>
</table>
**القاعدة الذهبية:** استخدم **Vite** لكل مشاريع React الجديدة.
## ما ستحتاجه
<table>
<thead>
<tr>
<th>المتطلب</th>
<th>التفاصيل</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>جهاز كمبيوتر</strong></td>
<td>ويندوز 10/11 أو ماك</td>
</tr>
<tr>
<td><strong>Node.js</strong></td>
<td>الإصدار 18 أو أحدث</td>
</tr>
<tr>
<td><strong>VS Code</strong></td>
<td>محرر الأكواد</td>
</tr>
<tr>
<td><strong>معرفة بـ TypeScript</strong></td>
<td>من مسار TypeScript</td>
</tr>
<tr>
<td><strong>وقت</strong></td>
<td>20-30 دقيقة</td>
</tr>
</tbody>
</table>
**⚠️ مهم:** إذا لم تكن قد ثبت Node.js بعد، راجع مقال "كيف تثبت JavaScript".
## الجزء الأول: التحقق من Node.js
### على ويندوز:
افتح **Command Prompt** أو **PowerShell**:
```bash
node --version
```
**النتيجة المتوقعة:**
```bash
v20.x.x
```
ثم:
```bash
npm --version
```
**النتيجة المتوقعة:**
```bash
10.x.x
```
### على ماك:
افتح **Terminal**:
```bash
node --version
npm --version
```
**إذا ظهرت رسالة `'node' is not recognized`** — يجب تثبيت Node.js أولاً من **nodejs.org**.
## الجزء الثاني: إنشاء مشروع React
### الخطوة 1: إنشاء المشروع بـ Vite
في Terminal، اذهب إلى المجلد الذي تريد إنشاء المشروع فيه:
```bash
cd Desktop
```
ثم اكتب:
```bash
npm create vite@latest my-react-app -- --template react-ts
```
**شرح الأمر:**
- **`npm create vite@latest`:** أحدث إصدار من Vite.
- **`my-react-app`:** اسم المشروع (يمكنك تغييره).
- **`--template react-ts`:** قالب React + TypeScript.
### الخطوة 2: الانتقال إلى المشروع
```bash
cd my-react-app
```
### الخطوة 3: تثبيت المكتبات
```bash
npm install
```
**⏱️ قد يستغرق هذا 1-2 دقيقة.**
### الخطوة 4: تشغيل المشروع
```bash
npm run dev
```
**النتيجة المتوقعة:**
```bash
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`** واستبدل محتواه:
```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`** واستبدل محتواه:
```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. اختصارات مهمة
<table>
<thead>
<tr>
<th>الاختصار</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>rafce</code></td>
<td>إنشاء مكون React سريع</td>
</tr>
<tr>
<td><code>Ctrl + S</code></td>
<td>حفظ</td>
</tr>
<tr>
<td><code>Ctrl + P</code></td>
<td>فتح ملف بسرعة</td>
</tr>
<tr>
<td><code>Ctrl + Shift + P</code></td>
<td>Command Palette</td>
</tr>
<tr>
<td><code>F12</code></td>
<td>الانتقال للتعريف</td>
</tr>
</tbody>
</table>
### 3. جرب اختصار `rafce`
في VS Code:
1. أنشئ ملفاً جديداً في `src/` باسم `Hello.tsx`.
2. اكتب `rafce` واضغط `Tab`.
**النتيجة:**
```tsx
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`
**السبب:** منفذ مشغول (سيرفر آخر يعمل).
**الحل:** أوقف السيرفر الآخر، أو استخدم منفذاً آخر:
```bash
npm run dev -- --port 3000
```
### 🔴 المشكلة 3: `Cannot find module 'react'`
**السبب:** لم تثبّت المكتبات بعد.
**الحل:**
```bash
npm install
```
### 🔴 المشكلة 4: الصفحة فارغة في المتصفح
**السبب:** خطأ في الكود.
**الحل:**
1. افتح **Console** في المتصفح (`F12`).
2. اقرأ رسالة الخطأ.
3. تحقق من `src/App.tsx` و `src/main.tsx`.
### 🔴 المشكلة 5: Vite بطيء في التشغيل
**السبب:** مشكلة في الكاش.
**الحل:**
```bash
rmdir /s /q node_modules\.vite
npm run dev
```
## إعداد Tailwind CSS (اختياري)
إذا أردت استخدام **Tailwind CSS** (مثل ما فعلناه في TypeScript):
### 1. تثبيت Tailwind:
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
### 2. عدّل `tailwind.config.js`:
```javascript
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
```
### 3. عدّل `src/index.css`:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### 4. جرب في `src/App.tsx`:
```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;
```
## جدول الأوامر الأساسية
<table>
<thead>
<tr>
<th>الأمر</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>npm create vite@latest</code></td>
<td>إنشاء مشروع جديد</td>
</tr>
<tr>
<td><code>npm install</code></td>
<td>تثبيت المكتبات</td>
</tr>
<tr>
<td><code>npm run dev</code></td>
<td>تشغيل السيرفر</td>
</tr>
<tr>
<td><code>npm run build</code></td>
<td>بناء للإنتاج</td>
</tr>
<tr>
<td><code>npm run preview</code></td>
<td>معاينة الإنتاج</td>
</tr>
<tr>
<td><code>rafce</code></td>
<td>اختصار مكون React</td>
</tr>
</tbody>
</table>
## قائمة تحقق نهائية
<table>
<thead>
<tr>
<th>المهمة</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>تأكيد وجود Node.js</td>
<td>⬜</td>
</tr>
<tr>
<td>إنشاء مشروع React بـ Vite</td>
<td>⬜</td>
</tr>
<tr>
<td>تثبيت المكتبات</td>
<td>⬜</td>
</tr>
<tr>
<td>تشغيل السيرفر (<code>npm run dev</code>)</td>
<td>⬜</td>
</tr>
<tr>
<td>تعديل <code>App.tsx</code></td>
<td>⬜</td>
</tr>
<tr>
<td>تعديل <code>index.css</code></td>
<td>⬜</td>
</tr>
<tr>
<td>تثبيت إضافة React Snippets</td>
<td>⬜</td>
</tr>
<tr>
<td>تجربة <code>rafce</code></td>
<td>⬜</td>
</tr>
</tbody>
</table>
## ماذا بعد التثبيت؟
الآن بعد أن أصبحت بيئة العمل جاهزة، حان وقت التعلم:
1. **أول تطبيق React** — تعمق في JSX.
2. **المكونات (Components)** — أساس React.
3. **State و Props** — إدارة البيانات.
## الخلاصة
تثبيت React باستخدام Vite عملية بسيطة. أهم النقاط:
- ✅ **Vite أسرع** من Create React App.
- ✅ **TypeScript** يجعل الكود أكثر أماناً.
- ✅ **rafce** اختصار يوفّر الوقت.
- ✅ **Hot Reload** يُحدّث المتصفح فوراً.
- ✅ **Tailwind CSS** اختياري لكن موصى به.
**تذكر:** إذا واجهت مشكلة، ابحث عنها بالإنجليزية على Google.
**هل نجح تثبيت React؟ شاركنا في التعليقات!**