Javascript 服务器正在工作，但没有显示任何带有React、Node和Express的内容_Javascript_Reactjs_Express_Babeljs

Javascript 服务器正在工作，但没有显示任何带有React、Node和Express的内容

javascript reactjs express

Javascript 服务器正在工作，但没有显示任何带有React、Node和Express的内容,javascript,reactjs,express,babeljs,Javascript,Reactjs,Express,Babeljs,index.html可以工作，但当我尝试运行app.jsxcode时，它不会显示任何内容 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

index.html可以工作，但当我尝试运行

app.jsx

code时，它不会显示任何内容

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>


/*如果babel脚本出了什么问题*\
/*此文本将显示在服务器上*\

app.jsx-page

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')
);

var Greeter=React.createClass（{/*此jsx代码不会部署在服务器上*\
render:function（）{/*可能有错误*\
返回(
名称：'反应'，
消息：“这是默认消息！”
};
},
render:function（）{
var name=this.props.name；
var message=this.props.message；
返回（）
}
你好{name}！
{消息+“！！”}
);
}
});
var firstName=“安德鲁”；
ReactDOM.render(
,
docucument.getElementById（'app'）
);

正如您在评论中所建议的，您是在尝试设置默认道具值还是其他什么？。你的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')
);

var Greeter=React.createClass（{
render:function（）{
var name=this.props.name；
var message=this.props.message；
返回(
你好{name}！
{消息+“！！”}
);
};
});
var firstName=“安德鲁”；
var message=“这是默认消息！”；
ReactDOM.render(
,
docucument.getElementById（'app'）
);

服务器假设输出：你好，安德鲁！这是默认消息。您尝试了什么url？您的app.jsx文件有很多问题。您有两个渲染函数，它们不会返回任何合理的结果，而jsx代码只是突然超出了任何范围。您可能应该尝试按照教程进行设置。当我输入：localhost:4040时，页面上载为空。我尝试了不同的端口：localhost:6000、8000、4040，即使使用app.jsx进行更改，它仍然不会上载任何内容。页面是空白的，这是我在开发者工具chrome中看到的：uncaughtsyntaxerror:：uncontractedtoken（13:2））；}；}；var firstName=“安德鲁”；在t.o.raise（browser.min.js:27）在t.u.unexpected（browser.min.js:28）在t.u.parseObj（browser.min.js:27）在t.u.parsexpratom（browser.min.js:27）在t.parsexpratom（browser.min.js:29）在t.u.parsexprsubscripts（browser.min.js:27）上