服务器正在工作，但使用 React、Node 和 Express 没有显示任何内容答案

【问题标题】：Server is working but not showing anything With React, Node And Express服务器正在工作，但使用 React、Node 和 Express 没有显示任何内容
【发布时间】：2017-04-28 06:35:20
【问题描述】：

index.html 有效，但是当我尝试运行 app.jsx 代码时，它没有显示任何内容。

Server.js 页面

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

var listen = app.listen(4040, function() {


 console.log('Express server is up on port 4040');
});

index.html 页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-faux-dom/3.1.0/ReactFauxDOM.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>  /*If something wrong with babel script *\

</head>

<body>
  <div id="app"></div>
  /*<h1>This text would display on server</h1>*\
  <script type="text/babel" src="app.jsx"></script>
</body>

</html>

app.jsx 页面

var Greeter = React.createClass({ /*This jsx code wont deploy on server*\
  render: function() {            /*Maybe there is an error*\
    return (
      name: 'React',
      message: 'This is the default message!'
    };
  },
  render: function() {
    var name = this.props.name;
    var message = this.props.message;

    return ()

  }
      <div>
        <h1>Hello {name}!</h1>
        <p>{message + "!!"}</p>
      </div>
    );
  }
});

var firstName = "Andrew";

ReactDOM.render(
  <Greeter name={firstName}/>,
  docucument.getElementById('app')
);

【问题讨论】：

服务器假设输出：Hello Andrew！这是默认消息。
你试过什么网址？
您的 app.jsx 文件有很多问题。您有两个渲染函数，它们不会返回任何有意义的内容，并且您的 jsx 代码只是突然出现在任何东西之外。您可能应该尝试按照教程进行设置。

标签： javascript reactjs express babeljs

【解决方案1】：

正如您在评论中建议的那样，您是否尝试设置默认道具值或其他内容？你的 app.jsx 应该是这样的。

var Greeter = React.createClass({ 
render: function() {        

var name = this.props.name;
var message = this.props.message;

return (
    <div>
     <h1>Hello {name}!</h1>
     <p>{message + "!!"}</p>
   </div>  
  );
 };
});

var firstName = "Andrew";
var message = "This is the default message!";

ReactDOM.render(
  <Greeter name={firstName} message = {message}/>,
 docucument.getElementById('app')
);

【讨论】：

当我输入：localhost:4040 页面上传为空。
我尝试了不同的端口：localhost:6000、8000、4040，即使在使用 app.jsx 进行更改后，它仍然不会上传任何内容。页面是空白的。
这在开发者工具 chrome 中向我展示了：Uncaught SyntaxError: localhost:5000/app.jsx: Unexpected token (13:2)
); }; }); var firstName = "安德鲁";在 t.o.raise (browser.min.js:27) 在 t.u.unexpected (browser.min.js:28) 在 t.u.expect (browser.min.js:28) 在 t.u.parseObj (browser.min.js:27) 在 t.u. parseExprAtom (browser.min.js:27) 在 t.parseExprAtom (browser.min.js:29) 在 t.u.parseExprSubscripts (browser.min.js:27)