JSX چیست؟

JSX یا JavaScript XML یک نوع نوشتار توسعه‌یافته برای جاوااسکریپت است که به شما اجازه می‌دهد کدهای شبیه به HTML را درون جاوااسکریپت بنویسید.

چرا از JSX استفاده می‌کنیم؟

کدنویسی خوانا و نزدیک به HTML.

امکان ترکیب منطق (JavaScript) و ظاهر (HTML) در یک فایل.

اکثر ابزارها و افزونه‌های توسعه‌دهنده (مانند React DevTools) با JSX به خوبی کار می‌کنند.

تشخیص خطاهای ساختاری توسط کامپایلرها (مثل Babel).

قواعد نوشتاری در JSX

در حالی که JSX شباهت زیادی به HTML دارد، اما چند تفاوت و قاعده مهم وجود دارد که باید رعایت شوند:

  • یک المان والد
  • همه تگ‌ها باید بسته شوند
  • className به جای class
  • Inline style به صورت شیء
  • رویدادها به صورت camelCase
  • جاوااسکریپت درون {}

نکته: در ادامه این درس به بررسی این قواعد می‌پردازیم.

جاوااسکریپت درون {}

برای درج هر عبارت یا متغیر جاوااسکریپت در داخل JSX، از براکت مجعد ({}) استفاده می‌کنیم.

const name = "PNLdev";
return <h1>Hello {name}</h1>

درج بلاکی بزرگ HTML

برای نوشتن HTML در چند خط، از پرانتز () استفاده کنید.

return (
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
);

نکته: بدون درج پرانتز، همه‌ی کد‌های بعد از return نادیده گرفته می‌شود.

یک المان والد

تمام المان‌های JSX باید در یک المان والد (parent) مانند تگ <div> بسته‌بندی شوند.

return (  
  <div>  
    <h1>عنوان</h1>  
    <p>متن</p>  
  </div>  
);

نکته: اگر ساختار HTML درست نباشد یا یک المان واحد وجود نداشته باشد، JSX به ما خطا (error) می‌دهد.

برای جلوگیری از ایجاد نود (Node) جدید در DOM یا اختلال در استایل‌دهی، می‌توانید از React Fragment برای دسته‌بندی المان‌ها استفاده کنید.

نوع نوشتار React Fragment به صورت زیر است:

<React.Fragment>
    {/* Codes */}
</React.Fragment>

یا به طور خلاصه:

<>
    {/* Codes */}
</>

return (  
  <>  
    <h1>عنوان</h1>  
    <p>متن</p>  
  </>  
);

همه تگ‌ها باید بسته شوند

JSX مطیع قوانین XML است، در نتیجه المان‌های HTML باید بسته باشند.

return <input type="email" />

نکته: اگر تگ‌های HTML بسته نشوند، JSX به ما خطا (error) می‌دهد.

className به جای class

در JSX به جای استفاده از کلمه کلیدی class (که در جاوااسکریپت کلمه رزرو شده است)، از className استفاده می‌شود.

return <h1 className="title">Hello PNLdev</h1>

نکته: زمانی که JSX رندر می‌شود، ویژگی className را به ویژگی class ترجمه می‌کند.

Inline style به صورت شیء

برای استایل‌های درون‌خطی باید از شیءهای جاوااسکریپت استفاده کنید. ویژگی‌ها به صورت camelCase نوشته می‌شوند.

return <h1 style={{ backgroundColor: 'green', fontSize: '24px' }}>Hello PNLdev</h1>

ویژگی ها به صورت camelCase

نام ویژگی‌های HTML باید به صورت camelCase نوشته شوند.

return <input className="input-field" readOnly={true} type="text" />

نام ویژگی‌های CSS باید به صورت camelCase نوشته شوند.

return <h1 style={{ backgroundColor: 'green', fontSize: '24px' }}>Hello PNLdev</h1>

نام رویدادها مانند onClick، onChange و ... باید به صورت camelCase نوشته شوند.

return <button onClick={clickHandler}>کلیک کنید</button>

نحوه تبدیل JSX به کد جاوااسکریپت

مرورگرها به صورت بومی JSX را درک نمی‌کنند؛ بنابراین کدهای JSX توسط ابزاری مانند Babel به کدهای قابل اجرای جاوااسکریپت (که از React.createElement استفاده می‌کند) تبدیل می‌شوند.

به عنوان مثال، نمونه کد زیر:

const element = <h1 >با JSX</h1>;

توسط Babel به کدی شبیه به این تبدیل می‌شود:

const element = React.createElement( 'h1', {}, 'بدون JSX' );

این فرآیند امکان بهینه‌سازی، بررسی تغییرات (Reconciliation) و مدیریت DOM مجازی (Virtual DOM) را برای ری اکت فراهم می‌کند.

خلاصه درس

تمرین


مشاهده پاسخ
توسعه دهندگان
نیما عراقی