แนะนำ JSX

พิจารณาการประกาศตัวแปรนี้:

const element = <h1>Hello, World!</h1>;

แท็กไวยากรณ์ตลก ๆ นี้ไม่ใช่ทั้งสตริงหรือ HTML

มันเรียกว่า JSX และมันเป็นส่วนขยายไวยากรณ์ของ JavaScript เราแนะนำให้ใช้กับ React เพื่ออธิบายว่า UI ควรมีลักษณะอย่างไร JSX อาจะทำให้คุณนึกถึงภาษาเทมเพลท แต่มันมาพร้อมพลังความสามารถเต็มรูปแบบของ JavaScript

JSX สร้าง “องค์ประกอบ (Element)” ของ React เราจะมาสำรวจการทำให้มันแสดงผลที่ DOM ใน หัวข้อถัดไป ด้านล่าง, คุณจะเจอพื้นฐานของ JSX ที่จำเป็นสำหรับการเริ่มต้นใช้งาน

ทำไมต้องเป็น JSX?

React อ้าแขนรับความจริงที่ว่า ตรรกะสำหรับการแสดงผลนั้นเชื่อมโยงกับตรรกะ UI อื่น ๆ โดยเนื้อแท้ เช่น วิธิจัดการเหตุการณ์, วิธีการที่สเตทเปลี่ยนแปลงตลอดเวลา, และวิธีการเตรียมข้อมูลสำหรับการแสดงผล

แทนการแยกเทคโนโลยี อย่างปลอม ๆ โดยใส่มาร์กอัปและลอจิคในไฟล์แยกต่างหาก, React แบ่งโค้ดออกเป็นส่วน ๆ ด้วยคู่ยูนิตแบบหลวม ๆ เรียกว่า “คอมโพเนนท์” ที่ประกอบไปด้วยทั้งสองอย่าง เราจะกลับมาพูดเรื่องคอมโพเนนท์ใน หัวข้อต่อไปข้างหน้า, แต่ถ้าคุณยังรู้สึกไม่สะดวกใจที่จะใส่มาร์กอัปใน JS, การบรรยายนี้ อาจโน้มน้าวใจคุณก็เป็นได้

React ไม่บังคับ ว่างต้องใช้ JSX, แต่คนส่วนใหญ่พบว่ามันมีประโยชน์ในฐานะเป็นเครื่องช่วยเพื่อให้เห็นภาพเมื่อทำงานกับ UI ภายในโค้ด JavaScript นอกจากนี้ยังช่วยให้ React แสดงข้อผิดพลาดและข้อความเตือนที่มีประโยชน์มากขึ้นด้วย

พอหอมปากหอมคอละ, มาเริ่มกันเลยดีกว่า!

การฝังนิพจน์ใน JSX

ในตัวอย่างด้านล่าง, เราประกาศตัวแปรชื่อ name และจากนั้นเราใช้มันใน JSX โดยห่อไว้ในเครื่องหมายปีกกา:

const name = 'Josh Perez';const element = <h1>สวัสดี, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

คุณสามารถใส่ นิพจน์ JavaScript ที่ถูกต้อง ใด ๆ ด้านในวงเล็บปีกกาใน JSX ได้ ตัวอย่างเช่น 2 + 2, user.firstName, หรือ formatName(user) เป็นนิพจน์ JavaScript ที่ถูกต้องทั้งหมด

ในตัวอย่างด้านล่าง, เราฝังผลลัพธ์ของการเรียกใช้ฟังก์ชัน JavaScript formatName(user) ไว้ใน <h1> ที่ตัวแปร element

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    สวัสดี, {formatName(user)}!  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

ทดลองบน Codepen

เราแยก JSX เป็นหลายบรรทัดเพื่อให้อ่านง่าย ซึ่งจริง ๆ แล้วก็ไม่จำเป็น เมื่อทำเช่นนี้ นอกจากนี้เรายังแนะนำให้ห่อไว้ในวงเล็บเพื่อหลีกเลี่ยงข้อผิดพลาดของ การแทรกเครื่องหมายเซมิโคลอน (;) โดยอัตโนมัติ.

JSX เป็นนิพจน์เช่นกัน

หลังจากการคอมไพล์, นิพจน์ JSX จะกลายเป็นการเรียกใช้ฟังก์ชัน JavaScript ปกติและประเมินผลเป็น JavaScript อ็อปเจค

ซึ่งหมายความว่าคุณสามารถใช้ JSX ได้ในเงื่อนไข if และการวนซ้ำตามลำดับแบบ for, กำหนดค่าให้กับตัวแปร, แบบรับเป็นอาร์กิวเมนท์, และส่งคืนค่าจากฟังก์ชัน:

function getGreeting(user) {
  if (user) {
    return <h1>สวัสดี, {formatName(user)}!</h1>;  }
  return <h1>สวัสดี, คนแปลกหน้า</h1>;}

การระบุแอตทริบิวต์ใน JSX

คุณสามารถใช้เครื่องหมายคำพูด เมื่อเป็นตัวอักษรสตริง ในแอตทริบิวต์:

const element = <div tabIndex="0"></div>;

คุณอาจใช้วงเล็บปีกกา เมื่อฝังนิพจน์ JavaScript ในแอตทริบิวต์:

const element = <img src={user.avatarUrl}></img>;

อย่าใส่เครื่องหมายคำพูดรอบวงเล็บปีกกาเมื่อทำการฝังนิพจน์ JavaScript ในแอตทริบิวต์ คุณควรใช้อัญประกาศ (สำหรับค่าสตริง) หรือ วงเล็บปีกกา (สำหรับนิพจน์) แต่ไม่ใช่ทั้งสองอย่างในแอตทริบิวต์เดียวกัน

คำเตือน:

เนื่องจาก JSX นั้นใกล้เคียงกับ JavaScript มากกว่า HTML, React DOM ใช้รูปแบบ camelCase ในการตั้งชื่อแอตทริบิวต์แทนการใช้ชื่อแอตทริบิวต์ของ HTML ตรง ๆ

ตัวอย่างเช่น class กลายเป็น className ใน JSX และ tabindex กลายเป็น tabIndex เป็นต้น

การระบุลูกใน JSX

ถ้าแท็กนั้นว่างเปล่า, คุณสามารถปิดได้ทันทีด้วย /> เหมือน XML:

const element = <img src={user.avatarUrl} />;

JSX แท็กอาจมีลูก ๆ ด้วย:

const element = (
  <div>
    <h1>สวัสดี!</h1>
    <h2>ดีจังที่ได้เจอคุณที่นี่</h2>
  </div>
);

JSX ป้องกันการโจมตีจากการยิง

การฝังอินพุตของผู้ใช้ใน JSX นั้นเป็นเรื่องที่ปลอดภัย:

const title = response.potentiallyMaliciousInput;
// แบบนี้ปลอดภัย:
const element = <h1>{title}</h1>;

โดยค่าเริ่มต้น, React DOM สกัด ค่าใด ๆ ที่ฝังอยู่ใน JSX ก่อนเรนเดอร์ ดังนั้นจึงมั่นใจได้ว่าคุณจะไม่สามารถยิงสิ่งใดก็ตามที่ไม่ได้เขียนไว้ในแอปพลิเคชันของคุณอย่างชัดเจน ทุกอย่างถูกแปลงเป็นสตริงก่อนที่จะแสดงผล ซึ่งช่วยป้องกัน XSS (การโจมตีด้วยสคริปต์ข้ามไซต์)

JSX เป็นตัวแทนของอ็อปเจค

Babel คอมไพล์ JSX ลงไปที่การเรียก React.createElement()

ตัวอย่างสองตัวอย่างนี้เหมือนกัน:

const element = (
  <h1 className="greeting">
    Hello, World!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, World!'
);

React.createElement() ทำการตรวจสอบสองสามครั้งเพื่อช่วยคุณเขียนโค้ดที่ไม่มีข้อบกพร่อง แต่โดยพื้นฐานแล้วมันจะสร้างอ็อปเจคเช่นนี้:

// หมายเหตุ: โครงสร้างนี้ทำให้เข้าใจง่ายขึ้น
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, World!'
  }
};

อ็อปเจคเหล่านี้เรียกว่า “องค์ประกอบ” ของ React คุณสามารถคิดว่าพวกมันเป็นคำอธิบายของสิ่งที่คุณต้องการจะเห็นบนหน้าจอ React อ่านอ็อปเจคเหล่านี้และใช้พวกมันเพื่อสร้าง DOM และปรับปรุงให้ทันสมัยอยู่เสมอ

เราจะทำความเข้าใจการแสดงผลขององค์ประกอบ React บน DOM ในหัวข้อถัดไป

เกร็ดความรู้:

เราแนะนำให้ใช้ นิยามภาษาของ “Babel” สำหรับเครื่องมือแก้ไขข้อความที่คุณเลือกเพื่อให้ทั้ง ES6 และรหัส JSX ถูกเน้นอย่างถูกต้อง

Is this page useful?Edit this page