مقدمة إلى React - تعلم أساسيات مكتبة جافاسكريبت الأشهر

🌟 مقدمة شاملة إلى React: البداية الصحيحة لبناء واجهات مستخدم مذهلة

React هي مكتبة جافاسكريبت مفتوحة المصدر تم تطويرها بواسطة فيسبوك، وتُستخدم لبناء واجهات المستخدم (UI) خاصة للتطبيقات ذات الصفحة الواحدة (Single Page Applications). أصبحت React واحدة من أكثر المكتبات شعبية في عالم تطوير الويب بسبب كفاءتها ومرونتها.

🤔 ما هي React ولماذا نستخدمها؟

React تتيح للمطورين إنشاء واجهات مستخدم معقدة من خلال مكونات (Components) صغيرة ومعزولة من الكود. بدلاً من التعامل مع صفحة الويب ككل، تقسمها React إلى أجزاء صغيرة يمكن إعادة استخدامها بسهولة.

المزايا الرئيسية لـ React:

• ⚡ أداء عالي بسبب Virtual DOM
• 🔄 إعادة استخدام المكونات
• 📱 دعم تطبيقات الهواتف عبر React Native
• 🛠 مجتمع ضخم ودعم قوي

🧩 فهم مكونات React (Components)

المكون هو لبنة البناء الأساسية في React. يمكنك التفكير فيه كدالة JavaScript تعيد عناصر React لتعرضها على الصفحة.

// مكون بسيط يعرض رسالة ترحيبية
function Welcome() {
  return <h1>مرحباً بك في تطبيقي الأول!</h1>;
}

// استخدام المكون في التطبيق
function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

🎨 مقدمة إلى JSX

JSX هو امتداص لصيغة JavaScript يسمح لك بكتابة HTML داخل JavaScript. هذا يجعل كود React أكثر قابلية للقراءة والكتابة.

// هذا هو JSX
const element = <h1>Hello, world!</h1>;

// وهو يختلف عن HTML العادي
const element = React.createElement('h1', null, 'Hello, world!');

قواعد JSX الأساسية:

• يجب أن يكون هناك عنصر أب واحد فقط
• يجب إغلاق جميع الوسوم
• استخدام className بدلاً من class

🚀 إنشاء أول تطبيق React لك

لننشئ معاً أول مكون React بسيط:

// مكون يعرض قائمة أصدقاء
function FriendsList() {
  return (
    <div className="friends-container">
      <h2>قائمة أصدقائي</h2>
      <ul>
        <li>أحمد</li>
        <li>محمد</li>
        <li>فاطمة</li>
      </ul>
    </div>
  );
}

// تصدير المكون لاستخدامه في其他地方
export default FriendsList;

🔍 كيف يعمل React خلف الكواليس؟

عندما تقوم بإجراء تغيير على البيانات، تقوم React ب:

1. تحديث Virtual DOM (نسخة خفيفة من DOM الحقيقي)
2. مقارنة التغييرات مع النسخة السابقة
3. تحديث DOM الحقيقي فقط بالأجزاء التي تغيرت
4. هذه العملية تسمى "Reconciliation"

📦 أدوات التطوير الأساسية

لبدء العمل مع React، ستحتاج إلى:

• Node.js مُثبت على جهازك
• محرر نصوص مثل VS Code
• Create React App لأعداد البيئة التطويرية