React初学者工具包Hello World程序错误

我试图在反应教程上提出一个“Hello World”程序建议。React初学者工具包Hello World程序错误

但我在src和helloworld.html的根下创建了helloworld.js。当我尝试运行我的helloworld.html时（没有任何反应）。而当我试图运行helloworld.js错误下面介绍。

这是巴贝尔的问题吗？

2016-08-01 ApurvG

是否遵循自述文件中的说明来正确设置？ – ajmajmajma

我做了任何指示。我可能错过了一些东西，但我不知道如何纠正这一问题。 – ApurvG

你的helloworld.html是什么样的？预计截图中的错误，因为您试图运行应该在浏览器中运行的JSX代码，就好像它是一个纯JS节点应用程序 – lena

你的第一个问题，为什么的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。从脚本标记中加载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！：

来源

2016-08-02 08:48:22 Vivian

file：///root/WebstormProjects/Tessact-React-Front/helloworld.html – ApurvG

我确实您提到的文件在Chrome浏览器中找不到文件 – ApurvG

您在file：///上的事实让我觉得您不在任何web服务器后面您是使用webstorm打开html文件吗？ – Vivian

React初学者工具包Hello World程序错误

回答

相关问题