【JSX】基本使用（4）

一、JSX 简介

0. JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML (HTML) 格式的代码
1. JSX 既不是字符串也不是 HTML，是 JavaScript 的语法扩展，但它具有 JavaScript 的全部功能。
2. 优势：声明式语法更加直观、与 HTML 结构相同，UI 结构清晰、降低学习成本，提升开发效率

二、为什么要使用 JSX

0. JSX 语法更加体现 react 的声明式特点（描述 UI 长什么样）
1. 写 JSX 就跟写 HTML 一样，更加直观、友好
2. 两种写法一样的效果：

0. JSX (直观、友好)

// 创建 react 元素挂载的根节点
const root = ReactDOM.createRoot(document.getElementById('root'));
// 使用 JSX 创建 react 元素
const jsx = <h1 className="greeting">hello Word</h1>
// 将 react 元素渲染到根节点上
root.render(jsx);

2. React.createElemen (结构不清晰)

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'hello Word'
);

三、为什么脚手架中能使用 JSX 语法

0. 使用 Babel 编译处理后，才能在浏览器环境中使用
1. create-react-app 脚手架中默认有该配置，无需手动配置
2. Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
3. 编译 JSX 语法的包： @babel/preset-react

四、注意点

0. JSX 语法上更接近 JavaScript 而不是 HTML
1. react 元素的属性名使用 驼峰命名法 ，而不使用 HTML 属性名称的命名约定。
2. 例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。
3. 推荐：使用 小括号包裹 JSX，从而避免 JS 中的自动插入分号
4. 一个标签里面没有内容，你可以使用 /> 来闭合标签

五、总结

0. JSX 是 React 的核心内容
1. JSX 表示在 JS 代码中写 HTML 结构，是 react 声明式的体现
2. 配合嵌入的 JS 表达式、条件渲染、列表渲染，可以描述任意 UI 结构
3. react 完全利用 JS 语言自身的能力编写 UI，而不是造轮子增强 HTML 功能