كيفية عرض HTML في React - دليل المبتدئين

📝 كيفية عرض HTML في React: دليل شامل للمبتدئين

مرحباً بك في عالم React! 🎉 في هذا الدرس، سنتعلم كيفية عرض محتوى HTML في تطبيقات React باستخدام JSX، وهي الخطوة الأساسية لبناء واجهات المستخدم.

🎯 ما هو JSX؟

JSX (JavaScript XML) هو امتداد لصيغة JavaScript يسمح لنا بكتابة كود يشبه HTML داخل JavaScript. هذا يجعل كتابة مكونات React أسهل وأكثر وضوحاً.

// مثال بسيط لJSX
const greeting = <h1>مرحباً بالعالم! 👋</h1>;

🔧 العناصر الأساسية في JSX

يمكنك استخدام جميع عناصر HTML المعتادة في JSX مع بعض الاختلافات البسيطة:

function MyComponent() {
  return (
    <div>
      <h1>عنوان رئيسي 🏆</h1>
      <p>هذه فقرة نصية عادية</p>
      <button>زر قابل للنقر 🖱️</button>
    </div>
  );
}

⚠️ قواعد مهمة في JSX

1. إغلاق جميع الوسوم: يجب إغلاق جميع الوسوم حتى تلك التي لا تحتاج إغلاقاً في HTML العادي
2. استخدام className بدلاً من class: لأن كلمة "class" محجوزة في JavaScript

// ❌ خطأ
<div class="container">

// ✅ صحيح
<div className="container">

3. سمات camelCase: تستخدم camelCase للسمات مثل onClick و onChange

<input type="text" onChange={handleChange} />

🎨 مثال عملي شامل

لننشئ مكوناً بسيطاً يعرض بطاقة تعريف:

function ProfileCard() {
  return (
    <div className="profile-card">
      <img src="profile.jpg" alt="صورة الملف الشخصي" />
      <h2>اسم المستخدم 👤</h2>
      <p>مطور React مبتدئ يحب التعلم</p>
      <div className="skills">
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
      </div>
    </div>
  );
}

🔄 التعبيرات في JSX

يمكنك تضمين تعبيرات JavaScript داخل JSX باستخدام الأقواس المعقوفة {}:

function Greeting() {
  const name = "أحمد";
  const currentTime = new Date().getHours();
  const greeting = currentTime < 12 ? "صباح الخير" : "مساء الخير";
  
  return (
    <div>
      <h1>{greeting}، {name}! 🌟</h1>
      <p>الساعة الآن: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

🚀 نصائح مهمة للمبتدئين

1. ابدأ بسيطاً: لا تحاول بناء واجهات معقدة في البداية
2. تدرب على العناصر الأساسية: أتقن استخدام div, span, p, h1-h6, img, button
3. اختبر بشكل متكرر: تأكد من عرض كل عنصر بشكل صحيح
4. استخدم أدوات المطورين: استخدم React DevTools لفحص مكوناتك