لطالما كانت React مكتبة جافا سكريبت التي يمكن الاعتماد عليها وهي بسهولة واحدة من أكثر المكتبات شعبية في العالم. بالإضافة إلى ذلك، مع إنشاء أطر عمل شائعة مثل Next.js وRemix فوق React والقدرة على تطوير الأجهزة المحمولة باستخدام React-Native، لن تختفي هذه المكتبة في أي وقت قريب. لكن المشكلة في هذا هي أن معظم المبتدئين يتجهون إلى React ويبدأون في تعلمها دون فهم كيفية عملها حقًا. لذلك دعونا نتعمق.

كيف تعمل جي إس إكس

في React، JSX (JavaScript XML) هو بناء جملة يشبه HTML ولكنه يعمل ضمن JavaScript. إنها ليست لغة JavaScript صالحة في حد ذاتها، لذا تستخدم React أداة تحويل (عادةً Babel) لتحويل JSX إلى JavaScript قياسي. كود جافا سكريبت هذا هو ما يفسره المتصفح في النهاية.

عندما تكتب JSX، يتم تحويلها إلى استدعاءات دالة React.createElement()‎. تُنتج استدعاءات الوظائف هذه عناصر React، وهي العناصر الأساسية لتطبيق React. يمثل كل عنصر جزءًا من واجهة المستخدم.

إليك مثال لما يبدو عليه الأمر:

JSX في مكون React

const element = (
  

    
Hello, React!
    
This is a paragraph.
  
);

تم تحويل JSX إلى JavaScript:

const element = React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Hello, React!'),
  React.createElement('p', null, 'This is a paragraph.')
);

تستقبل React استدعاءات React.createElement() المتداخلة وتحولها إلى عناصر HTML المقابلة في DOM للمتصفح.

خاتمة

تجعل JSX كتابة مكونات React أسهل من خلال السماح لك بكتابة تركيب مشابه لـ HTML، ولكنها مجرد سكر نحوي لاستدعاءات React.createElement() التي تنشئ بنية تطبيقك باستخدام JavaScript. وهذا ما يسمح لـ React بإدارة واجهة المستخدم بكفاءة من خلال آلية Virtual DOM الخاصة بها.

إذا استمتعت بهذه المقالة، فقد تستمتع أيضًا بالنشرة الإخبارية المجانية التي أرسلها كل أسبوع إلى المطورين مثلك تمامًا. يمكنك التسجيل هنا.