الأقواس المعقوفة

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

تصبح JSX مثيرة للاهتمام في اللحظة التي تمزج فيها JavaScript. تفتح الأقواس المعقوفة { } نافذة من التوصيف (markup) الخاص بك للعودة إلى JavaScript:

const name = 'Ada';

return <p>Hello, {name}!</p>;

كل شيء داخل الأقواس يتم تقييمه كـ JavaScript، وتظهر النتيجة في الصفحة: هنا يعرض المقطع البرمجي الفقرة Hello, Ada!.

بدون الأقواس المزخرفة، يعامل JSX ما تكتبه كنص عادي. <p>Hello, name!</p> يعرض كلمة name حرفيًا، وهو على الأرجح ليس ما تقصده.

هذه هي الجزئية الأكثر استخدامًا في JSX: قم بتعريف بياناتك كمتغيرات، ثم ضعها داخل العلامات باستخدام { }.

التحدي

مبتدئ

يعرّف المكون const name = 'Ada' ولكن التحية تعرض الكلمة النصية name.

قم بتعديل الفقرة لتستخدم المتغير: يجب أن تعرض Hello, Ada!.
لا تقم بتغيير المتغير نفسه.

جرّب بنفسك

<!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>