jsx چیست؟

حال که دانستیم ری اکت چیست، اجازه دهید با تعدادی از اصطلاحات و مفاهیمی که در ادامه این آموزش با آن برخورد می کنیم، آشنا شویم.

در روز گذشته توضیح دادیم که ری اکت چیست و در یک سطح بالاتر راجع به نحوه کار کردن این فریم ورک صحبت کردیم. در این مقاله قصد داریم به یکی از بخش های اکوسیستم ری اکت یعنی ES6 و jsx بپردازیم.

ساختار ES6 / ES5 / jsx

با یک جستجوی ساده درباره ری اکت در اینترنت، بدون تردید با واژه های jsx، ES5 و ES6 برخورد خواهیم کرد. این واژه های مبهم می تواند باعث سردرگمی شما شود.

ES5 (کلمه ES برگرفته از EcmaScript است) در حقیقت همان جاوا اسکریپت معمولی و عدد 5 شماره بروزرسانی جاوا اسکریپت می باشد. ES5 در سال 2009 تکمیل و منتشر شد. این نسخه چند سالی است که توسط اکثر مرورگرهای بزرگ پشیبانی می شود. بنابراین اگر در این چند سال اخیر کدی را به زبان جاوا اسکریپت نوشته اید، به احتمال زیاد از ES5 استفاده کرده اید.

ES6 نسخه جدید جاوا اسکرپیت است که تعدادی قابلیت کاربردی و سینتکسی را به این زبان اضافه کرده است. این نسخه در سال 2015 منتشر شد. ES6 تقریبا توسط تمام مرورگرهای بزرگ پشتیبانی می شود.

اما گاهی اوقات نسخه های قدیمی مرورگرهای وب از این زبان پشتیبانی نمی کنند.

برای مثال، اینترنت اکسپلورر 11 از ES6 پشتیبانی نمی کند، اما این مرورگر تنها حدود 12 درصد سهم از بازار مرورگرهای وب را در اختیار دارد. برای استفاده از مزایای ES6 باید چند کار را انجام دهید تا کدهای نوشته شده به این زبان در اکثر مرورگرها اجرا شود:

ما باید کدهای خود را کامپایل (transpile) کنیم تا این کدها توسط مرورگرهای مختلف شناخته شده باشد یعنی باید کدهای ES6 تبدیل به ES5 شود.

همچنین برای اینکه کدهای ES6 در همه مرورگرها اجرا شود باید یک فایل polyfill به آن اضافه کنیم.

اکثر کدهای نوشته شده در این آموزش به آسانی به ES5 تبدیل می شود. در جایی که از ES6 استفاده می کنیم، ابتدا قابلیت آن را معرفی کرده و سپس به کدنویسی آن می پردازیم.

همان طور که می بینید تمام کامپوننت های ری اکت یک تابع render دارند که مشخص می کند این کامپوننت چه خروجی باید داشته باشد.

javascript extention یا jsx یک افزونه ری اکت است که به ما اجازه می دهد کدهای جاوا اسکریپت را همانند html بنویسیم.

برای فهم این موضوع، فرض کنید که یک کامپوننت ری اکت دارید که یک تگ h1 را رندر می کند. jsx به ما اجازه می دهد تا این عنصر را در یک حالت که بسیار شبیه به html است تعریف کنیم.

class HelloWorld extends React.Component {
render() {
return (
<h1 className='large'>Hello World</h1>
);
}
}

ظاهراً متد render() در کامپوننت HelloWorld، کدهای Html را به عنوان خروجی بر می گرداند، اما در واقع این متد کد jsx را بر می گرداند.

کدهای jsx در زمان اجرا به جاوا اسکریپت معمولی کامپایل می شود. این کامپوننت بعد از کامپایل مطابق زیر خواهد بود:

class HelloWorld extends React.Component {
	render() {
		return (
			React.createElement(
				'h1',
				{className: 'large'},
				'Hello World'
			)
		);
	}
}

هر چند jsx به html شباهت دارد، اما درواقع یک جایگزین خوب برای نوشتن دستور React.createElement() است. هنگامی که یک کامپوننت رندر می شود، خروجی آن یک درختی از عناصر ری اکت یا پیش نمایش مجازی از عناصر html است.

ری اکت تعیین می کند که چه تغییراتی روی Dom واقعی مربوط به این عنصر باید انجام بگیرد. در مثال کامپوننت HelloWorld کد htmlیی که توسط ری اکت در Dom نوشته می شود مشابه زیر است:

<h1 class='large'>Hello World</h1>

سینتکس class extends که در اولین کامپوننت مان استفاده کردیم، در واقع سینتکس ES6 است. این زبان به ما اجازه می دهد تا اشیاء یا Objects را با روش شی گرایی ایجاد کنیم.

در ES6 سینتکس class به کد زیر ترجمه می شود.

var HelloWorld = function() {}
Object.extends(HelloWorld, React.Component)
HelloWorld.prototype.render = function() {}

چون jsx کد جاوا اسکریپت است، ما نمی توانیم از کلمات رزرو شده جاوا اسکریپت در آن استفاده کنیم. برخی از این کلمات عبارتند از class و for.

برای حل این موضوع ری اکت یک خصیصه به نام className را ارائه داده است. ما از این خصیصه در کامپوننت Helloworld برای تنظیم کلاس large روی تگ h1 استفاده می کنیم.

چند خصیصه دیگر مثل for روی یک label وجود دارد که ری اکت آن را تبدیل به htmlFor می کند، چون For یک کلمه رزرو شده است.

اگر بخواهیم به جای کدهای jsx از کدهای جاوا اسکریپت استفاده کنیم، کافی است تنها از تابع React.createElement() استفاده کنیم و نیازی نیست به لایه انتزاعی فکر کنید.

اما ما از jsx استفاده می کنیم، چون هنگام نوشتن یک کامپوننت پیچیده، کدهای jsx خوانایی بیشتری دارند.

به کدهای زیر نگاه کنید.

<div>
   <img src="profile.jpg" alt="Profile photo" />
   <h1>Welcome back Ari</h1>
</div>

کدهای جاوا اسکریپتی که برای ساخت کد بالا استفاده می شود، مطابق زیر است:

React.createElement("div", null, 
    React.createElement("img", {src: "profile.jpg", alt: "Profilephoto"}),
    React.createElement("h1", null, "Welcome back Ari"));

حال که درباره jsx مطالبی را یاد گرفتید، می توانیم اولین کامپوننت ری اکت خود را بنویسیم.

در روز بعد حتما به ایجاد اولین کامپوننت ری اکت خود می پردازیم.