كيف يصف JSX الواجهة؟

في الدرس السابق عرضنا عنوانا هكذا:

root.render(createElement("h1", null, "Learning Dashboard"));

هذا واضح لعنصر واحد. لكن إذا أضفنا بطاقة تقدم فيها عنوان و نص و مؤشر، سنحتاج إلى استدعاءات createElement متداخلة. كيف نجعل ترتيب العناصر واضحا في الكود؟

<section className="progress-card">
  <h2>React Foundations</h2>
  <p>Progress: 60%</p>
</section>

هذه الصيغة اسمها JSX. نكتب بها وصف الواجهة بطريقة تظهر ترتيب العناصر. يشبه JSX لغة HTML، لكنه ينتج عنصر React (React element) يصف ما نريد عرضه. كتابة الوصف وحدها لا تضيف عنصرا إلى الصفحة؛ يعرضه React عندما نمرره إلى root.render.

من HTML إلى JSX

لدينا هذا الجزء من Learning Dashboard مكتوبا بلغة HTML:

<header class="dashboard-header">
  <h1>Learning Dashboard</h1>
</header>
<main>
  <section class="progress-card" style="border-color: #2563eb">
    <h2>React Foundations</h2>
    <p>Progress: 60%</p>
    <progress value="60" max="100"></progress>
  </section>
</main>

لنبدأ بهيكل الصفحة. لدينا عنصران في المستوى الأعلى هما header و main. لجمعهما من دون إضافة عنصر جديد إلى الصفحة، نستخدم Fragment:

<>
  <header className="dashboard-header">
    <h1>Learning Dashboard</h1>
  </header>
 
  <main>
    <p>Course progress</p>
  </main>
</>

الصيغة <>...</> تجمع العناصر من دون إضافة غلاف إلى DOM. استخدمنا className بدل class لأن class كلمة محجوزة في JavaScript. و يشترط JSX إغلاق جميع الوسوم. لذلك نكتب مؤشر التقدم هكذا:

<progress value="60" max="100" />

في مثال البطاقة السابق كتبنا اسم الدورة و نسبة التقدم مباشرة. لكن هذه القيم موجودة أصلا في كائن course.

كيف نستخدم بيانات course؟

لدينا هذه البيانات:

const course = {
  title: "React Foundations",
  progress: 60,
  accent: "#2563eb",
};

بدل نسخ القيم في JSX، نقرأها من course:

<p>Progress: {course.progress}%</p>
<progress value={course.progress} max="100" />

الأقواس {} تسمح بوضع تعبير JavaScript داخل النص أو في قيمة خاصية. التعبير مثل course.progress يعطينا قيمة. أما تعريف متغير باستخدام const فهو تعليمة نكتبها خارج JSX.

ماذا عن لون الإطار؟

في HTML كان لون الإطار نص CSS داخل style. في JSX نعطي style كائن JavaScript:

<section style={{ borderColor: course.accent }}>

الأقواس الخارجية تسمح بوضع تعبير JavaScript في الخاصية. الأقواس الداخلية هي كائن التنسيق نفسه. لذلك ليست الأقواس المزدوجة أمرا خاصا في React. و كتبنا borderColor بدلا من border-color لأنه اسم خاصية داخل كائن JavaScript.

جرب في المحرر

في index.jsx لديك كائن course جاهز، لكن dashboard يعرض العنوان فقط. أكمل الواجهة باستخدام header و main من دون إضافة div حولهما. اجعل البطاقة تقرأ اسم الدورة و نسبة التقدم و لون الإطار من course. استخدم اسم الدورة أيضا في aria-label لمؤشر التقدم. ملفات المعاينة و CSS جاهزة.

بعد أن تظهر البطاقة، توقع ما سيتغير إذا أصبحت قيمة course.progress هي 80. جرب ذلك في المعاينة. لماذا تغير النص و مؤشر التقدم معا؟ أعد القيمة إلى 60 ثم شغل الاختبارات.

ما الذي تغير عن createElement؟

كل من createElement و JSX ينتج وصفا لعناصر React، لكن JSX يجعل ترتيب العناصر المتداخلة أسهل في القراءة. و نستخدم فيه {} لقراءة قيم JavaScript بدل نسخها في الوصف. في الدرس القادم سنبني الواجهة من عدة مكونات.

اختبر معلوماتك