Javascript 为什么reactjs中需要browser.min.js？_Javascript_Reactjs

Javascript 为什么reactjs中需要browser.min.js？

javascript reactjs

Javascript 为什么reactjs中需要browser.min.js？,javascript,reactjs,Javascript,Reactjs,我正在尝试构建一个简单的React应用程序，我想知道为什么我需要browser.min.js文件我已经包括了react和react-dom.js，但除非还包括browser.min.js，否则不会显示任何内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script

我正在尝试构建一个简单的React应用程序，我想知道为什么我需要browser.min.js文件

我已经包括了react和react-dom.js，但除非还包括browser.min.js，否则不会显示任何内容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/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>


你好，反应！
ReactDOM.render(
你好，世界！，
document.getElementById（'示例'）
);

您已经用Babel（ES7）编写了代码，而不是浏览器可以本地处理的JavaScript版本，并且您正在将ES7交付给浏览器，而不是在构建时传输它。

正如您在代码片段中看到的，脚本标记的类型是“text/Babel”，这是因为您正在使用JSX进行编码（上面有XML的Javascript）内部

编写sugar代码是为了更“直观”地在javascript代码中构建XML（本例中为HTML）组件（而不仅仅是React元素）.React将其用作用于创建/定义UI元素的合成方法上的抽象层。但JSX不是全球公认的标准，因此并非所有浏览器都支持它。这就是您需要第三方“编译器”的原因库将JSX转换为vanilla JS，这就是实现的地方

是一个javascript编译器，如果导入它的“browser.min.js”文件，您将使它能够“编译”“text/babel”脚本标记内的代码，并将其作为普通javascript执行

因此，在您的示例中，您有下一个代码：

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

如果不想加载此“browser.min.js”，您可以选择的主要选项有：

将React代码放在单独的文件中，并在进行更改时编译它们（所有这些都是服务器端的）。html代码应该引用编译后的文件（应该只有普通的JS代码），而不是原始的JSX文件。有几种方法可以做到这一点

仅使用vanilla JS创建和定义您的React“Html”层次结构（React.createElement（…））

在其他问题中应详细解释这些方法。

发现巴贝尔自己的“browser.js”不再工作了

回到2015年，这意味着继续在浏览器JSX中编译变得有点困难

谢天谢地，该项目只是一个替代品，而且似乎正在积极开发中

“babel standalone”似乎是。

我认为JSX不是ES7规范的一部分，尽管babel的“browser.min.js”将其编译为React createElem方法。我还有一个问题：如果人们使用

var React=require（'React'），我总是看到什么

在他们的文件中。我读到

webpack

是我们用来处理这些

require

命令的工具。这在这里是如何进行的？我是否仍然需要将我的react代码（JSX）放在一个单独的文件中（包括

require

行）>编译它以转换为常规的JS>使用网页包？是否有一个更简单/替代的过程不包括额外的步骤？您真的根本不需要使用

webpack

。只有当您想创建一个包含所有依赖项（以及您的实际代码）中的所有代码的.JS”文件时，才需要这样做不要使用多个

并确保它们的顺序正确。如果您在html中非常小心，并且包含了所有依赖项（例如，对React CDN的引用或本地副本），您可以/应该删除该行

var React=require（'React'））

。我想react的JSX现在与这个JSX有某种联系：？只是在名称上，它们都指嵌入javascript代码中的XML语法的使用，但处理它的方式完全不同。

ReactDOM.render(
  React.createElement('H1', null, 'Hello world!'), 
  document.getElementById('example'));