JSX

#HelloFrontend #HelloErmine #HelloWorld2021

JSX คืออะไร ?

เป็นส่วนเสริมของ JavaScript ทำให้เราสามารถสร้าง element ด้วยการเขียน HTML tags ได้ และยังสามารถใช้ความสามารถของ JavaScript ในการดำเนินตรรกะต่าง ๆ ได้

ตัวอย่างการใช้งาน

const element = <h1>Hello</h1>;

สามารถใช้งานร่วมกับ expression ได้

const name = "Peepee";
const element = <h1>Hello {name}</h1>;      // <h1>Hello Peepee</h1>
const elementNa = <h1>2 x 2 = {2 * 2}</h1>; // <h1>2 x 2 = 4</h1>

JSX ที่เราเขียนจะถูกแปลงให้เป็น React.createElement ก่อนจะถูกนำไปใช้

ตัวอย่างเช่น

const name = "Peepee";
const element = <h1>Hello {name}</h1>;

จะถูกแปลงเป็น

const name = "Peepee";
const element = React.createElement("h1", null, "Hello ", name);

JSX attributes

เราสามารถกำหนด JSX attribute ได้เหมือนกับการใช้ HTML attribute

การกำหนด HTML class ใน JSX ต้องใช้ attribute ชื่อclassName แทน class

const elementWithClass = <h1 className="class1 class2">Hello</h1>;

แหล่งอ้างอิง

Introducing JSX – React