يعرف كل مطور ReactJS عن سحر JSX، يتيح لنا كتابة بعض HTML في جافا سكريبت، وهکذا يحدث السحر. يمكننا القيام بهذا النوع من الأشياء في أدوات مثل babel.

على سبيل المثال، لدينا المكون الإضافي babel المسمى @babel/plugin-transform-react-jsx والذي يمنحنا القدرة على العمل مع بناء جملة JSX.

المتطلبات الأساسية

كيف يعمل JSX؟

نحتاج فقط إلى @babel/plugin-transform-react-jsx للبدء، يمكنك تثبيته باستخدام npm أو yarn:

npm install --save-dev @babel/plugin-transform-react-jsx
# or
yarn add -D @babel/plugin-transform-react-jsx

سحر JSX

حان الوقت للتنقيب في السحر ومعرفة ما يحدث في الداخل. في React 17، استبدل فريق React core دالة React.createElement الكلاسيكية بjsx ووظائفه. لذلك لن تحتاج إلى استيراد React بعد الآن لكتابة jsx. الآن، يستخدم @babel/plugin-transform-react-jsx وظيفة jsx افتراضيًا. والآن، تحقق من هذا:

const profile = (
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
  </div>
);

بشكل افتراضي، سيقوم babel بترجمة ملف jsx إلى جافا سكريبت العادي هذا:

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

const profile = _jsxs("div", {
  children: [
    _jsx("img", {
      src: "avatar.png",
      className: "profile",
    }),
    _jsx("h3", {
      children: [user.firstName, user.lastName].join(" "),
    }),
  ],
});

هكذا يعمل السحر، بهذه السهولة!

لنكن ساحرين!

كلنا نحب القيام بأشياء سحرية، فلماذا لا نفعلها الآن؟ فلنقم بذلك! نحن بحاجة إلى ملحق babel للقيام ببعض السحر.

يمكننا الآن إخبار الملحق باستخدام وظيفتنا الخاصة بدلاً من وظائف React. لذلك، نحتاج إلى كتابة تعليق صغير لنقوله.

/** @jsx logJsx */

هنا نقول، نريد استخدام logJsx لبناء جملة jsx. بالنسبة إلى وظيفة logJsx، نقوم بتحویلها إلى عبارة مسجلة مثل “It’s a div، Hello Mohammad”. الآن دعنا نحدد وظيفة logJsx:

// the babel plugin is going to pass this function the type and props/attributes 
function logJsx(type, props) {
  console.log(`It's a ${type}, Hello ${props.name}`);
}

لقد فعلنا ذلك، تحقق من هذا:

<title name="Mohammad"></title> // type: "title" props: { name: "Mohammad" }
// console: It's a title, Hello Mohammad

هذه هي الطريقة التي يعمل بها. لكن في React، بدلاً من التسجيل، يعطينا شيئًا مثل هذا:

{
    type: "title",
    key: null,
    ref: null,
    props: {
        name: "Mohammad"
    },
    _owner: null,
    _store: {}
}

الآن رأينا ما يحدث في React. إذا كنت تعرف أي سحر آخر، فقم بالتعليق عليه.

أتمنى أن تكون قد استمتعت بهذا المقال وتعلمت شيئًا جديدًا. لا تنسى المشاركة.

محمدباقر عبيات

The one Who loves solving stuff and writing about them.

منشور ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة