我想在浏览器中使用React,而不使用browserify / webpack创建捆绑包。
我正在尝试使用babel-standalone并从浏览器做出反应,我修改了一些代码但是我得到的ReactDOM没有定义加上其他两个警告(进程未定义)
我找到了反应和反应dom here的参考。包含cjs版本是否正确? cjs代表什么?
我正在使用的代码如下。我想使用ReactDOM.render
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/cjs/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/cjs/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<div id="output"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>,
document.querySelector('output')
);
</script>
</html>
我相信cjs指的是CommonJS。由于您使用的是简单的HTML模板,因此您可以包含纯JavaScript包。
我根据官方React文档中的minimal HTML template更改了包含的脚本标记。
我也将document.querySelector('output')
改为document.getElementById('output')
。
试试这个:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="output"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('output')
);
</script>
</body>
</html>