React • المستوى الأول • الدرس 1

مقدمة في React وبناء المكونات (Components & JSX)

أهداف الدرس العلمية

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

javascript

function WelcomeMessage() {
  return <h1>مرحباً بك في React!</h1>;
}

تُعد JSX اختصاراً لـ JavaScript XML، وهي صياغة تسمح لنا بكتابة عناصر مشابهة لـ HTML مباشرة داخل ملفات جافاسكريبت.

javascript

const element = <h2>هذا عنصر JSX!</h2>;

// يمكنك أيضاً تضمين تعبيرات JavaScript
const name = "جمال";
const greeting = <p>أهلاً يا {name}!</p>;

التطبيق العملي المباشر

قم بالتعديل على الكود في المحرر أدناه واستدعي المكون <WelcomeMessage /> مرتين متتاليتين داخل المكون الرئيسي App.

⏳ جارٍ تحميل المحرر التفاعلي...