bottle-react 16.2.4

说明

此库允许您从瓶子或 瓶。最初是为https://www.hvst.com/创建的。

示例（Hello World）

假设您有一个普通的jsx文件hello_world.jsx：

varHelloWorld=React.createClass({render:function(){return(<divclassName='hello_world'><h1>Hello{this.props.name}!</h1><div>Thanksfortryingbottle-react!</div></div>);}})bottlereact._register('HelloWorld',HelloWorld)

还有一些python代码：

app=bottle.Bottle()br=BottleReact(app)@app.get('/')defroot():returnbr.render_html(br.HelloWorld({'name':'World'}))

调用路由时，将呈现react组件。见 examples/hello_world了解详细信息。

原则

我们为什么开发这个？我们有几个目标：

• [X]在开发过程中不要交叉编译JavaScript。

用webpack编译对于非平凡的应用程序来说太慢了。 （web开发的一个优点是alt-Tab/ctrl-R到 查看您的更改。）并且它在dev和 浪费开发者资源。

• [X]不要将所有javascript合并到一个ginormous包中。

使您的用户每 部署太可怕了。而且99%的内容没有在大多数页面上使用。加载 使用http keep alive的多个资源总共需要40kb ms/文件，在实践中要快得多。

• [x]react组件应该可以从python中组合。

我们的很多路线都是这样的：

@app.get('/something')defsomething():user=bottle.request.current_userreturnbr.render_html(br.HvstApp({'user':user.to_dict()},[br.HelloWorld({'name':user.name}),]))

react组件HvstApp（呈现标题栏和左边 nav）有两个参数。第一个是dict，它将是 作为json道具传递给react组件。第二个是 list将成为子项。这个列表可以（通常可以） 包含其他反应成分。

安装

sudopipinstallbottle-react

nginx集成

默认情况下（在生产模式下）bottle-react写入 /tmp/bottlereact/hashed-assets/。使nginx服务于这些文件 直接使用以下命令：

location ^~ /__br_assets__/ {
  alias /tmp/bottlereact/hashed-assets/;
  expires max;
}

服务器端渲染

要使用服务器端呈现，请安装npm包 `node-jsdom<；https://www.npmjs.com/package/node-jsdom>；``有：

$ sudo npm install -g node-jsdom

然后将True或可调用的传入render_server 参数。例如：

defrender_server():ua=bottle.request.environ.get('HTTP_USER_AGENT')returnutil.is_bot(ua)

顺便说一下…在为每个人启用它之前，运行一些基准测试。我们发现 它对总页面加载时间的影响很小，在 相当大的CPU开销和两倍的下载HTML大小。所以我们只有 对搜索机器人程序执行此操作（如上面的示例所示）。

您还可能需要填充一些缺少的浏览器功能。在 最少，react喜欢在内部运行时将自己置于window之下 nodejs，所以我们有：

// react in nodejs will put itself under window
if(typeofReact=='undefined'){React=window.React;}

在我们的application.js中，因为我们所有的代码都希望它是全局的。 同样，对于尚未实现的node-jsdom，您将 可能需要一些检查，如：

if(typeofDOMParser=='undefined'){// i guess we're not using DOMParser inside nodejs...
}

文件

请参阅full documentation。