jsx چیست ؟

حامد حسینی — Wed, 18 Sep 2019 06:43:59 +0000

jsx چیست ؟ حامد حسینی چ., 09/18/2019 - 11:13

JSX یک syntax XML / HTML است که توسط React استفاده می شود که توسط ECMAScript گسترش داده شده است .jsx این امکان را میدهد تا شما ساختاری مشابه html داشته باشید تا توسط dom به تگ های html استاندارد و قابل خوانا توسط java script تبدیل کند .

در اصل ، با استفاده از JSX می توانید ساختارهای مختصر HTML / XML را در کد های خود بنویسید ، سپس بابل این عبارات را به کد جاوا اسکریپت واقعی تبدیل می کند. بر خلاف گذشته ، به جای قرار دادن JavaScript به HTML ، JSX به ما امکان می دهد HTML را در JavaScript قرار دهیم.

در React، به جای استفاده از regular JavaScript برای قالب سازی، از JSX استفاده می کند. JSX یک جاوا اسکریپت ساده است که اجازه میدهد از کدهای html استفاده کنید. این کدها تبدیل به کدهای جاوا اسکریپت می شوند که آنها را React Framework می نامند.

در React، برای پروسه Templating از JSX یا JavaScript Syntax Edition به جای جاوا اسکریپت عادی استفاده شود. JSX نوعی جاوا اسکریپت ساده است که شما اجازه می‌دهد تا کدهای html را درون ساختارش قرار دهید. این کدهای HTML در ساختار JSX در هنگام اجرا به کدهای جاوا اسکریپتی رندر می‌شوند. البته این امکان وجود دارد که کدها را بدون استفاده از HTML و به صورت جاوا اسکریپت هم بنویسید. در این صورت دیگر نیازی به دانش JSX نیست.

مثال زیر را ببینید :

var nav = (
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
);

که بابل آن را به این صورت تبدیل می کند:

var nav = React.createElement(
   "ul",
   { id: "nav" },
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Home"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "About"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Clients"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Contact Us"
      )
   )
);

تمام attribute ‌های jsx از قانون camleCase استفاده میکنند .

برای اینکه HTML و JavaScript را در هر برنامه ای درون هم بنویسیم میتواند موضوع بحث بر انگیز باشد .شما میتوانید بدون jsx کد های html را در ریشه React.createElement() بنویسید اما این میتواند بعدا برای شما خطا های فراوانی به هوراه داشته باشد

در react هندلینگ خطاها با استفاده از jsx خیلی راحت تر است .

علاوه بر این ، به وضوح قابل باور است که JSX برای تعریف UI مناسب تر از یک راه حل سنتی قالب (مثلاً Handlebars) است.

react js

JSX

jsx چیست ؟

افزودن دیدگاه جدید