Question

Noob与React在这里。我正在玩React。我有一个简单的组件在我的component.js中呈现。它包含在我的index.html文件中。我在 head 中添加了gen，React和ReactDOM的脚本。我只想看到一个div正确渲染。我还没有使用Node，只是使用React和Babel进行练习（使用babel-standalone）。我正在使用一个简单的http服务器运行该文件。我在使用React Chrome扩展程序时遇到错误：babel。

的index.html

Waiting for roots to load...to reload inspector click here

components.js

<!DOCTYPE html>
<html>
  <head>
    <!-- React -->
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <!-- React DOM -->
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <!-- babel core-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
  </head>
  <body>
    <div id="machine-box"></div>
    <script type="text/babel" src="components.js"></script>
  </body>
</html>`

Answer 1

您的代码很好，但您使用的是babel-standalone的旧版本。

// this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>

// should be this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>

和

<script type="text/babel" src="components.js"></script>

// should be
<script type="text/babel" src="components.js" data-presets="es2015,react"></script>

使用Babel Standalone进行单一React组件渲染，仅使用index.html和Component

1 个答案: