Pos*_*Guy 12 javascript node.js reactjs react-jsx
我找不到一个很好的最基本的例子,我可以连接一个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.
Mik*_*ans 11
通常情况下使用react-router来处理路由,将你的React应用程序编写为一个React应用程序(即你所有的JSX源代码都将捆绑到一个app.js文件中,该文件知道如何加载你的所有"页面"或"视图")然后使用express(或Hapi,或任何其他服务器进程)作为您的API和资产服务器,而不是您的页面/视图生成器.
然后,您可以使用您在react-router路由器对象中设置的路由,以便在快速方面,您可以将用户转发到react-router可以处理内容加载的URL ,这样您就可以获得
您也可以通过服务器端呈现自动执行大部分操作,但名称可能令人困惑:您仍然编写React应用程序,好像根本没有涉及服务器,然后依靠React的呈现机制来完全呈现单个"页面"对于请求的URL,它将显示所有正确的初始内容,同时加载您的应用程序并静默地将其挂回到用户正在查看的内容中,以便通过React再次处理通过初始页面加载的任何交互,以及后续导航是"虚假"导航(您的网址栏将显示一个新的网址,但不会发生实际的网络导航,React只是简单地交换内容).
一个很好的例子是https://github.com/mhart/react-server-example
其他答案与使用反应的常用方法一起工作，像这样替换 dom 中的元素
React.render(<APP />, document);
但是如果你想让 react 成为你的“模板语言”，你也可以使用 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 中渲染 react
| 归档时间： |
|
| 查看次数： |
12131 次 |
| 最近记录： |