use*_*619 11 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 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>
Gon*_*ivi 30
正如您在代码段中看到的那样,脚本标记的类型为"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(...)).
更详细地解释这些方法应该包含在其他问题中.
| 归档时间： |
|
| 查看次数： |
8002 次 |
| 最近记录： |