Question

这些是index.html文件的内容

  <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare/ajax/libs/react/0.14.7/react.js"></script>
    <script src="https://cdnjs.cloudflare/ajax/libs/react/0.14.7/react-dom.js"></script>
  </head>
  <body>
    <div id = "app">
    <script type="text/babel" src="app.jsx">


    </script>
    </div>
  </body>
</html>

我的app.jsx文件的内容是

 ReactDOM.render(
    <h1>Hello React!</h1>,
    document.getElementById('app')
    );

server.js文件的内容是

 var express = require('express');
 var app = express();
app.use(express.static('public'));

app.listen(3000,function(){
  console.log('Express server is up on port 3000');
});

package.json的内容是

 {
  "name": "hello-react",
  "version": "1.0.0",
  "description": "Simple react app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "varun",
  "license": "MIT",
  "dependencies": {
    "express": "^4.14.0"
  }
}

目录结构是 directory structure

当我使用命令node server.js运行文件时，页面localhost：// 3000变为空白。我期待 Hello React！出现在屏幕上。我开始反应和表达，我无法弄清楚为什么会这样。

Answer 1

您需要提供index.html中的express server文件。通过设置相对于当前文件的index.html文件的正确路径，将以下内容添加到server.js代码中，您应该能够看到结果

 app.get("/", function(req, res){
    res.send('/path/to/index.html');
});

Answer 2

试试这个：

res.sendFile('public/index.html' , { root : __dirname});

这对我有用。 root：__ dirname将获取server.js在上面示例中的地址，然后转到index.html（在本例中）返回的路径是到达公共文件夹所在的目录

Answer 3

想出来。有一个拼写错误，我导入了 Babel，react和React-Dom 。

更正后的代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/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>**

错过了所有三个图书馆的＆＃39; .com＆＃39; 。通过检查页面找到（图书馆没有加载）。

反应和表达

3 个答案: