[英]Why is browser.min.js needed in 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 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>
正如您在代码段中看到的那样，脚本标记的类型为“text / babel”，这是因为您使用JSX（带有XML的Javascript）进行编码。
JSX编写的糖编码使得在javascript代码中构建XML（在这种情况下为HTML）组件更加“直观”（不仅仅是React元素）。 React利用它作为用于创建/定义UI元素的合成方法的抽象层。 但 JSX并非全球公认的标准，因此并非所有浏览器都支持它。 这就是你需要第三方“编译器”库将JSX转换为vanilla JS的原因，这就是BABEL的用武之地。
BABEL是一个javascript编译器，并导入其“browser.min.js”文件，您可以使其“编译”“text / babel”脚本标记内的代码并将其作为vanilla javascript执行。
因此，在您的示例中，您有下一个代码：
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
并且“browser.min.js”将在页面加载时处理它，并且将要执行的javascript代码应该是这样的：
ReactDOM.render(
React.createElement('H1', null, 'Hello world!'),
document.getElementById('example'));
如果您不想加载“browser.min.js”，那么您拥有的主要替代方案是：
将React代码放在单独的文件中，并在进行更改时编译它们（所有这些都是服务器端）。 您的html代码应该引用已编译的文件（它们应该只有vanilla JS代码）而不是原始的JSX代码。 根据您的编码工具，有几种方法可以执行此操作。
仅使用vanilla JS来创建和定义您的React“Html”层次结构（React.createElement（...））。
更详细地解释这些方法应该包含在其他问题中。
您已经在Babel（ES7）中编写了代码，而不是浏览器可以本机处理的JavaScript版本，并且您将ES7交付给浏览器而不是在构建时进行转换。
发现Babel自己的'browser.js'不再有效了？
'browser.js'在2015年被弃用 ，这意味着继续能够在浏览器中编译JSX变得有点困难。
值得庆幸的是， babel-standalone项目是一个简单的替代品，似乎正在积极开发中。
“babel-standalone”似乎得到了BabelJS项目本身的认可，并将其纳入本页 。
IE浏览器中react.js中browser.min.js的“访问被拒绝”
[英]“Access is denied” on IE browser for browser.min.js in react.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.