JSX ليس HTML

جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 4 من 42.

تبدو JSX مثل HTML، لكنها تعيش داخل JavaScript، وهذا يفرض بعض الاختلافات الصغيرة التي ستواجهها باستمرار:

1. className بدلاً من class. class كلمة محجوزة في JavaScript، لذا يعيد JSX تسمية الخاصية:

<p className="warning">Careful!</p>

2. يجب إغلاق كل وسم. يتساهل HTML مع <br> و <input>؛ بينما لا يفعل JSX ذلك. تنتهي الوسوم ذاتية الإغلاق بـ />:

<input id="name" />
<br />

3. السمات المكتوبة بأسلوب camelCase. السمات التي تتكون من عدة كلمات تصبح بأسلوب camelCase: onclick ← onClick، و tabindex ← tabIndex. ستستخدم onClick كثيراً عندما نصل إلى الأحداث (events).

التحدي

مبتدئ

الفقرة أدناه تحتاج إلى فئة CSS، تمت إضافتها بطريقة JSX.

أعطِ الفقرة فئة CSS باسم notice (تذكر: JSX لا تستخدم اسم الخاصية class).
حافظ على id والنص الخاص بها كما هما دون تغيير.

جرّب بنفسك

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>