กำลังโหลด...
ABYS Academy1⚡ 0 XP
เข้าสู่ระบบABYS Academyกำลังโหลด...
ยินดีต้อนรับเข้า Chapter ใหม่! ก่อนจะให้เริ่มเขียน element จริง พี่อยากให้ น้องเข้าใจก่อนว่า JSX คืออะไร ต่างจาก HTML ที่อาจเคยเห็นมาตรงไหนบ้าง จะได้ไม่งงตอนลงมือทำ
เป้าหมายของ Mission นี้: เข้าใจว่า JSX คืออะไร ต่างจาก HTML ธรรมดาตรงไหนบ้าง ก่อนเริ่มเขียน element แรกใน Mission ถัดไป
JSX คือไวยากรณ์ที่ React ใช้เขียนโครงหน้าเว็บปนอยู่ในโค้ด JavaScript หน้าตาคล้าย HTML มาก แต่จริงๆ แล้วไม่ใช่ HTML — เวลาโค้ดรันจริง JSX จะถูกแปลงเป็นฟังก์ชัน JavaScript ธรรมดาเบื้องหลัง
| เรื่อง | HTML ปกติ | JSX |
|---|---|---|
| กำหนด class | class="..." |
className="..." |
| ตั้งชื่อ attribute | onclick, background-color |
camelCase: onClick, backgroundColor |
| ปิด tag | <img> ปิดไม่บังคับ |
<img /> ต้องปิดเสมอ ทุก tag |
ทำไมต้องต่างจาก HTML: class เป็นคำสงวนในภาษา JavaScript (ใช้กับการสร้าง
class ของ object) จึงใช้ className แทนเพื่อไม่ให้ชนกัน ส่วน camelCase กับการ
ปิด tag ให้ครบทุกตัว มาจากกฎที่เข้มงวดกว่าของ JavaScript ที่ตัวแปลภาษาต้องรู้
ชัดเจนว่าแต่ละ tag เปิด-ปิดตรงไหนกันแน่ ไม่ปล่อยให้เดาแบบ HTML ทั่วไป
Mission ต่อจากนี้ในเวิร์กสเปซจะให้พิมพ์เป็น HTML ธรรมดา (ไม่ใช้ className)
เพื่อโฟกัสที่โครงสร้าง element แต่ละตัวก่อน ไม่ต้องพะวงกับกฎ JSX ไปพร้อมกัน —
กฎ JSX เต็มรูปแบบจะได้ลองมือจริงตอนเขียน React ใน Chapter 6
| คำศัพท์ | ความหมาย |
|---|---|
| JSX | ไวยากรณ์ผสม JavaScript + โครงหน้าเว็บ ที่ React ใช้ |
| className | attribute สำหรับกำหนด CSS class ใน JSX (แทน class) |
| Self-closing tag | tag ที่ปิดตัวเองด้วย /> เช่น <img /> |