مروری بر JSX در React

JSX (JavaScript XML) یک سینتکس توسعه‌یافته برای JavaScript است که در React برای تعریف رابط کاربری استفاده می‌شود. این سینتکس به شما امکان می‌دهد کدهای HTML را مستقیماً در فایل‌های JavaScript بنویسید.

🔹 چرا JSX؟

JSX کدهای React را خواناتر و ساده‌تر می‌کند. به جای استفاده از React.createElement و ساختارهای پیچیده DOM، می‌توان به راحتی از تگ‌های HTML درون کد JavaScript استفاده کرد.

✨ مثال ساده از JSX

undefined

const element = <h1>سلام، به دنیای React خوش آمدید!</h1>;

این کد در واقع به JavaScript کامپایل شده و به صورت زیر تبدیل می‌شود:

undefined

const element = React.createElement("h1", null, "سلام، به دنیای React خوش آمدید!");​​

📌 ویژگی‌های JSX

✅ 1. ترکیب JavaScript و HTML
می‌توانید داخل JSX از کدهای JavaScript استفاده کنید. کافی است کدهای جاوااسکریپتی را داخل {} قرار دهید:

undefined

const name = "محمد"; const element = <h1>سلام، {name}!</h1>;

 

✅ 2. استفاده از Attributeها
در JSX، می‌توان ویژگی‌های (attributes) عناصر را مانند HTML تنظیم کرد. البته برخی از ویژگی‌ها در JSX متفاوت نام‌گذاری شده‌اند:

undefined

const element = <img src="image.jpg" alt="React Logo" />;

 

اما در JSX باید از camelCase برای ویژگی‌های چندکلمه‌ای استفاده کرد:

undefined

const button = <button onClick={handleClick}>کلیک کن</button>;

 

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

undefined

const element = <h1 className="title">سلام React!</h1>;

✅ 4. تگ‌های بسته‌شده
در JSX، تمام تگ‌ها باید بسته شوند. اگر تگی بدون محتوای داخلی باشد، باید آن را به این صورت ببندید:

undefined

const element = <img src="logo.png" alt="React Logo" />;

یا

undefined

const element = <br />;

✅ 5. استفاده از Fragment
برای جلوگیری از اضافه شدن div اضافی در DOM، می‌توان از Fragment استفاده کرد:

undefined

<> <h1>سلام</h1> <p>به React خوش آمدید.</p> </>

 

🎯 جمع‌بندی

JSX یکی از ویژگی‌های کلیدی React است که خوانایی کد را بالا می‌برد و امکان ترکیب JavaScript و HTML را فراهم می‌کند. مهم‌ترین ویژگی‌های آن شامل:
✔ امکان استفاده از JavaScript داخل JSX
✔ استفاده از camelCase برای ویژگی‌ها
✔ تگ‌های بسته‌شده
✔ استفاده از Fragment برای جلوگیری از div اضافی