เครื่องมือแปลง HTML เป็น JSX

เครื่องมือนี้คืออะไร?

เครื่องมือออนไลน์ฟรีนี้แปลง HTML มาตรฐานให้เป็นไวยากรณ์ JSX ที่ถูกต้องสำหรับใช้กับ React เป็นวิธีที่เร็วที่สุดในการปรับโครงสร้างโค้ด HTML ที่มีอยู่ให้เป็นคอมโพเนนต์ที่พร้อมสำหรับแอปพลิเคชันส่วนหน้าสมัยใหม่

วิธีการใช้งาน

1. วางหรือพิมพ์ HTML ของคุณลงในตัวแก้ไข
2. คลิก Convert เพื่อสร้างโค้ด JSX
3. ดาวน์โหลด คัดลอก หรือแชร์ JSX ที่แปลงแล้วของคุณได้ทันที

ลงชื่อเข้าใช้ด้วย Google หรือ GitHub เพื่อบันทึกการแปลงของคุณและเข้าถึงได้ทุกเวลา

JSX คืออะไร?

JSX (JavaScript XML) เป็นส่วนขยายไวยากรณ์สำหรับ JavaScript ที่ใช้ใน React เพื่อกำหนดคอมโพเนนต์ UI แบบประกาศ JSX ช่วยให้คุณเขียนแท็กที่คล้าย HTML ได้โดยตรงในโค้ด JavaScript ของคุณ

แตกต่างจาก HTML แบบดั้งเดิม JSX ใช้กฎพิเศษ (เช่น className แทน class) และรองรับการฝังนิพจน์ JavaScript ภายในวงเล็บปีกกา

ตัวอย่าง JSX พื้นฐาน:

const element = (
  <h1 className="greeting">
    สวัสดี, โลก!
  </h1>
);
    

เรียนรู้เพิ่มเติมได้ที่ เอกสาร React อย่างเป็นทางการ.

ตัวอย่าง HTML vs JSX

HTML

<div>
  <div class="awesome" style="border: 1px solid red">
    <label for="name">กรอกชื่อของคุณ: </label>
    <input type="text" id="name" />
  </div>
  <p>กรอก HTML ของคุณที่นี่</p>
</div>
    

JSX ที่แปลงแล้ว

<div>
  <div className="awesome" style={{ border: '1px solid red' }}>
    <label htmlFor="name">กรอกชื่อของคุณ: </label>
    <input type="text" id="name" />
  </div>
  <p>กรอก HTML ของคุณที่นี่</p>
</div>