عبور از jsx در react

JSX در React: چیست و چه کاربردی دارد؟

React یکی از محبوب‌ترین کتابخانه‌های JavaScript برای ساخت رابط کاربری است. یکی از ویژگی‌هایی که React را از سایر کتابخانه‌ها متمایز می‌کند، استفاده از زبان نشانه‌گذاری خاصی به نام JSX (JavaScript XML) است. JSX ترکیبی از JavaScript و HTML است که به توسعه‌دهندگان اجازه می‌دهد تا ساختار رابط کاربری را در کنار منطق برنامه‌نویسی بنویسند. در این مقاله، به صورت جامع JSX را بررسی می‌کنیم، با کاربردهای آن آشنا می‌شویم و کدهای نمونه ارائه می‌دهیم.

JSX چیست؟

JSX یک افزونه‌ی سینتکسی برای JavaScript است که توسط React معرفی شد. این زبان ترکیبی به شما اجازه می‌دهد تا کد HTMLمانند را در داخل فایل JavaScript بنویسید.

مثال ساده:

const element = <h1>Hello, world!</h1>;

کد بالا در ظاهر شبیه HTML است، اما در واقع توسط React به دستور React.createElement تبدیل می‌شود.

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

خوانایی بیشتر: کدی که با JSX نوشته شده است، بسیار خواناتر از کدی است که فقط با React.createElement نوشته می‌شود.

نزدیکی به HTML: توسعه‌دهندگان وب که به HTML آشنایی دارند، به راحتی می‌توانند JSX را درک کنند.

امکان استفاده از JavaScript در HTML: شما می‌توانید با استفاده از curly braces ({}) هر عبارت جاوااسکریپتی را داخل JSX بنویسید.

JSX چگونه کار می‌کند؟

در واقع JSX بعد از کامپایل تبدیل به کدهای JavaScript می‌شود. برای مثال:

const element = <h1 className="greeting">Hello, world!</h1>;

تبدیل می‌شود به:

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

استفاده از متغیرها در JSX

می‌توان به راحتی از متغیرهای JavaScript داخل JSX استفاده کرد:

const name = 'Pouya';
const element = <h1>Hello, {name}</h1>;

شرط‌ها در JSX

برای استفاده از شرط‌ها، معمولاً از ternary operator یا عملگر منطقی && استفاده می‌شود:

const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in</p>}
  </div>
);

لیست‌ها در JSX

برای نمایش لیستی از آیتم‌ها، می‌توان از map استفاده کرد:

const items = ['Apple', 'Banana', 'Orange'];
const listItems = items.map((item, index) => <li key={index}>{item}</li>);

return <ul>{listItems}</ul>;

استایل‌دهی در JSX

می‌توان به دو روش به عناصر JSX استایل داد:

1. CSS کلاس‌ها:

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

2. استایل درون‌خطی:

<h1 style={{ color: 'red', fontSize: '20px' }}>Hello</h1>

توابع و کامپوننت‌ها در JSX

کامپوننت تابعی ساده:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

استفاده از کامپوننت:

<Welcome name="Pouya" />

Fragmentها در JSX

برای گروه‌بندی چند عنصر بدون اضافه کردن یک عنصر DOM اضافی:

<>
  <h1>Title</h1>
  <p>Content</p>
</>

استفاده از JSX در توابع پیچیده‌تر

function ProductList({ products }) {
  if (!products.length) return <p>No products found.</p>;

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

JSX و امنیت

هرگز HTML خام را مستقیماً در JSX رندر نکنید مگر با dangerouslySetInnerHTML و با احتیاط بالا:

<div dangerouslySetInnerHTML={{ __html: someHtml }} />

استفاده از این ویژگی ممکن است سایت شما را در معرض حملات XSS قرار دهد.