---
description: '#HelloFrontend #HelloErmine #HelloWorld2021'
---

# JSX

## JSX คืออะไร ?

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

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

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

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

```jsx
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>
```

{% hint style="info" %}
JSX ที่เราเขียนจะถูกแปลงให้เป็น `React.createElement` ก่อนจะถูกนำไปใช้
{% endhint %}

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

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

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

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

JSX attributes


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

{% hint style="warning" %}
การกำหนด HTML class ใน JSX ต้องใช้ attribute ชื่อ`className` แทน `class`
{% endhint %}

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

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

{% embed url="https://reactjs.org/docs/introducing-jsx.html" %}

