【译】JSX 如何生成 HTML 元素？
【译】JSX 如何生成 HTML 元素？
原文链接：https://scotch.io/starters/react/how-does-jsx-make-html-elements
JSX 使 我们更容易编写 React 组件。 有些人可能会发现 JSX 具有很陡峭的学习曲线，这是完全可以理解的。 它不完全是 HTML，也不完全是 JavaScript，所以学习它可能需要一些时间来适应。
我们可以在没有 JSX 的情况下创建 React 应用
我们可以在没有 JSX 的情况下创建 React 应用。 下面是一些JSX代码的演示，以及Babel（我们的转换器）将如何转换它以创建我们的 DOM 元素。
// JSX
const myElement = <h1>WHOA I am some JSX</h1>;
// Converted to plain JavaScript
var myElement = React.createElement("h1", null, "WHOA I am some JSX");使用代码来查看 Babel 如何将我们的代码 编译转换为所有浏览器都能理解的内容。
Babel 将我们的 JSX 代码转换为纯 JavaScript， 但我们可以跳过 JSX 并自己编写这个JavaScript。
Babel 处理将我们的 JSX 转换为 JavaScript 代码，以便 React 可以渲染我们的应用程序。 我们可以使用像 Babel 这样的转换工具，以便于我们编写干净且可读的代码。
让工具（Babel）将我们的代码转换为浏览器可以理解的东西。
这意味着我们不希望在代码中使用旧的 ES5 JavaScript语法的编写方式，我们可以用 ES6 编写，并让工具处理浏览器的向后兼容性。
我们不希望人工编写我们 React 应用程序的纯 JavaScript 版本。 JSX可以为我们做很多事情，以节省我们编写代码的时间，并使我们的代码更具可读性。
让我们看一下，如果我们自己编写纯 JavaScript 而不是 JSX，我们需要编写多少代码。
添加一个 Class
在上面的示例代码中，让我们给<h1>标签加上一个className `
// JSX
const myElement = <h1 className="whoa">WHOA I am some JSX</h1>;
// Converted to plain JavaScript by Babel
var myElement = React.createElement("h1", {
className: "whoa"
}, "WHOA I am some JSX");注意我们添加了一个 className 后，第二个参数是如何出现的。 JSX 允许我们干净地编写我们的 React 模板。
添加表达式
让我们尝试创建一个变量并在我们的 JSX 模板中显示该变量。
// JSX
const name = 'Chris';
const myElement = <h1>I am {name}</h1>;
// Converted to plain JavaScript by Babel
var name = 'Chris';
var myElement = React.createElement("h1", null, "I am ", name);嵌套元素和表达式
让我们用一个<span> 元素包裹{name}， 看看当我们嵌套元素时 JSX 可以为我们做多少：
// JSX
const name = 'Chris';
const myElement = <h1>I am <span>{name}</span></h1>;
// Converted to plain JavaScript by Babel
var name = 'Chris';
var myElement = React.createElement("h1", null, "I am ", React.createElement("span", null, name));总结
仅从这几个例子中，可以清楚地看到 JSX 在创建 React 组件方面为我们做了很多。
让我们利用 ES6 和 JSX 等现代编码技术吧，我们可以让 Babel 将事情简化为所有浏览器都能理解的JavaScript。
JSX 的可读性更强。 对于团队来说，它更具可读性。
看看没有 JSX 时，我们编写 React 需要什么，这是一个很好的示例。 我认为这是一个很好的方式来认识到 JSX 也值得学习。