近年来,客户端单页应用程序(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端点发送到后端服务器,并执行相应的操作。 然后,状态被更新,视图也是如此。