写在前面，使用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的提示。 完成状态，当请求完毕，渲染列表并且显示出来。