学习一项工具,最快的方式就是边学便用。在学习 GUI 时我会边看API边写一个记事本,学习 web 框架时我会边学边写一个留言板。
学习和工作上一直是在写后端代码,有一点前端基础,但没有用过JS框架,看到最近React特别火,就开始了边学 React 边写留言板。一共花了大概两天左右的时间入门 React 并写出了这个留言板。
另外还收集了一些资料,比较适合刚接触 React 的人或是前端新手。
接下来讲讲自己在用React开发留言板前端过程中遇到的坑和学习到的知识。项目路径:github.com/David-Guo/m… 觉得对你有用的话,给个 star 呗。效果图如下
关于 React 的介绍和 Nodejs 安装,这里就不多介绍了,网上有相当丰富的资料。
构建
package
在写 Js 代码之前我们需要定义好我们需要用什么编译器、相关的依赖包以及 npm 命令行脚本参数信息,这件事情就交给文件package.json
去做。
{
"name": "MessageBoard",
"version": "1.0.0",
"description": "js for MessageBorad",
"main": "index.js",
"scripts": {
"start": "webpack --progress --colors --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "david",
"license": "ISC",
"dependencies": {
"react": "^0.12.2"
},
"devDependencies": {
"jsx-loader": "^0.12.2"
}
}
webpack
scripts
表示命令行参数,这样我们可以直接在命令行键入npm start
,会替换成webpack --progress --colors --watch
,来使用 webpack 构建项目。由于使用到了 webpack ,所以我们需要对 webpack 也进行一些配置,下面是一个典型的配置文件。
module.exports = {
entry : {
index : "./index.js"
},
devtool: 'source-map',
output : {
path : "./lib",
filename : "bundle.js"
},
module : {
loaders :[
{test:/\.js$/, loader:'jsx-loader'}
]
}
}
webpack.config.js
文件则定义了输入输出的 js 文件路径、文件名、以及相关的编译器。
entry
表示入口文件是当前目录的index.js
output
表示输出文件是./build/bundle.js
loader
表示使用jsx-loader
来编译 JSX 语法
组件
写好配置文件,只需在命令行执行npm start
,就可以看到构建信息,并且每次修改文件,都会自动刷新构建。
我们的留言板将分成两个组件,一个表单,一个列表。
表单组件
要注意这里当用户提交表单时,应该把表单的数据传回父组件,父组件提交数据到服务器,然后刷新评论列表组件,而不是直接在表单组件中提交数据到服务器。通过将父组件的提交表单函数传递给子组件作为props
,子组件调用父组件的函数来实现这件事。在父组件的render
函数中加上 。表单组件的代码如下:
var MessageForm = React.createClass({
onSubmit: function(e) {
e.preventDefault();
var name = this.refs.name.getDOMNode().value.trim();
var comment = this.refs.comment.getDOMNode().value.trim();
this.props.submit(name, comment);
this.refs.name.getDOMNode.value = "";
this.refs.comment.getDOMNode.value = "";
},
render: function() {
return(
Leave a Message
your name
your comment
submit
)
}
});
onSubmit
函数的作用就是监听表单的提交事件和清空表单,在事件回调中调用preventDefault()
来避免浏览器默认地提交表单。父组件的 submit
现在已经成为了子组件的一个属性,表单组件监听到表单提交事件后立即调用。submit
函数主要作用是做 AJAX 向服务器提交数据,然后刷新评论列表。
var Container = React.createClass({
submit: function(name, comment) {
$.ajax({
type:'post',
url:'/post',
data:{name:name, comment:comment}
}).done(function(data) {
this.listComment();
}.bind(this));
},
...
})
列表组件
列表组件比较简单,主要是渲染父组件传递过来的数据。由于传递给列表的数据是动态变化的,所以我们需要将 data
申明 state
,传递代码是 ,然后在
MessageList
中可以通过 props.data
获取。
var MessageList = React.createClass({
render: function() {
var message = this.props.data.map(function(item){
return (
{item.name} 留言于 ({item.create_at})
{item.comment}
)
});
return(
Placeholder message
{message}
)
}
})
更新状态
当组件第一次创建的时候,我们想从服务器获取(使用GET方法)一些JSON数据,更新状态,反映出最新的数据。
var Container = React.createClass({
getInitialState : function(){
return {
data: []
}
},
listComment: function() {
$.ajax({
type:'get',
url:'/get',
}).done(function(resp) {
if(resp.status == "success"){
this.setState({
data:resp.data
})
}
}.bind(this));
},
componentDidMount: function() {
this.listComment();
},
})
在这里,componentDidMount
是一个在组件被渲染的时候React自动调用的方法。动态更新的关键点是调用 this.setState()
。我们把旧的评论数组替换成从服务器拿到的新的数组,然后UI自动更新。正是有了这种响应式,一个小的改变都会触发实时的更新。
总结
至此一个简单的留言板的大致逻辑功能就实习,我们用到了 React 的组件构建方式,通过 props ,state 在父子组件之间传递函数、数据,虚拟DOM节点的概念以及如何获取真实的DOM节点。由此可以大致感受如何使用 React 写前端已经 React 的思想。