Question

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和节点-v 6.9.1

任何帮助都将受到高度赞赏！感谢。

Answer 1

您忘记使用id='app'添加html元素，将其包含在html文件中，它会起作用。

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

此部分有错误：

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

检查getElementbyId的拼写，而不是放置此getElementById。

Answer 2

尝试 babel 5.8.23 。

您忘记输入app HTML元素。

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

此外，getElementById还有一个拼写错误。 B 应为上限。

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

Answer 3

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

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

Answer 4

请更新ID为app的Div，因为React无法找到ID app

的Div

<div id="app"/>

在localhost：3000上获取空白页面，同时使用npm和reactjs

4 个答案: