7、深入理解 JSX

深入理解 JSX

1. 理解 JSX

在浏览器执行 JSX 代码之前，需要将其转换为普通的 JavaScript 代码。你可以选择以下方式来学习和实践 JSX：
- 在本地使用 Babel 设置 JSX 转译器。
- 使用在线 Babel REPL 服务（https://babeljs.io/repl），它可以在浏览器中把 JSX 转换为 JavaScript。

建议先了解 JSX 的主要概念，再在本地进行 Babel 的设置。

2. 使用 JSX 创建元素

使用 JSX 创建 ReactElement 对象非常直观。例如，原本使用 JavaScript 创建元素的代码如下：

React.createElement(
  name,
  {key1: value1, key2: value2, ...},
  child1, child2, child3, ..., childN
)

使用 JSX 可以写成：

<name key1=value1 key2=value2 ...>
  <child1/>
  <child2/>
  <child3/>
  ...
  <childN/>
</name>

也可以在 Chrome DevTools 控制台中输入 React.DOM 并回车。需要注意的是，