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

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

然后，您可以点按您在react-router路由器对象中设置的路线，以便在快速方面，您可以将用户转发到react-router可以处理内容加载的网址，这样你得到了

用户请求site.com/lol/monkeys
表示重定向到/＃/ lol / monkeys
由于路由器
可选地，您的应用程序执行history.replaceState，以便用户看到site.com/lol/monkeys（有一些反应路由器技巧可以为您执行此操作）

您还可以通过服务器端呈现自动执行大部分操作，但名称可能令人困惑：您仍然编写您的React应用程序，好像根本没有涉及服务器，然后依赖React的渲染机制，可以完全呈现单个＆＃34;页面＆＃34;对于一个请求的URL，它将显示所有正确的初始内容，而还然后加载您的应用程序并静默将其挂回到用户正在查看的内容中，以便处理超过初始页面加载的任何交互再次通过React，后续的导航是＆＃34;假的＆＃34;导航（您的网址栏会显示一个新的网址，但不会发生实际的网络导航，React只是简单地交换内容）。

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

Answer 2

其他答案适用于使用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方面，还需要注意一些其他事项。这个简单的极简主义tutorial和blog post帮助我更好地了解情况

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

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

已被弃用并将导致错误。使用它你必须替换

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

与

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

或者像我在第一个例子中那样渲染jsx。为了使教程工作，我可能还必须在package.json中使用更新版本的依赖项。

一旦你了解了这位鸽友tutorial，就会发现一种更强大的方式来使用反应引擎在快递中做出反应

Answer 3

如果您想保持简单，可以针对应用的切入点执行此操作：

路线| 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的元素，则会将您的应用程序注入该div。从那时起，您可以使用react-router进行所有路由，或者您可以在express中设置不同的路由并像处理index.html一样处理它们

Answer 4

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

从Express调用React视图

4 个答案: