Hello, {name}

> For the complete documentation index, see [llms.txt](https://zg-zhang.gitbook.io/note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zg-zhang.gitbook.io/note/react/offical-website/main-concepts/jsx.md).

# JSX 简介

* JSX 是 JavaScript 的语法扩展，可以很好的描述 UI 应该呈现出它应有交互的本质形式。会让人联想到模板语言，但 JSX 拥有 JavaScript 的全部功能

  \`\`\`jsx harmony

const element = Hello, World!;

````
## 为什么要使用 JSX ？

* React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生改变时需要通知到 UI，以及在 UI 中展示准备好的数据

## 在 JSX 中嵌入表达式 ？

* 在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式
```jsx harmony

const name = 'josh Perez'
const element = <h1>Hello, {name}</h1>

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

## JSX 也是一个表达式

* 在编译之后，JSX 表达式会被转换为普通的 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象
* 也就是说，你可以在 if 语句和 for 循环的代码块里面使用 JSX&#x20;

  \`\`\`jsx harmony

function getGreeting(user) { if (user) { return Hello, {formatName(user)}!; } return Hello, Stranger. }

````
## JSX 特定属性

* 你可以通过使用引号，来将属性值指定为字符串字面量
* 也可以使用大括号，来在属性值中插入一个 JavaScript 表达式
* 对同一属性不能同时使用这两种符号
* 因为 JSX　语法上更接近　JavaScript　而不是　HTML，所以　React DOM 使用 **小驼峰命名** 来定义属性的名称
```jsx harmony

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

const element = <img src={user.avatarUrl} alt=""/>
````

## 使用 JSX 指定子元素

* 假如一个标签里面没有内容，你可以使用 /> 来闭合标签，就像 XML 语法一样

## JSX 防止注入攻击

* 可以安全地在 JSX 当中插入用户输入内容
* React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串，可以有效地防止 XSS 攻击

  \`\`\`jsx harmony

const title = response.potentiallyMaliciousInput; //直接使用是安全的： const element = {title}

````
## JSX 表示对象

* Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用
* React.createElement() 会预先执行一些检查，以帮助你编写无错代码
* 创建出的对象被称为 “React元素”。它们描述了你希望在屏幕上看到的内容，React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新
```jsx harmony

const element = (
    <h1 className="greeting">
        Hello, world!
    </h1>
);

const element = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
);

// 注意，这是简化过的结构
const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world!'
    }
}
````


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zg-zhang.gitbook.io/note/react/offical-website/main-concepts/jsx.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.