در مطالب گذشته وب سایت آموزش برنامه نویسی صعود به طور کلی در رابطه با کتابخانه ی react.js صحبت کردیم و نکات مهم را در رابطه با این کتابخانه ی جاوا اسکریپت بیان کردیم. اما در این مقاله گروه آموزش برنامه نویسی صعود قصد دارند تا به چیستی JSX بپردازند و کاربرد آن در React.js را برای شما بیان کنند پس اگر قصد دارید تا اطلاعات کاملی در رابطه با موضوع JSX چیست؟ کاربرد JSX در React.js بدانید. در ادامه ی این مطلب با گروه آموزشی صعود همراه شوید. پیشنهاد میکنیم در رابطه با این موضوع حتما مقالات، React.js چیست؟ چرا از ری اکت استفاده کنیم؟ و Javascript چیست؟ همه چیز درباره ی جاوا اسکریپت را مطالعه کنید.

JSX چیست؟ کاربرد JSX در React.js

JSX چیست؟

JSX یک نحو شبیه XML/HTML است که توسط React استفاده می‌شود و ECMAScript را گسترش می‌دهد تا متنی شبیه به XML/HTML بتواند با کد جاوا اسکریپت/React همزیستی داشته باشد. این نحو در نظر گرفته شده است که توسط پیش پردازشگرها (به عنوان مثال، ترانسپایلرهایی مانند Babel) برای تبدیل متن HTML مانند موجود در فایل های جاوا اسکریپت به اشیاء استاندارد جاوا اسکریپت که موتور جاوا اسکریپت آن ها را تجزیه می کند، استفاده شود.

اساساً، با استفاده از JSX می‌توانید ساختارهای مختصر مانند HTML/XML (به عنوان مثال، ساختارهای درختی مانند DOM) را در همان فایلی که کد جاوا اسکریپت می‌نویسید بنویسید، سپس Babel این عبارات را به کد جاوا اسکریپت واقعی تبدیل می‌کند. برخلاف گذشته، به جای قرار دادن جاوا اسکریپت در HTML، JSX به ما اجازه می دهد HTML را در جاوا اسکریپت قرار دهیم.

با استفاده از JSX می توان کد JSX/JavaScript زیر را نوشت:

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"

      )

   )

);

می‌توانید JSX را به‌عنوان خلاصه‌نویسی برای فراخوانی React.createElement() در نظر بگیرید.

ایده ترکیب HTML و جاوا اسکریپت در یک فایل می تواند یک موضوع نسبتاً بحث برانگیز باشد. بحث را نادیده بگیرید. اگر آن را مفید می دانید از آن استفاده کنید. اگر نه، کد React مورد نیاز برای ایجاد گره های React را بنویسید. انتخاب شماست. نظر من این است که JSX یک نحو مختصر و آشنا برای تعریف یک ساختار درختی با ویژگی هایی ارائه می دهد که نیازی به یادگیری زبان قالب یا ترک جاوا اسکریپت ندارد. هر دوی آنها می توانند در هنگام ساخت برنامه های بزرگ یک پیروزی باشند. این باید واضح باشد، اما خواندن و نوشتن JSX از طریق هرم های بزرگ فراخوانی تابع جاوا اسکریپت یا لفظ اشیاء آسان تر است (به عنوان مثال، دو نمونه کد در این بخش را با هم مقایسه کنید).

علاوه بر این، تیم React به وضوح معتقد است که JSX برای تعریف رابط‌های کاربری بهتر از راه‌حل‌های قالب سنتی (مانند Handlebars) مناسب است:

نشانه گذاری و کدی که آن را تولید می کند کاملاً به هم گره خورده است. علاوه بر این، منطق نمایش اغلب بسیار پیچیده است و استفاده از زبان های الگو برای بیان آن دست و پا گیر می شود. ما دریافته‌ایم که بهترین راه‌حل برای این مشکل، تولید HTML و درخت‌های مؤلفه مستقیماً از کد جاوا اسکریپت است، به گونه‌ای که بتوانید از تمام قدرت بیانی یک زبان برنامه‌نویسی واقعی برای ایجاد رابط‌های کاربری استفاده کنید.

 مزایا و معایب JSX

مزایای JSX:

• JSX نوشتن یا اضافه کردن HTML در React را آسان‌تر می‌کند.
• JSX می تواند به راحتی تگ های HTML را به عناصر واکنشی تبدیل کند.
• سریعتر از جاوا اسکریپت معمولی است.
• JSX به ما اجازه می دهد تا عناصر HTML را بدون استفاده از متد appendChild() یا createElement() در DOM قرار دهیم.
• از آنجایی که JSX یک عبارت است، می‌توانیم آن را در داخل دستورات if و حلقه‌های for استفاده کنیم، آن را به متغیرها اختصاص دهیم، آن را به عنوان آرگومان بپذیریم یا آن را از توابع برگردانیم.
• JSX از حملات XSS (مقطع اسکریپت نویسی) که عموماً به عنوان حملات تزریق شناخته میشوند، جلوگیری می کند.
• از نظر نوع ایمن است و بیشتر خطاها را می توان در زمان کامپایل یافت.

معایب JSX:

• اگر HTML درست نباشد JSX خطا می دهد.
• در JSX کد HTML باید در یک عنصر سطح بالا پیچیده شود در غیر این صورت خطا خواهد داد.
• اگر عناصر HTML به درستی بسته نشده باشند JSX خطا می دهد.

جمع بندی

باید چند قدم به عقب برگردید و بفهمید react javascript چیست و چگونه می توانید از آن استفاده کنید؟

JSX -1 را به عنوان یک الگو در نظر نگیرید، بلکه به عنوان یک نحو خاص/جایگزین JS است که باید کامپایل شود. به عنوان مثال، JSX به سادگی نشانه گذاری XML مانند را به جاوا اسکریپت تبدیل می کند.

2- ابزار Babel یک انتخاب ذهنی از تیم React برای تبدیل کد ES* و نحو JSX به کد ES5 است. می توانید در http://babeljs.io/ یا با مطالعه کتاب راهنمای بابل درباره بابل اطلاعات بیشتری کسب کنید.

3- React.js -شایستگی JSX در چهار نقطه را دارد:

 1- افراد فنی کمتری هنوز می توانند قطعات مورد نیاز را درک کرده و اصلاح کنند. برای توسعه دهندگان و طراحان CSS،JSX بیشتر از جاوا اسکریپت آشناتر است. به عنوان مثال، نشانه گذاری HTML مانند نشانه گذاری HTML به نظر می رسد.

  2- شما می توانید از قدرت کامل جاوا اسکریپت در HTML استفاده کنید و از یادگیری یا استفاده از زبان قالب خودداری کنید. JSX یک راه حل قالب نیست. این یک نحو اعلانی است که برای بیان ساختار درختی اجزای UI استفاده می شود.

  3- با افزودن یک مرحله تبدیل JSX، خطاهایی را در HTML خود خواهید یافت که در غیر این صورت ممکن است از دست بدهید.

JSX -4 ایده سبک های درون خطی را ترویج می کند. که می تواند چیز خوبی باشد.

4- مراقب JSX Gotchas باشید.

JSX -5 یک چیز جدا از خود React است. JSX سعی نمی کند با هیچ یک از مشخصات XML یا HTML مطابقت داشته باشد. JSX به عنوان یک ویژگی ECMAScript طراحی شده است و شباهت به XML/HTML فقط در سطح است (یعنی شبیه XML/HTML است بنابراین می توانید چیزی آشنا بنویسید). مشخصات JSX در حال حاضر توسط هر کسی به عنوان یک پسوند نحوی شبیه به XML در ECMAScript بدون هیچ گونه معنایی تعریف شده در حال تهیه پیش نویس است.

6- n JSX ،<foo-bar /> به تنهایی معتبر است در حالی که به تنهایی <foo-bar> معتبر نیست. شما باید همیشه همه برچسب ها را ببندید.

در این مقاله کارشناسان گروه آموزش برنامه نویسی وب سایت صعود به تعریف JSX و کاربرد آن در کتابخانه ی React.js پرداختند. همچنین شما می توانید سوالات، انتقادات و پیشنهادات خود را در رابطه با موضوع JSX چیست؟ کاربرد JSX در React.js از قسمت نظرات با کارشناسان ما بیان کنید. در صورت تمایل می توانید صعود را در شبکه های اجتماعی اینستاگرام و تلگرام دنبال کنید.