React 入门套件 Hello World 程序错误答案

【问题标题】：React starter kit Hello World program errorReact 入门套件 Hello World 程序错误
【发布时间】：2016-08-01 19:00:26
【问题描述】：

我正在尝试按照反应教程中的建议制作一个“Hello World”程序。

但我在根目录下的src 和helloworld.html 下创建了helloworld.js。当我尝试运行我的helloworld.html 时（完全没有）。当我尝试运行helloworld.js 时，会出现下面描述的错误。

babel 有问题吗？

【问题讨论】：

您是否按照自述文件中的说明正确设置？
我按照指示做了。我可能错过了一些东西，但我不知道如何纠正这一点。
你的 helloworld.html 是什么样的？屏幕截图中的错误是预期的，因为您正在尝试运行应该在浏览器中运行的 JSX 代码，就好像它是一个纯 JS 节点应用程序一样
@lena 我添加了我的 html 的屏幕截图。如果该错误是预期的，那么我应该如何运行我的程序以查看输出“Hello World”
当我从 helloworld.html 的“查看菜单”中选择“在浏览器中打开”时，也没有任何反应。

标签： reactjs webstorm react-starter-kit

【解决方案1】：

您的第一个问题，为什么 helloworld.html 什么都不返回：您不需要在标签中添加 src="src/helloworld.js" 。否则将尝试加载您的 helloworld.js （这会导致您的第二个问题）。我创建了一个 plunker - 它可以在没有 src="src/helloworld.js" 的情况下工作

html 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <div>test</div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

演示： http://plnkr.co/edit/ONtPtVkCsnEqNYYtDFAv?p=preview

关于你的第二个问题。我猜您尝试将脚本从 helloworld.html 中分离到一个新文件中。您不需要导入，因为您已经在 html 的 head 标签中添加了 react.js 和 react-dom.js。当你从 script 标签加载 src/helloworld.js 时，ReactDOM.render 就已经知道了。

html 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel" src="src/helloworld.js">
    </script>
  </body>
</html>

src/helloworld.js

ReactDOM.render(
  <h1>Hello, world</h1>,
  document.getElementById('example')
);

演示： http://plnkr.co/edit/9uNkyaz65A4FMTHwdCtr?p=preview

编辑：

点击浏览器，比如我点击了Chrome，得到了Hello World！：

【讨论】：

file:///root/WebstormProjects/Tessact-React-Front/helloworld.html
我按照你说的做了。给出在 chrome 中找不到的文件。
你在 file:/// 上的事实让我觉得你没有在任何网络服务器后面。你是用webstorm打开html文件吗？
是的，我正在使用 Webstorm
我编辑了我的答案，如果您还单击 webstorm 右侧面板上的 chrome，您是否有像我一样在 chrome 中启动的页面？