学习一项工具，最快的方式就是边学便用。在学习 GUI 时我会边看API边写一个记事本，学习 web 框架时我会边学边写一个留言板。

学习和工作上一直是在写后端代码，有一点前端基础，但没有用过JS框架，看到最近React特别火，就开始了边学 React 边写留言板。一共花了大概两天左右的时间入门 React 并写出了这个留言板。

另外还收集了一些资料，比较适合刚接触 React 的人或是前端新手。

阮一峰的JavaScript教程阮一峰的 react 教程react.js入门教程Webpack 和 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.jsoutput 表示输出文件是 ./build/bundle.jsloader 表示使用 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 的思想。