React: ความแตกต่างระหว่าง JSX และ HTML

JSX ดูเหมือน HTML แต่ไม่ใช่

ในส่วนนี้ อยากจะแนะนำให้คุณรู้จักกับสิ่งที่สำคัญที่สุดที่คุณต้องจำไว้เมื่อใช้ JSX

ความแตกต่างประการหนึ่งอาจค่อนข้างชัดเจนหากคุณดูที่ component ของแอป JSX: มีแอตทริบิวต์แปลกๆ ที่เรียกว่า className

ใน HTML เราใช้เป็นแอตทริบิวต์ class เป็นคุณลักษณะที่ใช้กันอย่างแพร่หลายมากที่สุด ด้วยเหตุผลหลายประการ แต่หนึ่งในเหตุผลเหล่านั้นคือการทำ CSS แอตทริบิวต์ class ช่วยให้เราสามารถจัดรูปแบบและแต่งองค์ประกอบของ HTML ให้มีความสวยงามได้อย่างง่ายดาย และการใช้เฟรมเวิร์ก CSS เช่น Tailwind แอตทริบิวต์นี้จึงแทบจะเป็นศูนย์กลางของกระบวนการออกแบบอินเทอร์เฟซผู้ใช้เลย

แต่มีปัญหาเกิดขึ้นในขณะที่เรากำลังเขียนโค้ด UI นี้ในไฟล์ JavaScript และ class ในภาษาการเขียนโปรแกรม JavaScript เป็นคำสงวน (keyword) ซะงั้นไป ซึ่งหมายความว่าเราไม่สามารถใช้คำสงวนนี้ตามที่เราต้องการได้ เพราะมันคือการใช้กำหนดคลาสใน JavaScript และผู้สร้าง React เลยต้องเลือกชื่ออื่นแทน

นั่นคือเลยเป็นเหตุผลที่ต้องลงเอยด้วย className แทนที่จะเป็น class ธรรมดา

คุณต้องจำเป็นต้องจำสิ่งนี้ไว้ โดยเฉพาะเมื่อคุณต้องการคัดลอก/วาง HTML เดิมที่มีอยู่แล้ว

React จะพยายามอย่างดีที่สุดเพื่อให้แน่ใจว่าสิ่งต่าง ๆ จะไม่เสียหาย แต่ว่านะอาจจะทำให้เกิดคำเตือนมากมายมหาศาล ในเครื่องมือสำหรับนักพัฒนาได้

เพราะเรื่องแบบนี้เกิดขึ้นบ่อยที่สุด

ความแตกต่างที่สำคัญอีกประการระหว่าง JSX และ HTML ก็คือ HTML นั้นค่อยข้างจะผ่อนคลายมาก ซึ่งเราอาจจะสามารถพูดได้ แม้ว่าคุณจะมีข้อผิดพลาดในรูปแบบไวยากรณ์ หรือเจ้าปิดแท็กผิดไป หรือคุณปิดแท็กไม่ตรงกัน เบราว์เซอร์ก็จะพยายามอย่างเต็มที่ในการตีความหมายของ HTML โดยไม่ทำให้เกิดความเสียหายอะไร

ถือได้ว่าเป็นการช่วยสำหรับผู้เริ่มต้นเป็นอย่างมากเลย

แต่ว่า JSX ไม่ใช่ผู้ใจขนาดนั้น หากว่าคุณลืมปิดแท็กแล้วหล่ะก็ คุณจะมีข้อความแสดงข้อผิดพลาดที่ชัดเจน

โดยปกติแล้ว React จะให้ข้อความแสดงข้อผิดพลาดที่ดี และให้ข้อมูลซึ่งจะนำคุณไปในทิศทางที่ถูกต้องในการแก้ไขปัญหา

ข้อแตกต่างที่สำคัญอีกประการระหว่าง JSX และ HTML ก็คือใน JSX เราสามารถฝัง JavaScript ได้นั้นเอง

เรามาพูดถึงเรื่องนี้ในส่วนถัดไปแล้วกัน