JSX ری‌ اکت

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

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

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

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

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

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

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

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

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

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

برای نوشتن 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) می‌دهد.

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

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

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

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

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

نام ویژگی‌های 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>