使用 Babel Standalone 渲染单个 React 组件，只有 index.html 和 Component答案

【问题标题】：Single React Component rendering with Babel Standalone with only index.html and Component使用 Babel Standalone 渲染单个 React 组件，只有 index.html 和 Component
【发布时间】：2016-10-25 01:45:33
【问题描述】：

这里有 React 的菜鸟。我正在玩 React。我有一个简单的组件可以在我的 component.js 中呈现。它包含在我的 index.html 文件中。我在 head 中包含了 React、ReactDOM 和 babel 的脚本。我只想看到一个 div 正确渲染。我还没有使用 Node，只是一个 React 和 Babel 的练习（使用 babel-standalone）。我正在使用一个简单的 http-server 运行该文件。我在使用 React Chrome 扩展时遇到错误：Waiting for roots to load...to reload inspector click here。

index.html

<!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>`

components.js

class MachineBox extends React.Component {
 render(){
   return ( <div>Hello From React </div> );
 }
}

let target =  document.getElementById('machine-box');

ReactDOM.render(
 <MachineBox />, target
)

【问题讨论】：

在应有的位置添加分号。在return 语句的末尾添加一个。
控制台中还有其他内容吗？
控制台没有错误@loganfsmyth

标签： reactjs babeljs react-jsx

【解决方案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>

【讨论】：

我已经进行了上述设置，但我不能使用 import 语句，我必须包含包含组件的 .js 文件。如何使用导入和导出语句？我必须设置 webpack 才能工作吗？
@Joseph 这就是这样做的方式。 babel-standalone 仅用于最基本的测试。在任何实际的生产代码中，您都应该使用 Webpack。