React 最简单的入门应用项目

学习一项工具，最快的方式就是边学便用。在学习 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.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 的思想。