在使用 npm 和 reactjs 时在 localhost:3000 上获取空白页面答案

【问题标题】：Getting Blank page on localhost:3000 while using npm along with reactjs在使用 npm 和 reactjs 时在 localhost:3000 上获取空白页面
【发布时间】：2016-12-12 09:14:06
【问题描述】：

enter image description here

    var express = require ('express');

//create our app
var app = express();

app.use(express.static('public'));

app.listen(3000,function(){

  console.log('Sever is up  on port 3000');

});

这是 Server.js 文件的代码。

<!DOCTYPE html>
<html>

  <head>
      <meta charset="UTF-8"/>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

  </head>

<body>

  <script type="text/babel" src="app.jsx"></script>


</body>
</html>

index.html 文件代码

var Greeter = React.createClass({

  render: function(){
    return(
    <div>
      <h1> Howdy! </h1>
    </div>
    );
}
});


ReactDOM.render(
<Greeter/>,
  document.getElementbyId('app')
);

app.jsx 文件代码

哪里出错了？我没有发现任何错误。但是当我打开http://localhost:3000 时，我得到一个空白页。我正在使用 Windows 10 和 node -v 6.9.1

任何帮助将不胜感激！谢谢。

【问题讨论】：

没有id="app"的元素

标签： node.js reactjs localhost

【解决方案1】：

你忘了用id='app'添加html元素，把它包含在html文件中，它会起作用的。

<div id="app"></div>

这部分有错误：

ReactDOM.render(
     <Greeter/>,
     document.getElementbyId('app')
);

检查getElementbyId 的拼写，而不是那个getElementById。

【讨论】：

我添加了
但仍然是同样的问题。
我仍然出现空白页，我尝试了所有可能的解决方案，但仍然出现空白页。
看到这个 jsfiddle：jsfiddle.net/kwqvkj4y 前端正在工作，再尝试在你的 html 正文中放一些 <p>Hello</p> 看看是否会出现，以确认问题出在服务器的哪个部分或一些反应问题。
我也试过了。它不适用于解决方案。还是同样的错误。
那个 hello world 出现在页面中了吗？

【解决方案2】：

试试babel 5.8.23。

您忘记放入app HTML 元素。

<div id="app"></div>

另外，getElementById 中有一个错字。 B 应该是大写的。

ReactDOM.render(
  <Greeter/>,
  document.getElementById('app')
);

【讨论】：

【解决方案3】：

由于 React 无法找到 ID 为 app

的 Div，请更新 ID 为应用的 Div

<div id="app"/>

【讨论】：

你检查过你的开发者控制台了吗？你有任何错误吗？
var Greeter = React.createClass({ render: function(){ return(
FARHAN
); } }); ReactDOM.render( , document.getElementById('app') );在上面的代码中，第一行 React.createClass({}) 有一些声明 fuciton() 的问题

【解决方案4】：

继续@MayankShukla 的回答。尝试为 babel transpiler 添加脚本来转换 jsx 代码，包括这个参考：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.19.0/babel.min.js"></script>

【讨论】：