مروری بر JSX در React
JSX (JavaScript XML) یک سینتکس توسعهیافته برای JavaScript است که در React برای تعریف رابط کاربری استفاده میشود. این سینتکس به شما امکان میدهد کدهای HTML را مستقیماً در فایلهای JavaScript بنویسید.
🔹 چرا JSX؟
JSX کدهای React را خواناتر و سادهتر میکند. به جای استفاده از React.createElement
و ساختارهای پیچیده DOM، میتوان به راحتی از تگهای HTML درون کد JavaScript استفاده کرد.
✨ مثال ساده از JSX
این کد در واقع به JavaScript کامپایل شده و به صورت زیر تبدیل میشود:
📌 ویژگیهای JSX
✅ 1. ترکیب JavaScript و HTML
میتوانید داخل JSX از کدهای JavaScript استفاده کنید. کافی است کدهای جاوااسکریپتی را داخل {}
قرار دهید:
✅ 2. استفاده از Attributeها
در JSX، میتوان ویژگیهای (attributes) عناصر را مانند HTML تنظیم کرد. البته برخی از ویژگیها در JSX متفاوت نامگذاری شدهاند:
اما در JSX باید از camelCase برای ویژگیهای چندکلمهای استفاده کرد:
✅ 3. استفاده از کلاسها
به جای class (که در جاوااسکریپت یک کلمه کلیدی است)، باید از className استفاده کرد:
✅ 4. تگهای بستهشده
در JSX، تمام تگها باید بسته شوند. اگر تگی بدون محتوای داخلی باشد، باید آن را به این صورت ببندید:
یا
✅ 5. استفاده از Fragment
برای جلوگیری از اضافه شدن div اضافی در DOM، میتوان از Fragment استفاده کرد:
🎯 جمعبندی
JSX یکی از ویژگیهای کلیدی React است که خوانایی کد را بالا میبرد و امکان ترکیب JavaScript و HTML را فراهم میکند. مهمترین ویژگیهای آن شامل:
✔ امکان استفاده از JavaScript داخل JSX
✔ استفاده از camelCase برای ویژگیها
✔ تگهای بستهشده
✔ استفاده از Fragment برای جلوگیری از div اضافی
