logo by @sawaratsuki1004
React
v19.2
Learn
Reference
Community
Blog

Is this page useful?

في هذه الصفحة

  • Overview
  • تمرير النصوص باستخدام علامات التنصيص
  • استخدام الأقواس المنحنية: نافذة إلى عالم JavaScript
  • أين يجب استخدام الأقواس المنحنية؟
  • استخدام “أقواس منحنية مزدوجة”: CSS وكائنات أخرى داخل JSX
  • المزيد من المرح مع كائنات JavaScript والأقواس المنحنية!
  • Recap
  • Challenges

    البدأ

  • بداية سريعة
    • شرح تطبيقي: لعبة تيك تاك تو
    • التفكير على طريقة React
  • التثبيت
    • إنشاء تطبيق React
    • بناء تطبيق React من الصفر
    • إضافة React إلى مشروع موجود بالفعل
  • الإعداد
    • تجهيز المحرر
    • استخدام TypeScript
    • أدوات مطوري React
  • React Compiler
    • مقدمة
    • التثبيت
    • التبني التدريجي
    • تصحيح الأخطاء واستكشاف المشاكل

  • تعلم React

  • وصف واجهة المستخدم (UI)
    • مكونك الأول (Component)
    • استيراد وتصدير المكونات (Components)
    • كتابة ترميز البناء بـ JSX
    • JavaScript في JSX باستخدام الأقواس المنحنية
    • تمرير الخصائص (Props) إلى مكون
    • التصيير الشرطي (Conditional Rendering)
    • تصيير القوائم (Rendering Lists)
    • الحفاظ على نقاء المكونات (Pure Components)
    • واجهتك المستخدم كشجرة (UI Tree)
  • إضافة التفاعلية (Interactivity)
    • الاستجابة للأحداث (Events)
    • الحالة (State): ذاكرة المُكَوِّن
    • التصيير والالتزام (Render and Commit)
    • الحالة (State) كلقطة
    • إضافة سلسلة من تحديثات الحالة (State) إلى قائمة انتظار
    • تحديث الكائنات (Objects) في الحالة
    • تحديث المصفوفات (Arrays) في الحالة
  • إدارة State
    • التفاعل مع Input باستخدام State
    • اختيار بنية State
    • مشاركة State بين Components
    • الحفاظ على State وإعادة ضبطها
    • استخراج منطق State إلى Reducer
    • تمرير البيانات بشكل عميق باستخدام Context
    • التوسع باستخدام Reducer و Context
  • مخارج الطوارئ (Escape Hatches)
    • الإشارة إلى القيم باستخدام Refs
    • التلاعب بـ DOM باستخدام Refs
    • التزامن مع Effects
    • قد لا تحتاج إلى Effect
    • دورة حياة Reactive Effects
    • فصل Events عن Effects
    • إزالة اعتماديات Effect
    • إعادة استخدام المنطق باستخدام Custom Hooks
تعلم React
وصف واجهة المستخدم (UI)

JavaScript في JSX باستخدام الأقواس المنحنية

تتيح لك JSX كتابة ترميز شبيه بـ HTML داخل ملف JavaScript، مما يسمح بالحفاظ على منطق التصيير والمحتوى في المكان نفسه. في بعض الأحيان، قد ترغب في إضافة بعض منطق لغة JavaScript أو الإشارة إلى خاصية ديناميكية داخل هذا الترميز. في هذه الحالة، يمكنك استخدام الأقواس المنحنية داخل JSX الخاص بك لفتح نافذة للغة JavaScript.

You will learn

  • كيفية تمرير النصوص (string) باستخدام علامات التنصيص
  • كيفية الإشارة إلى متغير JavaScript داخل JSX باستخدام الأقواس المعقوفة
  • كيفية استدعاء دالة JavaScript داخل JSX باستخدام الأقواس المنحنية
  • كيفية استخدام كائن JavaScript داخل JSX باستخدام الأقواس المعقوفة

تمرير النصوص باستخدام علامات التنصيص

عندما ترغب في تمرير نص إلى JSX، يتم وضعها بين علامات تنصيص مفردة أو مزدوجة:

export default function Avatar() { return ( <img className="avatar" src="https://i.imgur.com/NpGVLas.jpg" alt="نجيب محفوظ" /> ); }

هنا، يتم تمرير "https://i.imgur.com/NpGVLas.jpg" و "نجيب محفوظ" كنصوص.

ولكن ماذا لو كنت ترغب في تحديد src أو نص alt بشكل ديناميكي؟ يمكنك استخدام قيمة من JavaScript عن طريق استبدال "و " بـ {و }:

export default function Avatar() { const avatar = 'https://i.imgur.com/NpGVLas.jpg'; const description = 'نجيب محفوظ'; return ( <img className="avatar" src={avatar} alt={description} /> ); }

لاحظ الاختلاف بين className="avatar"، الذي يحدد اسم فئة CSS "avatar" الذي يجعل الصورة دائرية، وsrc={avatar} الذي يقرأ قيمة متغير JavaScript المسمى avatar. هذا لأن الأقواس المنحنية تتيح لك العمل مع لغة JavaScript مباشرة داخل الترميز الخاصة بك!

استخدام الأقواس المنحنية: نافذة إلى عالم JavaScript

JSX هي طريقة خاصة لكتابة JavaScript. وهذا يعني أنه يمكن استخدام JavaScript داخلها - باستخدام الأقواس المعقوفة { }. في المثال أدناه، يتم تعريف اسم للعالِم، name، ثم يتم تضمينه بواسطة الأقواس المنحنية داخل عنصر <h1>.

export default function TodoList() { const name = 'نجيب محفوظ'; return ( <h1>قائمة مهام {name}</h1> ); }

حاول تغيير قيمة name من 'نجيب محفوظ' إلى 'أحمد زويل'. لاحظ كيف يتغير عنوان القائمة؟

أي تعبير JavaScript سيعمل بين الأقواس المنحنية، بما في ذلك استدعاءات الدوال مثل formatDate():

const today = new Date(); function formatDate(date) { return new Intl.DateTimeFormat( 'ar-EG', { weekday: 'long' } ).format(date); } export default function TodoList() { return ( <h1>قائمة مهام لـ {formatDate(today)}</h1> ); }

أين يجب استخدام الأقواس المنحنية؟

يمكنك استخدام الأقواس المنحنية في JSX بطريقتين فقط:

  1. كنص مباشرة داخل وسم JSX: <h1>قائمة مهام {name}</h1> يعمل، ولكن <{tag}>قائمة مهام نجيب محفوظ </{tag}> لن يعمل.
  2. كخصائص تأتي فورًا بعد علامة =: src={avatar} ستقرأ قيمة المتغير avatar، ولكن src="{avatar}" ستمرره "{avatar}" كنص.

استخدام “أقواس منحنية مزدوجة”: CSS وكائنات أخرى داخل JSX

بالإضافة إلى النصوص والأرقام وتعابير JavaScript الأخرى، يمكنك تمرير الكائنات في JSX. يتم تمييز الكائنات أيضًا بواسطة الأقواس المنحنية، مثل { name: "أحمد زويل", inventions: 5 }. لذلك، لتمرير كائن JavaScript في JSX، يجب عليك إحاطة الكائن بزوج آخر من الأقواس المنحنية: person={{ name: "أحمد زويل", inventions: 5 }}.

قد ترى ذلك في أنماط CSS المضمنة فيJSX. React لا تتطلب منك استخدام أنماط CSS مضمنة (فئة CSS يعمل جيداً في معظم الحالات). ولكن عندما تحتاج إلى أسلوب مضمن، يمكنك تمرير كائن إلى خاصية style:

export default function TodoList() { return ( <ul style={{ backgroundColor: 'black', color: 'pink' }}> <li>كتابة روايات وأعمال أدبية</li> <li>الدفاع عن الحرية الأدبية والتعبير</li> <li>تعزيز الوعي الثقافي والأدبي</li> </ul> ); }

حاول تغيير قيم backgroundColor و color.

يمكنك رؤية كائن JavaScript بوضوح داخل الأقواس المنحنية عندما تكتبه بهذه الطريقة:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

في المرة القادمة التي ترى {{ و }} في JSX، أعلم أنه ليس سوى كائن داخل أقواس JSX المنحنية!

مأزق

خصائص style المضمنة تكتب بتنسيق camelCase. على سبيل المثال، عنصرHTML <ul style="background-color: black"> يتم كتابته في المكون الخاص بك على النحو التالي: <ul style={{ backgroundColor: 'black' }}>.

المزيد من المرح مع كائنات JavaScript والأقواس المنحنية!

يمكنك دمج العديد من التعابير في كائن واحد والإشارة لهم في JSX الخاص بك داخل الأقواس المنحنية:

const person = { name: 'نجيب محفوظ', theme: { backgroundColor: 'black', color: 'pink' } }; export default function TodoList() { return ( <div style={person.theme}> <h1>مهام {person.name}</h1> <img className="avatar" src="https://i.imgur.com/NpGVLas.jpg" alt="نجيب محفوظ" /> <ul> <li>كتابة روايات وأعمال أدبية</li> <li>الدفاع عن الحرية الأدبية والتعبير</li> <li>تعزيز الوعي الثقافي والأدبي</li> </ul> </div> ); }

في هذا المثال، يحتوي كائنJavaScript person على نص name وكائن theme:

const person = {
  name: 'نجيب محفوظ',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

يمكن للمكوّن استخدام قيم من الكائن person كالتالي:

<div style={person.theme}>
  <h1>قائمة مهام {person.name}</h1>

JSXهي لغة قوالب بسيطة جدًا لأنها تسمح لك بتنظيم البيانات والمنطق باستخدام JavaScript.

خلاصة

الآن تعرف تقريبًا كل شيء عن JSX:

  • يتم تمرير خصائص JSX كنصوص داخل أقواس تنصيص
  • تسمح لك الأقواس المنحنية بإضافة منطق ومتغيرات JavaScript داخل الترميز الخاص بك.
  • تعمل الأقواس المنحنية داخل محتوى وسم JSX أو مباشرة بعد = في الخصائص.
  • {{ و }} ليست صيغة خاصة: إنما هي كائن JavaScript موجود داخل أقواس JSX المنحنية.

جرّب بعض التحديات

تحدي 1 من 3:
أصلح الخطأ

هذا الكود يتعطل ويظهر خطأ Objects are not valid as a React child:

const person = { name: 'نجيب محفوظ', theme: { backgroundColor: 'black', color: 'pink' } }; export default function TodoList() { return ( <div style={person.theme}> <h1>مهام {person}</h1> <img className="avatar" src="https://i.imgur.com/NpGVLas.jpg" alt="Gregorio Y. Zara" /> <ul> <li>كتابة روايات وأعمال أدبية</li> <li>الدفاع عن الحرية الأدبية والتعبير</li> <li>تعزيز الوعي الثقافي والأدبي</li> </ul> </div> ); }

هل يمكنك إيجاد المشكلة؟

السابقكتابة ترميز البناء بـ JSX
التاليتمرير الخصائص (Props) إلى مكون
Copyright © Meta Platforms, Inc
no uwu plz
uwu?
Logo by@sawaratsuki1004
تعلم React
بداية سريعة
التثبيت
وصف واجهة المستخدم (UI)
إضافة التفاعلية
إدارة State
مخارج الطوارئ
مرجع API
React APIs
React DOM APIs
المجتمع
ميثاق السلوك
تعرف على الفريق
المساهمون في التوثيق
شكر وتقدير
المزيد
المدونة
React Native
الخصوصية
الشروط
Fork
export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/NpGVLas.jpg"
      alt="نجيب محفوظ"
    />
  );
}
Fork
export default function Avatar() {
  const avatar = 'https://i.imgur.com/NpGVLas.jpg';
  const description = 'نجيب محفوظ';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}
Fork
export default function TodoList() {
  const name = 'نجيب محفوظ';
  return (
    <h1>قائمة مهام {name}</h1>
  );
}
Fork
const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'ar-EG',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>قائمة مهام لـ {formatDate(today)}</h1>
  );
}
Fork
export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>كتابة روايات وأعمال أدبية</li>
      <li>الدفاع عن الحرية الأدبية والتعبير</li>
      <li>تعزيز الوعي الثقافي والأدبي</li>
    </ul>
  );
}


<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>
Fork
const person = {
  name: 'نجيب محفوظ',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>مهام {person.name}</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/NpGVLas.jpg"
        alt="نجيب محفوظ"
      />
      <ul>
        <li>كتابة روايات وأعمال أدبية</li>
        <li>الدفاع عن الحرية الأدبية والتعبير</li>
        <li>تعزيز الوعي الثقافي والأدبي</li>
      </ul>
    </div>
  );
}


const person = {
  name: 'نجيب محفوظ',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};
<div style={person.theme}>
  <h1>قائمة مهام {person.name}</h1>
Fork
const person = {
  name: 'نجيب محفوظ',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>مهام {person}</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/NpGVLas.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>كتابة روايات وأعمال أدبية</li>
        <li>الدفاع عن الحرية الأدبية والتعبير</li>
        <li>تعزيز الوعي الثقافي والأدبي</li>
      </ul>
    </div>
  );
}