从Express中调用React视图
我找不到一个很好的例子，我可以通过express.js来调用一个响应视图。
到目前为止，这是我的。
+-- app.js +-- config | +-- server.js +-- routes | +-- index.js +-- views | +-- index.html app.js
require('./config/server.js'); require('./routes/index.js');
configuration| 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-router来处理路由，将React应用程序编写成一个React应用程序（也就是说，所有的JSX源代码将捆绑到一个app.js文件中，该文件知道如何加载所有的“页面“或”视图“），然后使用express（或Hapi，或任何其他服务器进程）主要作为您的API和资产服务器，而不是您的页面/视图生成器。
然后，您可以利用您在react-router路由器对象中设置的路由，以便在快速方面，您可以将用户转发到react-router可以处理的用于加载内容的URL，所以您可以
- 用户请求site.com/lol/monkeys
- 表示redirect到/＃/ lol /猴子
- 由于路由器中的路由，您的反应应用会加载正确的视图
- 可选的，你的应用程序做一个history.replaceState，以便用户看到site.com/lol/monkeys（有一些反应路由器技巧为你做这个）
你也可以通过服务器端渲染来实现大部分的自动化操作，但是这个名字会让人感到困惑：你仍然在编写你的React应用程序，就好像根本没有涉及到服务器，然后依靠React的渲染机制来完全呈现单个的“页面”对于一个请求的URL，它将显示所有正确的初始内容， 同时加载你的应用程序，并静静地将其挂回到用户正在查看的内容中，以便任何经过初始页面加载的交互再次被React处理，随后的导航是“假”导航（您的url栏将显示一个新的URL，但没有实际的networking导航将发生，React只是交换内容进/出）。
其他答案的工作与通常的方式来使用反应，以便像这样replaceDOM中的元素
React.render(<APP />, document);
但是如果你想在express中作为你的“模板语言”，你也可以使用react来呈现一个简单的htmlstring，就像这样
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中使用更新版本的依赖关系。
一旦你弄明白了，一个更有趣的教程展示了一个更强大的方式来使用反应引擎来expression反应
如果你想保持简单，你可以这样做的应用程序的入口点：
路线| index.js
app.get('/', function(request, response){ // how do we call the route that will run index.html ? res.sendfile('../views/index.html'); });
React将在您的index.html页面的render方法中定位一个特定的元素：
React.render(<Application />, document.getElementById('foo'));
所以如果你的javascript被包含在index.html中，并且具有该id的元素存在，那么反应就是将你的应用程序注入到该div中。 从这一点开始，你可以使用react-router完成所有的路由，或者你可以设置不同的路由，像处理index.html
您可以使用名为react-helper（ https://github.com/tswayne/react-helper ）的库来代替手动处理React.render。 它为你设置一个div，将你的反应组件绑定到div，允许你传递属性到你的组件服务器端，甚至可以处理服务器端渲染，如果你有为你的节点应用程序configurationwebpack或者愿意使用babel注册（不build议用于产品）。