بررسی JSX در ری اکت ! مزیت JSX در ری اکت چیست ؟ی 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(&quoth1&quot,null,&quotسلام من یه تگ جی اس ایکس هستم&quot)

)

}

تبدیل 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(&quoth1&quot,null,&quotسلام من یه تگ جی اس ایکس هستم&quot)

خروجی تیکه کد بالا، 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>

)

}

تو خط 3 تیکه کد بالا از یک اِلِمان JSX استفاده کردیم.

حالا اگه بخوایم از دو یا چند اِلِمان JSX استفاده کنیم، باید بصورت زیر عمل کنیم:

const App = () => {

return (

    <h1>سلام من یه تگ جی اس ایکس هستم</h1>

     <h1>سلام من یه تگ جی اس ایکس هستم</h1>

)

}

اما با اجرای کد بالا ( که 2 اِلِمان JSX نمایش دادیم ) ارور زیر بهمون نمایش داده میشه :

ارور JSX expressions must have one parent element  در jSX

دلیل ارور JSX expressions must have one parent element در خود متن ارور مشخصه! ما باید برای Element های JSX خودمون والد داشته باشیم.

به عبارت ساده اِلِمان های JSX حتما باید یک اِلِمان والد ( یک div ، Span یا .. ) داشته باشن.

همچنین برای رفع این مشکل میتونید از Fragment در ری اکت استفاده کنید. ( اگه با Fragment آشنا نیستید پیشنهاد میکنم مقاله مربوط به این قابلیت رو مطالعه کنید)

برای رفع ارور تیکه کد بالا ( که 2 اِلِمان JSX داشتیم ) میتونیم از یک div به عنوان والد استفاده کنیم

const App = () => {

return (

    <div>

        <h1>سلام من یه تگ جی اس ایکس هستم</h1>

        <h1>سلام من یه تگ جی اس ایکس هستم</h1>

     </div>

)

}

تو تیکه کد بالا از یک div به عنوان والد هر دو اِلِمان h1 استفاده کردیم و ارور ما برطرف شده است.

چطور کد JSX خودمون رو کامنت کنیم ؟!

لطفا برای مطالعه ادامه این مقاله و دسترسی به مثالها و تیکه کدهای بیشتر روی لینک زیر کلیک کنید :

JSX در ری اکت