← الرئيسية المستوى 4 - الدرس 1 من 12

⚛️ مقدمة في React

مكتبة JavaScript لبناء واجهات المستخدم

تقدمك في المستوى الرابع 8%

📖 ما هو React؟

مكتبة JavaScript مفتوحة المصدر طورها Facebook (Meta) لبناء واجهات مستخدم تفاعلية. تعتمد على مفهوم Components (مكونات).

🎯 مميزات React

✅ Virtual DOM - تحديث سريع وفعال
✅ Components - إعادة استخدام الكود
✅ One-way Data Flow - تدفق بيانات واضح
✅ JSX - HTML داخل JavaScript
✅ مجتمع ضخم وأدوات غنية

⚡ إنشاء مشروع React

# باستخدام Create React App
npx create-react-app my-app
cd my-app
npm start

# أو باستخدام Vite (أسرع)
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev
        

📝 مكون React بسيط

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

export default App;
        

🎨 JSX

صيغة تسمح بكتابة HTML داخل JavaScript:

// ✅ JSX صحيح
const element = <h1>Hello, world!</h1>;

// ✅ تعبيرات JavaScript داخل أقواس معقوفة
const name = 'أحمد';
const element = <h1>Hello, {name}!</h1>;

// ✅ className بدلاً من class
const element = <div className="container">...</div>;
        