从 Express 调用 React View

Question

我找不到一个很好的最低限度的例子，我可以连接一个 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。

Answer 1

2021 年编辑：

现代解决方案是使用 create-react-app 工具，然后在需要的地方放入代码。它已被设置为为您完成剩下的工作。在过去的六年里，React 的格局发生了很大的变化。

2015 年原始答案：

通常是使用react-router来处理路由；将您的 React 应用程序编写为单个 React 应用程序（即，所有 JSX 源代码最终都捆绑到一个 app.js 文件中，该文件知道如何加载所有“页面”或“视图”），然后使用 express（或 Hapi ，或任何其他服务器进程）主要作为您的 API 和资产服务器，而不是您的 page/view 生成器。

然后您可以利用您在 react-router 路由器对象中设置的路由，以便在快递方面您可以将您的用户转发到 react-router 可以处理的 URL用于内容加载，所以你得到

用户请求站点。com/lol/monkeys
express 重定向到 /#/lol/monkeys
由于路由器中的路由，您的 React 应用加载了正确的视图
可选地，您的应用会执行 history.replaceState 以便用户看到网站。com/lol/monkeys（有一些反应路由器技巧可以为您执行此操作）

你也可以通过服务器端渲染来自动化其中的大部分，但名称可能会令人困惑：你仍然编写你的 React 应用程序，就好像根本不涉及服务器一样，然后依靠 React 的渲染机制为请求的 URL 完全渲染单个“页面”，这将显示所有正确的初始内容，同时 also 然后加载您的应用程序并静默挂钩它返回到用户正在查看的内容中，以便通过初始页面加载的任何交互再次由 React 处理，后续导航是“假”导航（您的 url 栏将显示一个新的 URL 但不会发生实际的网络导航，React 只是交换内容 in/out).

一个很好的例子是 https://github.com/mhart/react-server-example

Answer 2

如果您想保持简单，您可以在应用程序的入口点执行此操作：

路线 | 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 页面上以其呈现方法定位特定元素：

React.render(<Application />, document.getElementById('foo'));

因此，如果您的 javascript 包含在 index.html 中并且存在具有该 ID 的元素，则 React 会将您的应用程序注入到 div 中。从那时起，您可以使用 react-router 完成所有路由，或者您可以在 express 中设置不同的路由并像处理它们一样处理它们 index.html

Answer 3

其他答案与通常使用反应的方式一起工作，像这样替换 dom 中的元素

React.render(<APP />, document);

但是如果你想让 React 成为你的 "template language" in 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 方面，您还需要注意一些其他事项。这个简单的极简主义者 tutorial and this blog post 帮助我更好地了解情况

请注意教程中的示例代码使用此语法

var markup = React.renderToString(APP());

已弃用，会导致错误。要使用它，你必须更换

var APP = require('./app');

和

var APP = React.createFactory(require('./app'));

或者像我在第一个示例中所做的那样渲染 jsx。为了让教程正常工作，我可能还必须在 package.json.

中使用更新版本的依赖项

一旦你了解了它，一个发烧友 tutorial 展示了一种更强大的方法来使用 react-engine 在 express

中渲染 react

Answer 4

您可以使用名为 react-helper (https://github.com/tswayne/react-helper) 的库，而不是手动处理 React.render。它为你设置一个 div，将你的反应组件绑定到 div，允许你将属性传递给你的组件服务器端，如果你为你的配置了 webpack，它甚至可以处理服务器端渲染节点应用程序或愿意使用 babel-register（不推荐用于产品）。

从 Express 调用 React View

Calling React View from Express

javascript

node.js

reactjs

react-jsx

2021 年编辑：

2015 年原始答案：