مقدمه

در React، خروجی هر کامپوننت در مرورگر نمایش داده می‌شود. این خروجی که شبیه HTML به نظر می‌رسد، در واقع JSX است — ترکیبی قدرتمند از HTML و JavaScript که امکان ایجاد رابط‌های پویا را فراهم می‌کند.

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

const title = 'React';
function App() {
  return (
    

      
Hello {title}
    
  );
}

با استفاده از آکولاد {} می‌توان متغیرهای جاوااسکریپت را درون JSX قرار داد. تغییر مقدار متغیر در کد منجر به تغییر در خروجی مرورگر می‌شود.

ورودی و برچسب در JSX

function App() {
  return (
    

      Search: 
      
    
  );
}

در JSX، برخی ویژگی‌های HTML تغییر نام داده‌اند. مثلاً for به htmlFor و class به className تبدیل شده‌اند تا با قوانین جاوااسکریپت سازگار باشند.

استفاده از آبجکت در JSX

const welcome = {
  greeting: 'Hey',
  title: 'React',
};
function App() {
  return (
    

      
{welcome.greeting} {welcome.title}
    
  );
}

می‌توان از هر ساختار دادهٔ جاوااسکریپتی مانند آبجکت‌ها و آرایه‌ها در JSX استفاده کرد، به شرطی که درون آکولاد قرار گیرند.

استفاده از تابع در JSX

function getTitle(title) {
  return title;
}
function App() {
  return (
    

      
Hello {getTitle('React')}
    
  );
}

توابع نیز می‌توانند در JSX فراخوانی شوند و خروجی آن‌ها در HTML نمایش داده شود.

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

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

const title = 'React';
const myElement = 
Hello {title}
;
// تبدیل می‌شود به:
const myElement = React.createElement('h1', null, `Hello ${title}`);

در نهایت، React این ساختار را به HTML واقعی برای مرورگر تبدیل می‌کند.

جمع‌بندی

JSX یکی از ویژگی‌های منحصربه‌فرد React است که امکان ترکیب منطق و نمایش را در یک واحد فراهم می‌کند. با استفاده از JSX می‌توان متغیرها، توابع، و ساختارهای داده را مستقیماً در HTML استفاده کرد و رابط‌های کاربری پویا و قابل‌نگهداری ساخت.