Question

React入门页面包含以下代码段

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

包含的代码

<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

不有效的浏览器javascript - 如果在javascript上下文中运行，则内联<h1>Hello, world!</h1>会崩溃，并且<script/>标记的type为text/babel {1}}。

从概念上讲，我认为React正在使用babel，一个编译器/转换器，text/babel内的代码将被视为babel，并由某些东西转换为有效的JavaScript。

我不太清楚这种转变是如何发生的，以及上述片段的哪些部分被babel转换，哪些部分被React转换。

我意识到理解这个级别的框架并不需要使用它。

我也意识到深入的回答可能超出了单个Stack Overflow答案的范围。虽然欢迎深入的答案，但我真正想要的是高级概述哪些库提供了上述代码段中的哪些魔力，我认为魔术是浏览器不提供的javascript功能。即，像

Babel扫描text/babel个节点，将上面的片段转换为x，y，z，将DOM节点转换为看似X的javascript
React采用上面的方式并以x，y，z方式进一步转换它，让浏览器保持它理解的旧javascript。

但填写了x，y，z。

Answer 1

JSX将转换转换为函数调用，调用React.createElement方法。

例如以下JSX：

<p>Hello World</p>

将被翻译成：

"use strict";

React.createElement(
  "p",
  null,
  "Hello World"
);

更具体地说，在转换步骤期间发生的事情是遍历和转换抽象语法三（AST）的节点。换句话说，Babel采用AST并遍历它，添加，更新和删除节点，以便最终生成React.createElement函数调用。 所以要明确的是，React根本不处理JSX的转换。。

总结Babel处理的转换过程：

解析;接受代码并输出AST。
变换;遍历AST并操纵节点。
生成;取最终的AST并将其转回一串代码。

这也解释了为什么总是在与JSX结合使用时必须具有React范围，因为否则函数调用将失败。

Babel通过plugin公开JSX转换功能。额外：您实际上可以通过pragma选项修改JSX将被转换为的函数调用。这允许您将JSX与不同于React的视图库结合使用，例如deku。您可以在.babelrc文件中指定：

{
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "dom" // default pragma is React.createElement
    }]
  ]
}

其他资源：

您可以看到转化结果here。
您可以直观地显示AST here。
您可以详细了解Babel如何处理转换here。

Answer 2

React的

JSX in depth可能有助于更好地理解这一点。但是，基本上

var app = <YoucComponent/>; //JSX
var app = React.createElement(YourComponent); //JS

如果您在开发React应用程序时不想使用某些转换器，那么您可以在不使用JSX的情况下执行JS语法。

Answer 3

我希望这足够了：

浏览器完全可以接受转换为ES5的任何内容。 Babel将您正确地说的非ESs转换为ES5。

看看编译结果。任何时髦的HTML标签＆lt;＆gt;已被转换为排序的函数调用：React.createElement（“label”，{className：“label”}），它与JS一样。

React是一个像任何其他库一样的库，它包含像createElement这样的函数 - 它像jquery一样执行DOM操作（尽管使用称为阴影dom的东西进行了更优化）

就是这样。

如何将React Snippet变成浏览器Javascript？

3 个答案: