بررسی JSX در ری اکت ! مزیت JSX در ری اکت چیست ؟
JSX در ری اکت یک افزونه جاوااسکریپتی هست که به ما اجازه نوشتن کد های مشابه HTML رو در جاوااسکریپت میده! در واقع JSX به ما اجازه میده که تو فایل های جاوااسکریپتی مثل ری اکت، از HTML استفاده کنیم 🙂 این تعریفی که از JSX در React داشتیم خیلی مختصر و ساده بود!
با فِرانت اِندی همراه باشید که میخوایم بصورت تخصصی JSX در ری اکت رو بررسی کنیم 🙂
JSX چیست ؟
JSX یکی از اصلی ترین مفاهم ری اکت هست.
JSX یک افزونه جاوااسکریپتی هست که تو ری اکت ازش استفاده میشه. JSX به ما اجازه نوشتن کد های HTML رو داخل جاوااسکریپت رو میده.
عبارت JSX مخفف JavaScript Syntax extention هست.
بصورت پیشفرض ما نمیتونیم کد های HTML ( تگ های HTML ) رو داخل فایل های جاوااسکریپتی بنویسیم! از اونجاییکه تو ری اکت از جاوااسکریپت استفاده میشه، پس اینجا هم نمیونیم از HTML استفاده کنیم.
اما راه حل چیه ؟ ( که بتونیم کد های HTML رو مستقیما داخل JavaScript بنویسیم )
راه حل JSX هست 🙂 به کمک JSX میشه از دستورات HMTL داخل فایل های React استفاده کرد..
تو تیکه کد زیر که یک JSX هست، ما یک اِلِمان P ( مشابه P در HTML ) ساختیم و نتیجه رو داخل یک متغیر ذخیره کردیم :
const frontEndi = <p>سلام</p>
چطور تو ری اکت JSX بنویسیم ؟
مرورگر ها هیچ درک و فهمی از JSX ندارن، پس اگه از JSX استفاده کنید مرورگر ها JSX رو متوجه نمیشن!
برای رفع این مشکل باید JSX رو به کمک Babel ( کامپایر جاوااسکریپتی ) به جاوااسکریپت تبدیل کنیم که مرورگر ها بتونن درکش کنن.
اگه از کتابخانه ری اکت استفاده میکنین، ری اکت خودش از Babel استفاده میکنه و کدهای JSX شمارو به JavaScript تبدیل میکنه. پس نگران این موضوع نباشید 🙂
تو تیکه کد زیر ما یک کامپوننت در ری اکت ساختیم که یک اِلِمان h1 به ما نشون میده :
const App = () => {
return (
<h1>سلام من یه تگ جی اس ایکس هستم</h1>
)
}
زمانیکه Babel ( کامپایلر جاوااسکریپتی ) به تیکه کد بالا برمیخوره، تیکه کد بالا رو به تیکه کد پایینی تبدیل میکنه :
const App = () => {
return (
React.createElement("h1",null,"سلام من یه تگ جی اس ایکس هستم")
)
}
تبدیل JSX به جاوااسکریپت در پشت صحنه اتفاق میوفته و ما متوجه این موضوع نمیشیم.
درواقع Babel عمل تبدیل JSX به JS رو به این دلیل انجام میده که مرورگر بتونه کد JSX مارو متوجه بشه و در صفحه نمایش بده.
چرا JSX خوبه ؟
چون نیازی نیست UI و Logic رو از هم جدا کنیم و فایل های جدا از هم براشون در نظر بگیریم ( مثلا یک فایل html و یک فایل js ) به کمک JSX میشه Logic و Ui رو در کنار همدیگه نوشت.
نوشتن JSX نسبت به جاوااسکریپت خیلی راحت تره!
JSX نسبت به جاوااسکریپت خام بهینه تره. چون زمان کامپایل شدن JSX، بهینه سازی هایی روش صورت میگیره.
تابع React.createElement چیست ؟
هر تیکه کدی که تو JSX در ری اکت مینویسیم، به کمک تابع React.createElement به جاوااسکریپت تبدیل میشه تا مرورگر ها بتونن درکش کنن.
تابع React.createElement همونطور که از اسمش پیداست، یک اِلِمان JSX برای ما میسازه.
منظور از اِلِمان JSX ، همون تگ هایی هست که در HTML استفاده میکردیم ( مثل h1,p,span,input,button,b و .. )
ساختار کلی تابع React.createElement بصورت زیر هست :
React.createElement(type, [props], [...children])
اگه به تیکه کد بالا نگاهی بندازید، میبینید که تابع createElement خودش چندتا ورودی از ما دریافت میکنه :
آرگومان اول createElement :
آرگومان اول type ( نوع ) اِلِمانی هست که میخواید بسازید . این type میتونه یک اِلِمان HTML باشه مثل P یا input و ..
آرگومان دوم createElement :
مقدار دوم خصوصیت هایی هست که میخواید به اون Element بدید. این همون attribute هایی هست که به تگ های HTML میدادیم مثل placeHolder و ..
آرگومان سوم createElement :
ما میتونیم به اِلِمانی که میخوایم بسازیم، فرزند ( Children ) بدیم. این Children میتونه یک اِلِمان یا کامپوننت دیگه باشه.
تیکه کد زیر که یک JSX هست رو در نظر بگیرید :
React.createElement("h1",null,"سلام من یه تگ جی اس ایکس هستم")
خروجی تیکه کد بالا، Object زیر هست :
{
type: 'h1',
props: {
children: 'سلام من یه تگ جی اس ایکس هستم'
}
}
برای اینکه ببینیم یک Element در JSX دقیقا چیه ، کافیه از اون اِلِمان log بگیریم :
const myJsxTag = <h2>سلام</h2>;
console.log(myJsxTag)
چطور تو کامپوننت خودمون یک اِلِمان JSX بسازیم ؟
برای اینکه تو کامپوننت خودمون در React از اِلِمان های JSX استفاده کنیم، خیلی راحت میتونیم بصورت زیر عمل کنیم :
const App = () => {
return (
<h1>سلام من یه تگ جی اس ایکس هستم</h1>
)
}
تو خط 3 تیکه کد بالا از یک اِلِمان JSX استفاده کردیم.
حالا اگه بخوایم از دو یا چند اِلِمان JSX استفاده کنیم، باید بصورت زیر عمل کنیم:
const App = () => {
return (
<h1>سلام من یه تگ جی اس ایکس هستم</h1>
<h1>سلام من یه تگ جی اس ایکس هستم</h1>
)
}
اما با اجرای کد بالا ( که 2 اِلِمان JSX نمایش دادیم ) ارور زیر بهمون نمایش داده میشه :
ارور JSX expressions must have one parent element در jSX
const App = () => {
return (
<div>
<h1>سلام من یه تگ جی اس ایکس هستم</h1>
<h1>سلام من یه تگ جی اس ایکس هستم</h1>
</div>
)
}
تو تیکه کد بالا از یک div به عنوان والد هر دو اِلِمان h1 استفاده کردیم و ارور ما برطرف شده است.
چطور کد JSX خودمون رو کامنت کنیم ؟!
کد JSX زیر رو در نظر بگیرید :
<h1>سلام من یه تگ جی اس ایکس هستم</h1>
برای کامنت کردن این تیکه کد JSX ، کافیه از کد JSX خودمون رو داخل {/* code */} بزاریم:
{/*<h1>سلام من یه تگ جی اس ایکس هستم</h1>*/}
یا برای سریعتر شدن روند کامنت کردن JSX ، اون تیکه کد که قصد کامنت کردنش رو دارید انتخاب کنید و / + Cmd در مک یا / + Ctrl در ویندوز رو همزمان فشار بدید.
چطور داخل JSX جاوا اسکریپت بنویسیم ؟
ما میتونیم داخل JSX ، کد های جاوا اسکریپتی بنویسیم. بطور مثال میتونیم متغیر های جاوااسکریپتی خودمون رو داخل JSX استفاده کنیم.
مثل :
const App = () => {
const Age = 23;
return (
<div>
<p>سن شما: {Age}</p>
</div>
);
};
تو خط 5 ما از یک متغیر جاوااسکریپتی داخل JSX خودمون استفاده کردیم. فقط کافیه متغیر خودمون رو داخل { } بزاریم.
شما میتونید داخل { } هر چیز جاوا اسکریپتی بنویسید و نشون بدید. مثل :
یک متغیر مثل myValue
ما میتونیم از متغیر های جاوااسکریپتی داخل JSX خودمون استفاده کنیم.
یک آرایه مثل [1,2]
ما میتونیم آرایه خودمون رو داخل JSX نشون بدیم، روش map بزنیم یا ..
یک مقدار از یک Object مثل Object.name
ما میتونیم به مقادیر یک Object از داخل JSX دسترسی داشته باشیم یا اون مقدار رو نشون بدیم.
و ..
اما برخی کار ها رو نمیشه داخل JSX انجام داد. کار هایی مثل :
استفاده از یک loop
ما نمیتونیم از حلقه loop داخل JSX استفاده کنیم!
ساخت یک متغیر ( Variable Declaration )
ما نمیتونیم یک متغیر داخل JSX ایجاد کنیم. مثل const x = 1
ساخت یک تایع ( Function Declaration )
ما نمیتونیم یک تابع داخل JSX بسازیم. صرفا میتونیم تابع رو فراخوانی کنیم.
نوشتن یک شرط با if
امکان نوشتن شرط با if داخل JSX نداریم.
فراخوانی یا نمایش یک Object
ما نمیتونیم خود Object رو داخل JSX نمایش بدیم. اما به اعضاش میتونیم دسترسی داشته باشیم.
نوشتن شرط در JSX ( جایگزین if )
گفتیم که تو JSX نمیشه از شرط هایی که با if نوشته میشن، استفاده کرد.
اما خب ما نیاز داریم که توی JSX شرط هایی رو بررسی کنیم و با توجه به اون شرط یک خروجی رو به کاربر نشون بدیم.
فرض کنید تو JSX ما میخوایم یک مقدار Boolean رو بررسی کنیم که اگر true بود به کاربر مقدار سلام رو نشون بدیم و درصورتیکه آن مقدار false بود مقدار خداحافظ رو نشون بدیم. برای انجام اینکار باید کد زیر رو داخل JSX بنویسیم :
<p>{myBool ? 'خداحافظ' : 'سلام'}</p>
// اگه شرط درست باشه سلام نشون داده میشه . در غیر این صورت خداحافظ نشون داده میشه
تیکه کد بالا معادل if و else جاوا اسکریپت در JSX هست.
اگه نیازی به else نداریم، میتونیم بصورت زیر شرط خودمون رو بنویسیم :
<p>{myBool && 'سلام'}</p>
تو مثال های بالا ما یک String به کاربر نشون دادیم، اما شما میتونید یک اِلِمان یا یک کامپوننت به کاربر نشون بدید. یعنی یک شرط رو بررسی میکنید و باتوجه به اون شرط به کاربر خروجی دلخواه رو نشون میدید.
چطور به اِلِمان های JSX کلاس ( class ) بدیم ؟
اگه با HTML کار کرده باشید، میدونید که میشه به اِلِمان ها خصوصیت class داد تا بعدا بتونیم به این اِلِمان از طریق css استایل بدیم.
تو JSX بجای عبارت class باید عبارت className رو بنویسیم.
یعنی :
تو JSX اینجوری class میدیم:
<p className="x">JSX</p>
تو HTML اینجوری class میدیم:
<p class="x">HTML</p>
ضمن اینکه در React ، تمامی Attribute ها بصورت camelCase نوشته میشن. ( مثل className )
برخی Element های HTML تگ بسته شدن ندارن( مثل <hr> ). اگه از این تگ ها بخوایم تو JSX استفاده کنیم باید تگ بسته شدن براشون بزاریم ( مثل </ hr> )
جمع بندی
ما تو این مقاله در مورد JSX صحبت کردیم که به عنوان یک React Developer لازم هست که درک درستی ازش داشته باشیم.
اِلِمان ها/تگ هایی که تو JSX میسازیم در پشت صحنه به کمک تابع React.createElement تبدیل به یک آبجکت جاوا اسکریپتی میشن تا جاوا اسکریپت امکان خوندنشون رو داشته باشه.
ما میتونیم تو JSX از کد ها/متغیر های جاوا اسکریپتی استفاده کنیم ( به کمک {} )
ما تو ری اکت نمیتونیم از عبارت class برای دادن کلاس به اِلِمان ها استفاده کنیم چون عبارت class یک مقدار رزرو شده هست. راه حل استفاده از عبارت className هست.
تمامی خصوصیت ها / Attribute ها در ری اکت بصورت camelCase نوشته میشن ( مثل myName )
JSX یک افزونه جاوااسکریپتی هست که تو ری اکت ازش استفاده میشه. JSX به ما اجازه نوشتن کد های HTML رو داخل جاوااسکریپت رو میده.
نیازی نیست UI و Logic رو از هم جدا کنیم و فایل های جدا از هم براشون در نظر بگیریم ( مثلا یک فایل html و یک فایل js ) به کمک JSX میشه Logic و Ui رو در کنار همدیگه نوشت.
نوشتن JSX نسبت به جاوااسکریپت خیلی راحت تره!
JSX نسبت به جاوااسکریپت خام بهینه تره. چون زمان کامپایل شدن JSX، بهینه سازی هایی روش صورت میگیره.
عبارت JSX مخفف JavaScript Syntax extention هست.
32 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
مقاله واقعا عالی و کامل بود. دمتون گرم
سلام و درود
ممنونم از نظرتون و خوشحالم که براتون مفید واقع شده.
JSX در ری اکت فقط کاربرد داره یا در سایر کتابخانه ها هم میشه ازش استفاده کرد؟
سلام و درود
JSX در React کاربرد داره و در سایر کتابخونه ها کاربرد نداره. در برخی کتابخانه ها و فریمورک ها معادلی برای JSX وجود داره.
چطور باید JSX در ری اکت رو نصب کنیم ؟
سلام و درود
JSX در ری اکت بصورت پیشفرض قابل استفادس و نیازی به نصب کردن یا تنظیم خاصی ندارید . درواقع چون ری اکت از Babel استفاده میکنه، خود Babel کد های JSX شمارو به جاوااسکریپت تبدیل میکنه.
سلام ممنون از توضیحاتتون
لطفا در مورد next.js هم مقاله آموزشی قرار بدید
سلام و درود
خوشحالم که براتون مفید واقع شده.
حتماا ..
سلام وقت بخیر . تو مصاحبه ای که داشتم ازم پرسیدن چرا تو JSX بجای class از className استفاده میکنیم ؟
من نمیدونم دلیلش چیه .. ممنون میشم توضیح بدین
سلام و درود
همونطور که تو مقاله مطرح شده، JSX یک افزونه جاوااسکریپتی هست.
عبارت class یک کلمه کلیدی رزرو شده تو جاوا اسکریپت هست! پس نمیتونیم ازش استفاده کنیم .
اگه از class بجای className استفاده کنیم، به conflict برمیخوریم!
درواقع استفاده از className بجای class تنها راهیه که بتونیم به اِلِمان های JSX خودمون، کلاس بدیم.
عالی بود مرسی
سلام و درود
خوشحالم که برات مفید واقع شده 🙂
موفق باشی
kheyli khoob bood tashakor
سلام و درود
خوشحالم که براتون مفید واقع شده 🙂
توضیحاتتون عاااالی بود
سلام و درود
ممنونم لطف دارین 🙂
موفق باشید
برای استفاده از JSX ری اکت باید چیزی نصب کنیم ؟
سلام و درود
خیر بزرگوار با نصب کتابخانه ری اکت، میتونید از JSX ری اکت استفاده کنید.
نیاز به نصب چیز اضافه ای نیست.
موفق باشید
مرسی از اینکه انقدر به زبون ساده مباحث فرانت اند رو توضیح میدید
سلام و درود
خواهش میکنم بزرگوار 🙂
خوشحالم که براتون مفید واقع شده
عالی بود ممنون
سلام و درود
خوشحالم که برات مفید واقع شده 🙂
خیلی کاربردی بوود ممنون
سلام و درود
خوشحالم که براتون مفید واقع شده 🙂
مقاله فوق العاده مفید و کاربردی بود تشکر
سلام خوشحالم که براتون مفید واقع شده 🙂
توضیحاتتون درمورد JSX ری اکت عالی بود ممنون
سلام و درود
خواهش میکنم بزرگوار
موفق باشید 🙂
محتوا فوق العاده بوود
سلام ممنونم از توجهت 🙂
توضیح مفاهیم ری اکت بسیار ساده و قابل فهم بود.
سپاس از،شما
خیلی به من کمک کرد
موفق باشید
سلام منصوره عزیز، خیلی خیلی خوشحالم که این مقاله برات مفید واقع شده 🙂
موفق باشی