写在前面，使用ES6语法
1. 程序结构
- app/
- index.jsx (程序入口)
- components/ (组件文件夹)
- plist.jsx （展示用户列表）
- search.jsx （搜索框组件）
- utils/ (工具类)
- templates (模版文件夹)
- index.html
- mobile.html
- package.json (项目及npm包版本信息)
- webpack.config.js (webpack配置文件)
2. 完善程序内容
根据上面的图 把项目分为两个主要的component，一个是Search Box用来让用户填写用户名， 一个是List，用来展示搜索到用户的列表。
2.1 写入search.jsx文件
Search Box非常的简单 就是两个input，当用户点击Search的时候，把输入的名字发送到List的组件里面。
import React from 'react';
import ReactDOM from 'react-dom';
export default class Search extends React.Component {
constructor(props) {
super(props);
this.handleSearch = this.handleSearch.bind(this);
}
handleSearch() {
let name = ReactDOM.findDOMNode(this.refs.name).value;
if (name === '') {
return;
}
this.props.sendAction(name);
}
render() {
return (
<div>
<input type="text" ref="name" placeholder="输入你想搜索的关键词"/>
<button onClick={this.handleSearch}>Search</button>
</div>
)
}
}
2.2 写入list.jsx文件
List的目标是接受props传进来的name参数，发起一个ajax请求，然后用返回值更新整个列表，这个列表有几种状态 初始状态，第一次渲染返回一行提示文字。 Loading的状态，当有props传进来的时候，发起ajax请求，并且显示一个loading的提示。 完成状态，当请求完毕，渲染列表并且显示出来。
