مقدمة في React — مقدمة React

مقدمة في React

React هي مكتبة JavaScript من Meta (Facebook) لبناء واجهات مستخدم تفاعلية.

لماذا React؟

1. الشعبية والانتشار

- أكثر مكتبة Front-end استخداماً في العالم

- مستخدمة في: Facebook, Instagram, Netflix, Airbnb, Uber

- مجتمع ضخم ومكتبات لانهائية

2. Component-Based

- قسّم واجهتك لمكونات صغيرة قابلة لإعادة الاستخدام

- كل مكون له منطقه وشكله الخاص

- سهولة الصيانة والتطوير

3. Virtual DOM

- تحديثات سريعة وفعالة

- React يحدث فقط ما تغير، ليس كل الصفحة

- أداء ممتاز حتى مع التطبيقات الكبيرة

4. Declarative (تصريحي)

- تصف ماذا تريد، وليس كيف

- كود أسهل للقراءة والفهم

- أخطاء أقل

إنشاء مشروع React

باستخدام Vite (الأسرع والأفضل) ⭐

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

> ⚠️ ستجد في الشروحات القديمة الأمر create-react-app. هذه الأداة متوقفة رسمياً منذ 2025 ولم تعد تُحدَّث؛ استخدم Vite (أعلاه) أو إطاراً مثل Next.js.

هيكل المشروع

my-app/
├── node_modules/
├── public/            ← ملفات ثابتة تُنسخ كما هي (أيقونات، صور)
├── index.html         ← في Vite يكون في الجذر وليس داخل public
├── src/
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.css
├── package.json
└── vite.config.js

أول مكون React

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

export default App;

JSX - ما هو؟

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

// JSX
const element = <h1>مرحباً!</h1>;

// يتحول إلى (تقريباً):
const sameElement = React.createElement('h1', null, 'مرحباً!');

قواعد JSX:

1. عنصر واحد جذري - استخدم <> أو <div>

2. أغلق كل الوسوم - <img /> وليس <img>

3. className بدل class - لأن class كلمة محجوزة

4. htmlFor بدل for - في <label>

5. التعبيرات في {} - {variable}

function Greeting() {
  const name = "أحمد";
  const isLoggedIn = true;
  
  return (
    <>
      <h1 className="title">مرحباً {name}!</h1>
      {isLoggedIn && <p>أهلاً بعودتك</p>}
      <img src="avatar.png" alt="صورة" />
    </>
  );
}

// مكون React بسيط
function Welcome() {
  const name = "أحمد";
  const currentTime = new Date().toLocaleTimeString('ar-IQ');
  
  return (
    <div className="welcome">
      <h1>مرحباً {name}!</h1>
      <p>الوقت الآن: {currentTime}</p>
    </div>
  );
}

// تصدير المكون
export default Welcome;