Javascript 为什么赢了'；我的页面加载失败了吗？_Javascript_Html_Css_Reactjs

Javascript 为什么赢了'；我的页面加载失败了吗？

javascript html css reactjs

Javascript 为什么赢了'；我的页面加载失败了吗？,javascript,html,css,reactjs,Javascript,Html,Css,Reactjs,我想使用ReactJS创建一个实践web应用程序，但我甚至无法加载这个简单的测试，看看事情是否可行，这样我就可以继续并创建应用程序了下面是index.html文件： <!DOCTYPE html> <html> <head> <title>My website</title> <meta charset="utf-8"> <meta name="viewport" content="

我想使用ReactJS创建一个实践web应用程序，但我甚至无法加载这个简单的测试，看看事情是否可行，这样我就可以继续并创建应用程序了

下面是

index.html

文件：

<!DOCTYPE html>
<html>

  <head>
    <title>My website</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script type="text/babel" src="index.js"></script>
  </head>

  <body>
    <div id="example"></div>
  </body>

</html>

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

<!DOCTYPE html>
<html>

  <head>
    <title>My website</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
  </head>

  <body>
    <div id="example"></div>
    <script type="text/babel" src="index.js"></script>
  </body>

</html>

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

编辑如下：

下面是

index.html

文件：

<!DOCTYPE html>
<html>

  <head>
    <title>My website</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script type="text/babel" src="index.js"></script>
  </head>

  <body>
    <div id="example"></div>
  </body>

</html>

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

<!DOCTYPE html>
<html>

  <head>
    <title>My website</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
  </head>

  <body>
    <div id="example"></div>
    <script type="text/babel" src="index.js"></script>
  </body>

</html>

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

尝试将index.js脚本放在示例div之后

就像/u/Peter Qiu所说的，您需要将

放置在

元素之后，它才能工作

此外，您还必须添加babel transpiler，以便您的babel代码在浏览器中工作：

您可以在react/react dom依赖项之后的head部分中添加它

此外，要正确运行react应用程序，您需要通过静态服务器运行index.html文件。这里有一个简单的开始：

在浏览器中打开index.html文件（通过双击）将返回一个跨源请求错误。

您的代码正常工作，但我认为您没有正确加载。你是如何打开你的申请的？您正在打开HTML文件吗？你的URL看起来像

file:///path-to-your-html-file.html

使用文件路径对我不起作用；因此，我建议您使用web服务器来处理文件。一种简单的管理方法是运行NodeJS应用程序。只需运行

npm安装-ghttp服务器

。然后，转到终端中的应用程序目录并执行

httpserver

我试过了，没用。我会把我在原来的帖子里所做的发出来，真奇怪。我在我的电脑上试过，效果很好。我可以知道您在项目中使用的文件夹结构吗？

index.js

文件是否与

index.html

文件位于同一目录下？是的，它们都位于同一文件夹中。您是如何通过静态服务器查看html文件，还是仅在浏览器中打开它？当我在浏览器中打开index.html文件时（双击该文件并在chrome中打开），我使用node http server打开了我的文件。什么都没有发生。只是在浏览器中打开了它。您收到了什么错误消息？页面上或控制台中是否有？包括这些通常会帮助你更快地得到答案谢谢，它很有效！起初我使用的是Sublime IDE&它工作得很好。但后来我决定切换到Atom IDE。当我切换到Atom IDE时，它停止了工作。这怎么可能？检查错误输出。我在Atom中测试了你的应用程序，效果很好。老实说，如果我是你，我会学会如何用webpack设置它。更容易维护IMO。