从浏览器中反应16和Babel 6

问题描述 投票:-1回答:1

我想在浏览器中使用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>
javascript reactjs browser
1个回答
1
投票

我相信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>
© www.soinside.com 2019 - 2024. All rights reserved.