JSX

مقدمة عن JSX

إذا سبق لك تنفيذ تطبيق ويب باستخدام إطار العمل "React.js" ، فربما لاحظت أن بناء الجملة الخاص بكتابة مكونات React.js يبدو مختلفًا قليلاً عن كود Javascript الآخر. على الرغم من أنها متشابهة في الغالب ، يتم وصف مكونات React من خلال أقواس خاصة ، أقواس الزاوية اليمنى واليسرى. إنها تبدو تمامًا مثل بناء جملة XML ، "لغة التوصيف الموسعة". في React.js ، تسمى هذه البنية بالمثل "JSX" ، والتي تعني "Javascript XML".

الهدف الرئيسي من بناء الجملة هذا هو تبسيط كتابة كود React. لا يمكن تفسير شفرة JSX بواسطة JVM ، لذلك يجب تجميعها إلى كود Javascript حقيقي قبل الاستخدام - وهي مهمة يتم إجراؤها عادةً بواسطة حزم مثل Babel أو Webpack.

ربما لم تكتب كود React مطلقًا

وهذا يعني أنه من المحتمل جدًا أنك لم تكتب أبدًا مكونات React.js "الحقيقية" التي يتم إنشاؤها من شفرة JSX الخاصة بك. لكن لا داعي للقلق ، يمكن القيام بذلك بسهولة دون الكثير من المتاعب. في الواقع ، يمكنك حتى كتابة تطبيق ويب React كامل دون استخدام JSX مطلقًا. يوضح مقتطف الشفرة التالي كيف يبدو مكون React.js حقًا مع Javascript فقط.

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

يمكنك حتى تجربة ذلك في متصفحك ، دون تثبيت أي برنامج! ما عليك سوى التمرير لأسفل حتى نهاية هذه الصفحة لاستخدام الرابط الموجود في الملحق.

استخدام JSX لتبسيط التعليمات البرمجية الخاصة بك

كما ترى ، فإن الميزة الرئيسية لبناء جملة JSX هي جعل الكود المرتبط بواجهة المستخدم أسهل في الكتابة وأسهل للتمييز عن الأجزاء الأخرى من تطبيقك ، حيث توفر البنية الشبيهة بـ XML مؤشرًا واضحًا لنطاق الشفرة.

ميزة أخرى رائعة لـ JSX هي أنها تصبح مجرد تعبير بعد خطوة التجميع. لذلك يمكنك استخدامه في عبارات if-else أو حتى تخزين نتيجتها في متغير. ونظرًا لأن مكونات React.js يمكن أن تحتوي على تعبيرات مثل عبارات الأطفال ، يمكنك كتابة كود واجهة مستخدم قابل للتكوين بدرجة عالية!

استيراد افتراضي لكل ملف JSX

ربما لاحظت أن كل ملف JSX في العديد من البرامج التعليمية والأدلة وعلى الأرجح حتى الكود الخاص بك يحتوي على الاستيراد الافتراضي من مكتبة React المضمنة ، على الرغم من أنك قد لا تستدعي هذا المتغير المستورد مباشرة. السبب وراء ذلك هو أنه بعد خطوة التحويل البرمجي ، يصبح كل تعبير JSX مكالمة "React.createElement" ، كما رأيت في مثال الشفرة من قبل. لذلك من الضروري أن يكون المتغير "React" - المتغير من الاستيراد الافتراضي مدرجًا في نطاق كل ملف.

تبدو مثل HTML ، لكنها ليست كذلك

أحد القيود الرئيسية عند الترميز في صيغة JSX هو تدوين اسم المكون الخاص بك. لكي يتعرف المجمع على مكوناتك بشكل صحيح ، يجب أن تكون فريدة من علامات HTML القياسية ، حيث تبدو البنية كما هي.

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

لذلك ، من الضروري ترميز عناصر JSX دائمًا في غلاف الجملة ، مما يعني أن الحرف الأول يجب أن يكون كبيرًا.

متغير التنضيد

ربما لاحظت أن العديد من المشاريع تستخدم TSX أيضًا كلاحقة ملف لملفات مكونات React.js الخاصة بهم. هذا مجرد امتداد لـ JSX الأصلي ليكون متوافقًا مع Typescript. تسمح لك ملفات TSX بكتابة كود Typescript مع مكونات تدوين JSX.

مجرد البداية

قدمت هذه المقالة مقدمة بسيطة لـ JSX لترميز مكونات React. الميزة الرئيسية هي بناء جملة موجز للغاية يبدو طبيعيًا في بيئة الويب. يمكنك كتابة عناصر قابلة للتركيب بدرجة عالية مع القليل جدًا من التعليمات البرمجية ، والتي تعد بلا شك أحد العوامل الرئيسية لحالة React الحالية الشهيرة والشائعة. إذا كنت مهتمًا بوجود المزيد من الأدلة التفصيلية الممتازة التي يقدمها فريق React على موقعهم ، فستجد الروابط في الملحق في نهاية هذه الصفحة.