تفاعل JSX

ما هو JSX؟

JSX لتقف على JavaScript XML.

يتيح لنا JSX كتابة HTML في React.

تسهل JSX كتابة وإضافة HTML في React.

ترميز JSX

يتيح لنا JSX كتابة عناصر HTML في JavaScript ووضعها في DOM بدون أي createElement()  و / أو appendChild()طرق.

JSX يحول علامات HTML إلى عناصر تفاعل.

هنا مثالان. الأول يستخدم JSX والثاني لا:

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

كما ترى في المثال الأول ، يتيح لنا JSX كتابة HTML مباشرة داخل كود JavaScript.

JSX هو امتداد للغة JavaScript يعتمد على ES6 ، ويتم ترجمته إلى JavaScript عادي في وقت التشغيل.

التعبيرات في JSX

باستخدام JSX ، يمكنك كتابة تعبيرات داخل أقواس معقوفة { }.

يمكن أن يكون التعبير متغير React أو خاصية أو أي تعبير JavaScript صالح آخر. سيقوم JSX بتنفيذ التعبير وإرجاع النتيجة:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

إدراج كتلة كبيرة من HTML

لكتابة HTML على عدة أسطر ، ضع HTML داخل أقواس:

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

عنصر واحد عالي المستوى

يجب أن يتم تغليف كود HTML في عنصر مستوى أعلى واحد .

لذا ، إذا كنت ترغب في كتابة فقرتين ، يجب أن تضعهما داخل عنصر أصلي ، مثل divعنصر.

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

بدلاً من ذلك ، يمكنك استخدام "جزء" لالتفاف عدة أسطر. سيؤدي هذا إلى منع إضافة عقد إضافية إلى DOM بلا داعٍ.

جزء يشبه علامة HTML فارغة <></>:.

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

يجب إغلاق العناصر

تتبع JSX قواعد XML ، وبالتالي يجب إغلاق عناصر HTML بشكل صحيح.

const myelement = <input type="text" />;

فئة السمة = className

السمة classهي سمة مستخدمة كثيرًا في HTML ، ولكن نظرًا لأن JSX يتم تقديمه على هيئة JavaScript ، classوالكلمة الأساسية هي كلمة محجوزة في JavaScript ، فلا يُسمح لك باستخدامها في JSX.

حل JSX هذا باستخدام classNameبدلاً من ذلك. عندما يتم تقديم JSX ، فإنه يترجم className السمات إلى classسمات.

const myelement = <h1 className="myclass">Hello World</h1>;

الشروط - عبارات إذا

تدعم React التعليمات if، لكن ليس داخل JSX.

لتتمكن من استخدام العبارات الشرطية في JSX ، يجب عليك وضع if العبارات خارج JSX ، أو يمكنك استخدام تعبير ثلاثي بدلاً من ذلك:

الخيار 1:

اكتب ifعبارات خارج كود JSX:

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

الخيار 2:

استخدم التعبيرات الثلاثية بدلاً من ذلك:

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

ReactDOM.render(paragraph, document.getElementById('root'));