Question

您好我是reactjs的新手，当我从终端运行server.js文件时，它在浏览器上显示空白页面。 index.html文件的代码是：

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

提前致谢。

Answer 1

这是一个有效的例子。

在您的代码中，错误的部分是指向babel-core的CDN链接。使用JS时，您可以随时查看控制台（在Google Chrome上：Windows上为Ctrl + shift + J，IOS上为Cmd + Opt + J）。

另一方面，我认为这是一个介绍组件的好机会（参见参考资料）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First React Example</title>
  </head>
  <body>
    <div id="hello"></div>

    <script src="https://unpkg.com/react@15.0.0/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.0.0/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script type="text/babel">
      var Greeting = React.createClass({
        render: function() {
          return (
            <p>Hello World</p>
          )
        }
      });

      ReactDOM.render(
        <Greeting/>,
        document.getElementById('hello')
      );
    </script>
  </body>
</html>

浏览器在使用reactjs时显示空白页面

1 个答案: