JSX والمكوّنات (Components)

جزء من دورة React

في الدرس الماضي رأيت مكوّنًا (component) يُرجع شيئًا يشبه HTML: return <h1>Hello, React</h1>;. لا بد أن ذلك بدا لك غريبًا بعض الشيء. فدوال JavaScript تُرجع قيمًا كالأرقام والنصوص والكائنات، لا أقواسًا زاوية. وكتابة الترميز مباشرةً داخل دالة JavaScript لا تنجح إلا بفضل طبقة اسمها JSX، ولها مجموعة صغيرة من القواعد الخاصة، تختلف عن HTML بما يكفي لتُعثِر كل من يظن أنه يعرفها سلفًا.

JSX اختصار لـ JavaScript XML. وهو امتداد للصياغة يتيح لك كتابة ما يشبه وسم HTML مباشرةً داخل كود JavaScript. تقرأ أداة البناء (وهي المُصرّف نفسه الذي ذُكر في الدرس السابق) السطر <h1>Hello</h1> فتحوّله إلى استدعاء دالة JavaScript عادي قبل أن يراه متصفحك، شيء قريب من createElement("h1", null, "Hello"). لن تضطر أبدًا إلى كتابة هذا الاستدعاء بنفسك، لكن معرفتك بوجوده تفسّر كل قاعدة تأتي أدناه: إذا كان <h1>...