React هي مكتبة JavaScript طورتها Meta (Facebook) لبناء واجهات مستخدم تفاعلية وسريعة. إنها الأكثر استخداماً في تطوير الويب الحديث.
💡 قبل البدء
تأكد أن لديك معرفة بـ HTML وCSS وJavaScript الأساسية. React تبنى على هذه الأساسيات.
1. إنشاء مشروع React
npx create-react-app my-app
cd my-app
npm start
2. المكونات (Components)
كل شيء في React هو مكوّن — قطعة من واجهة المستخدم يمكن إعادة استخدامها:
// مكوّن بسيط
function Welcome({ name }) {
return (
<div className="card">
<h2>مرحباً، {name}!</h2>
<p>أهلاً وسهلاً</p>
</div>
);
}
// استخدامه
function App() {
return (
<div>
<Welcome name="أحمد" />
<Welcome name="سارة" />
</div>
);
}
3. Props — تمرير البيانات
function ProductCard({ name, price, image, onBuy }) {
return (
<div className="product">
<img src={image} alt={name} />
<h3>{name}</h3>
<p>السعر: {price}$</p>
<button onClick={onBuy}>اشتر الآن</button>
</div>
);
}
4. State مع useState
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>العدد: {count}</p>
<button onClick={() => setCount(count + 1)}>زيادة</button>
<button onClick={() => setCount(count - 1)}>نقص</button>
<button onClick={() => setCount(0)}>إعادة</button>
</div>
);
}
5. useEffect — التأثيرات الجانبية
import { useState, useEffect } from "react";
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`/api/users/${userId}`)
.then(res => res.json())
.then(data => setUser(data));
}, [userId]);
if (!user) return <p>جاري التحميل...</p>;
return <h2>{user.name}</h2>;
}
6. الطريق بعد React
- Next.js: React + Server-Side Rendering
- React Native: تطبيقات موبايل بـ React
- Redux / Zustand: إدارة الحالة المعقدة
- React Query: إدارة بيانات الـ APIs
✅ الخلاصة
React مهارة مطلوبة جداً في سوق العمل. بعد إتقانها يمكنك بناء مواقع ويب احترافية والحصول على وظائف تطوير أمامي بدخل ممتاز.