cherrypy@Tutorial 10:Mak ita modern single-pageapplication wth React.js

近年来，客户端单页应用程序（SPA）逐渐吞噬了服务器端生成的内容Web应用程序的午餐。

本教程演示了如何与React.js集成，React.js是2013年由Facebook发布的SPA的Javascript库。请参阅React.js文档以了解有关它的更多信息。

为了演示它，让我们使用教程09中的代码。但是，我们将替换HTML和Javascript代码。

首先，让我们看看我们的HTML代码是如何变化的：

<!DOCTYPE html><html><head><link href="/static/css/style.css" rel="stylesheet"><script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script></head><body><div id="generator"></div><script type="text/babel" src="static/js/gen.js"></script></body></html>

基本上，我们已经删除了使用jQuery的整个Javascript代码。相反，我们加载React.js库以及一个名为gen.js的新的本地Javascript模块，它位于public / js目录中：

var StringGeneratorBox = React.createClass({handleGenerate: function() {var length = this.state.length;this.setState(function() {$.ajax({url: this.props.url,dataType: 'text',type: 'POST',data: {"length": length},success: function(data) {this.setState({length: length,string: data,mode: "edit"});}.bind(this),error: function(xhr, status, err) {console.error(this.props.url,status, err.toString());}.bind(this)});});},handleEdit: function() {var new_string = this.state.string;this.setState(function() {$.ajax({url: this.props.url,type: 'PUT',data: {"another_string": new_string},success: function() {this.setState({length: new_string.length,string: new_string,mode: "edit"});}.bind(this),error: function(xhr, status, err) {console.error(this.props.url,status, err.toString());}.bind(this)});});},handleDelete: function() {this.setState(function() {$.ajax({url: this.props.url,type: 'DELETE',success: function() {this.setState({length: "8",string: "",mode: "create"});}.bind(this),error: function(xhr, status, err) {console.error(this.props.url,status, err.toString());}.bind(this)});});},handleLengthChange: function(length) {this.setState({length: length,string: "",mode: "create"});},handleStringChange: function(new_string) {this.setState({length: new_string.length,string: new_string,mode: "edit"});},getInitialState: function() {return {length: "8",string: "",mode: "create"};},render: function() {return (<div className="stringGenBox"><StringGeneratorForm onCreateString={this.handleGenerate}onReplaceString={this.handleEdit}onDeleteString={this.handleDelete}onLengthChange={this.handleLengthChange}onStringChange={this.handleStringChange}mode={this.state.mode}length={this.state.length}string={this.state.string}/></div>);}
});var StringGeneratorForm = React.createClass({handleCreate: function(e) {e.preventDefault();this.props.onCreateString();},handleReplace: function(e) {e.preventDefault();this.props.onReplaceString();},handleDelete: function(e) {e.preventDefault();this.props.onDeleteString();},handleLengthChange: function(e) {e.preventDefault();var length = React.findDOMNode(this.refs.length).value.trim();this.props.onLengthChange(length);},handleStringChange: function(e) {e.preventDefault();var string = React.findDOMNode(this.refs.string).value.trim();this.props.onStringChange(string);},render: function() {if (this.props.mode == "create") {return (<div><input  type="text" ref="length" defaultValue="8" value={this.props.length} onChange={this.handleLengthChange} /><button onClick={this.handleCreate}>Give it now!</button></div>);} else if (this.props.mode == "edit") {return (<div><input type="text" ref="string" value={this.props.string} onChange={this.handleStringChange} /><button onClick={this.handleReplace}>Replace</button><button onClick={this.handleDelete}>Delete it</button></div>);}return null;}
});React.render(<StringGeneratorBox url="/generator" />,document.getElementById('generator')
);

哇！这么简单的代码有多少代码，不是吗？入口点是最后几行，我们指出我们要在生成器div中呈现StringGeneratorBox React.js类的HTML代码。

呈现页面时，该组件也是如此。请注意它是如何由另一个呈现表单本身的组件组成的。

对于这样一个简单的例子，这可能有点过头但希望能让你在这个过程中开始使用React.js。

没有太多可说的，希望该代码的含义相当清楚。该组件具有内部状态，在该状态中我们存储由用户生成/修改的当前字符串。

当用户更改输入框的内容时，在客户端更新状态。然后，当单击一个按钮时，该状态将使用API端点发送到后端服务器，并执行相应的操作。然后，状态被更新，视图也是如此。

cherrypy@Tutorial 10:Mak ita modern single-pageapplication wth React.js相关推荐

GET http://car/delete?id=10 net::ERR_NAME_NOT_RESOLVED send @ jquery-1.8.3.min.js:2
报错信息 GET [http://car/delete?id=10](http://car/delete?id=10) net::ERR_NAME_NOT_RESOLVED send @ jquery ...
＞vue项目运行出现 10% building modules 1/1 modules 0 activeevents.js:377 throw er； // Unhandled ‘erro
vue项目运行出现 10% building modules 1/1 modules 0 activeevents.js:377 throw er; // Unhandled 'error' even ...
Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体（Font）文件，devsever，生产环境配置以及css的兼容写法
目录一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件二.打包 ...
盘点：10款最受欢迎数据可视化工具-JS可视化
盘点:10款最受欢迎数据可视化工具发布时间:2016-04-13 11:46:02.0 在数字经济时代,人们需要对大量的数字进行分析,帮助用户更直观的察觉差异,做出判断,减少时间成本 ...
10进制转2进制，js实现
使用栈,先进先出 function dec2bin(decNumber){ var stack= [] while(decNumber>0){ ...
ES6 极简教程（ES6 Tutorial）文 / 东海陈光剑
ES6 极简教程(ES6 Tutorial) 文 / 东海陈光剑 ECMAScript简介 JavaScript是ECMAScript的实现和扩展,由ECMA(一个类似W3C的标准组织)参与进行标准化 ...
自行车车把会吧车刮坏吗_花10分钟即可开始使用车把
自行车车把会吧车刮坏吗 by Wing Puah 永帕(Wing Puah) 花10分钟即可开始使用车把 (Take 10 minutes to get started with Handlebars ...
通常，Node.js如何处理10,000个并发请求？
本文翻译自:How, in general, does Node.js handle 10,000 concurrent requests? I understand that Node.js use ...
The ultimate end-to-end tutorial to create and deploy a fully decentralized Dapp in ethereum
In this tutorial my objective is to walk you through the steps required to create a descentralized a ...

cherrypy@Tutorial 10:Mak ita modern single-pageapplication wth React.js

cherrypy@Tutorial 10:Mak ita modern single-pageapplication wth React.js相关推荐

最新文章

热门文章