الأقواس المعقوفة
جزء من قسم الأساسيات في رحلة React على Coddy. الدرس 6 من 42.
يصبح JSX مثيرًا للاهتمام عندما تمزج فيه JavaScript. الأقواس المعقوفة { } تفتح نافذة من الترميز إلى 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>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس الأساسيات
2تعبيرات JSX
الأقواس المعقوفةالعمليات الرياضية داخل الأقواسالأقواس في السماتاستدعاء الدوال في JSXملخص: تعبيرات JSX5الحالة والأحداث
ما هي الحالة (State)؟عداد النقراتالعد بخطواتالتبديل باستخدام الحالةحالة مستقلةملخص: الحالة والأحداث8مشروع: بطاقة الملف الشخصي
الخطوة 1: هيكل البطاقةالخطوة 2: بطاقة مع Propsالخطوة 3: زر الإعجابالخطوة 4: تبديل المتابعة