我找不到一个很好的最基本的例子，我可以连接一个express.js路由来调用反应视图。
到目前为止，这就是我所拥有的。
+-- app.js
+-- config
| +-- server.js
+-- routes
| +-- index.js
+-- views
| +-- index.html
app.js
require('./config/server.js');
require('./routes/index.js');
配置| server.js
"use strict";
var express = require('express'),
app = express(),
routes = require('./routes');
app.set('view engine', 'html');
app.engine('html', ); // how do I tell express that JSX is my template view engine?
var port = process.env.PORT || 3000;
app.engine('handlebars', exphbs({ defaultLayout: 'main'}));
app.set('view engine', 'handlebars');
var server = app.listen(port, function(){
console.log('Accepting connections on port ' + port + '...');
});
路线| index.js
app.get('/', function(request, response){
// how do we call the route that will run index.html ?
request.render('index');
});
意见| 的index.html
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
<script type="text/jsx" src="build/noEpisodes.js"></script>
</head>
<body>
<div id="noEpisodesMessage"></div>
</body>
</html>
然后我的index.htm页面以及生成的jsx。
通常的事情是使用 反应路由器 要处理这些路线，将你的React应用程序编写为一个React应用程序（即你的所有JSX源代码都将捆绑到一个app.js文件中，该文件知道如何加载所有“页面”或“视图”）然后使用express（或Hapi或任何其他服务器进程）主要作为您的API和资产服务器，而不是您的页面/视图生成器。
然后，您可以点按您在中设置的路线 react-router 路由器对象，以便在快速方面，您可以将您的用户转发到该URL react-router 可以处理内容加载，所以你得到
- 用户请求site.com/lol/monkeys
- 表达重定向到/＃/ lol / monkeys
- 由于路由器中的路由，您的react应用程序会加载正确的视图
- 可选地，您的应用程序执行history.replaceState，以便用户看到site.com/lol/monkeys（有一些反应路由器技巧可以为您执行此操作）
您还可以通过服务器端呈现自动执行大部分操作，但名称可能令人困惑：您 仍然 编写您的React应用程序，好像根本没有涉及服务器，然后依靠React的渲染机制为请求的URL完全呈现单个“页面”，这将显示所有正确的初始内容 也 然后加载你的应用程序并静默地将其挂回到用户正在查看的内容中，以便通过React再次处理超过初始页面加载的任何交互，并且后续导航是“假”导航（您的url栏将显示新的URL但是没有实际的网络导航会发生，React只是简单地交换内容。
一个很好的例子是 https://github.com/mhart/react-server-example
通常的事情是使用 反应路由器 要处理这些路线，将你的React应用程序编写为一个React应用程序（即你的所有JSX源代码都将捆绑到一个app.js文件中，该文件知道如何加载所有“页面”或“视图”）然后使用express（或Hapi或任何其他服务器进程）主要作为您的API和资产服务器，而不是您的页面/视图生成器。
然后，您可以点按您在中设置的路线 react-router 路由器对象，以便在快速方面，您可以将您的用户转发到该URL react-router 可以处理内容加载，所以你得到
- 用户请求site.com/lol/monkeys
- 表达重定向到/＃/ lol / monkeys
- 由于路由器中的路由，您的react应用程序会加载正确的视图
- 可选地，您的应用程序执行history.replaceState，以便用户看到site.com/lol/monkeys（有一些反应路由器技巧可以为您执行此操作）
您还可以通过服务器端呈现自动执行大部分操作，但名称可能令人困惑：您 仍然 编写您的React应用程序，好像根本没有涉及服务器，然后依靠React的渲染机制为请求的URL完全呈现单个“页面”，这将显示所有正确的初始内容 也 然后加载你的应用程序并静默地将其挂回到用户正在查看的内容中，以便通过React再次处理超过初始页面加载的任何交互，并且后续导航是“假”导航（您的url栏将显示新的URL但是没有实际的网络导航会发生，React只是简单地交换内容。
一个很好的例子是 https://github.com/mhart/react-server-example
其他答案使用通常的方式使用react，以替换dom中的元素
React.render(<APP />, document);
但是如果你想在express中做出反应是你的“模板语言”，你也可以使用react来渲染一个简单的html字符串，就像这样
app.get('/', function(req, res) {
var markup = React.renderToString(<APP />); // <-- render the APP here
res.send(markup); // <-- response with the component
});
在捆绑所有依赖项和使用jsx方面，还需要注意一些其他事项。这个简单的极简主义 教程 和这个 博客文章 帮助我更好地了解情况
请注意，本教程中的示例代码使用此语法
var markup = React.renderToString(APP());
已被弃用并将导致错误。使用它你必须更换
var APP = require('./app');
同
var APP = React.createFactory(require('./app'));
或者像我在第一个例子中那样渲染jsx。为了使教程工作，我可能还必须在package.json中使用更新版本的依赖项。
一旦你得到了一位鸽友 教程 显示了一种更强大的方法来使用react-engine在express中进行反应
如果您想保持简单，可以为应用的入口点执行此操作：
路线| index.js
app.get('/', function(request, response){
// how do we call the route that will run index.html ?
res.sendfile('../views/index.html');
});
React会在它的render方法中定位index.html页面上的特定元素：
React.render(<Application />, document.getElementById('foo'));
因此，如果您的javascript包含在index.html中，并且存在具有该id的元素，则会将您的应用程序注入该div。从那时起，您可以使用react-router进行所有路由，或者您可以在express中设置不同的路由并像处理index.html一样处理它们
而不是手动处理React.render，您可以使用名为react-helper的库（https://github.com/tswayne/react-helper）。它为您设置div，将您的反应组件绑定到div，允许您将属性传递到组件服务器端，如果您为节点应用程序配置了webpack或者愿意使用babel，它甚至可以处理服务器端呈现-register（不推荐用于产品）。