🍋
Menu
.jsx Code

JSX (JavaScript XML — React)

JSX เป็นส่วนขยายไวยากรณ์ของ JavaScript ที่ให้คุณเขียนมาร์กอัปคล้าย HTML ในโค้ด JavaScript เป็นไวยากรณ์มาตรฐานสำหรับคอมโพเนนต์ React

ประเภท MIME

text/jsx

ประเภท

ข้อความ

การบีบอัด

ไม่สูญเสียคุณภาพ

ข้อดี

  • + Intuitive HTML-like syntax for UI component definitions
  • + Full JavaScript power within markup expressions
  • + Component composition is clear and readable

ข้อเสีย

  • Requires transpilation — cannot run directly in browsers
  • Mixes concerns (markup + logic) which some developers dislike
  • Must use className instead of class (React-specific)

เมื่อใดควรใช้ .JSX

ใช้ JSX สำหรับไฟล์คอมโพเนนต์ React; ใช้ .tsx สำหรับ React กับ TypeScript

รายละเอียดทางเทคนิค

JSX ไม่ใช่ JavaScript ที่ถูกต้อง — ต้องถูกแปลง (โดย Babel หรือ SWC) เป็นการเรียก React.createElement() หรือรันไทม์ JSX อัตโนมัติ

ประวัติ

Facebook เปิดตัว JSX ในปี 2013 พร้อมกับ React ในตอนแรกเป็นที่ถกเถียงจากการผสม HTML กับ JavaScript แต่ JSX กลายเป็นที่นิยมอย่างรวดเร็วในการพัฒนา UI

แปลงจาก .JSX

แปลงเป็น .JSX

รูปแบบที่เกี่ยวข้อง