学习React不是一蹴而就的事情，入门似乎也没那么简单。但一切都是值得的。
今天给大家带来一个详细的React的实例，实例并不难，但对于初学者而言，足够认清React的思考和编写过程。认真完成这个实例的每一个细节会让你受益匪浅。接下来我们开始吧！
代码下载
预览 首先说明一下，本例究竟做了什么。本文实现了一个单页面人员管理系统的前台应用。包括以下功能：
人员基本信息列表； 人员的录入及删除； 人员详细信息的查看； 人员信息的编辑； 根据人员身份进行筛选； 根据人员某些属性进行排序； 根据人姓名、年龄、身份、性别等关键字进行人员搜索。 页面预览如下：
图1
图2
为了更好地学习，请先到这里去感受一下：
人员管理系统
代码下载
本文构建React组件的时候，使用了es6的语法，最终用webpack打包。最好有相关基础，我会在相关的地方进行言简意赅的说明。
第一步：划分UI Component React is all about modular, composable components.
React是模块化、组件化的。我们这里第一步要做的就是将应用划分成各个组件。我在图一、图二的基础上圈出了我们即将实现的各个组件。结果如图三、图四所示：
图3
图4
每个圈出的组件功能如下，这是本应用的框架，请大家务必看清楚，其中斜体字是各个组件的名称：
ManageSystem 图三最外层的红色方框，这是管理模块的最外层容器，容纳整个应用； StaffHeader 图三最上层蓝色方框，该模块接收用户操作的输入，包括关键字搜索输入、筛选条件以及排序方式； StaffItemPanel 图三中间蓝色方框，该模块用于展示所有基于用户操作(关键字搜索、筛选、排序)结果的条目； StaffFooter 图三最下层蓝色方框，该模块用于新人员的添加； StaffItem 图三内层的红色方框，该模块用于展示一条人员的基本信息，包括删除和详情操作的按钮； StaffDetail 图四的红色方框，每当点击StaffItem的’详情’后会显示该条目的详细信息。该模块用于展示人员的详细信息，兼有人员信息编辑的功能。 为了更清楚地展示框架结构：
ManageSystem
StaffHeader
StaffItemPanel
StaffItem
StaffItem
StaffItem...
StaffFooter
StaffDetail(只在点击某条目的详情后展示)
1 2 3 4 5 6 7 8 9 10 11 12 13 第二步：构建静态版的React应用 在第一步中我们已经划分了各个组件，也说明了各个组件的职责。接下来我们分步完成我们的应用，首先我们做一个静态版的React，只用于render UI组件，但并不包含任何交互。
这个步骤我们只需要参照图一、图二去做就好了，绝大部分工作基本上就是使用JSX按部就班地写html代码。这个过程不需要太多思考。每个组件中都仅仅只包含一个render()方法。
需要注意的是，静态版的应用，数据由父组件通过props属性向下传递，state属性是用不到的，记住，state仅仅为动态交互而生。
本应用的组件相对较多，我们不妨采用bottom-up的方式，从子组件开始。
好了，我们开始吧。
StaffHeader 首先以StaffHeader为例，创建一个StaffHeader.js文件。如下：
import React from 'react'; export default class StaffHeader extends React.Component{
render(){
return (
<div>
<h3 style={{'text-align':'center'}}>人员管理系统</h3>
<table className="optHeader">
<tbody>
<tr>
<td className="headerTd"><input type='text' placeholder='Search...' /></td>
<td className="headerTd">
<label for='idSelect'>人员筛选</label>
<select id='idSelect'>
<option value='0'>全部</option>
<option value='1'>主任</option>
<option value='2'>老师</option>
<option value='3'>学生</option>
<option value='4'>实习</option>
</select>
</td>
<td>
<label for='orderSelect'>排列方式</label>
<select id='orderSelect'>
<option value='0'>身份</option>
<option value='1'>年龄升</option>
<option value='2'>年龄降</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
);
}
} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 该组件主要用于提供搜索框，人员筛选下拉框以及排列方式下拉框。没错，我们首先就是要搭建一个静态版的React。呈现的样子参考图三最上方的蓝色框。当然，为了实现最终的样式，需要css的配合，css不是本文的关注点，本应用的css也十分简单，自行查看源代码。
StaffItem StaffItem是每个具体人员的基本信息组件，用于展示人员的基本信息并接收用户的删除和点击详情的操作。新建一个StaffItem.js(该组件在StaffItemPanel中被引用)：
import React from 'react'; export default class StaffItem extends React.Component{
render(){
return (
<tr
style={{'cursor': 'pointer'}}
>
<td className='itemTd'>{this.props.item.info.name}</td>
<td className='itemTd'>{this.props.item.info.age}</td>
<td className='itemTd'>{this.props.item.info.id}</td>
<td className='itemTd'>{this.props.item.info.sex}</td>
<td className='itemTd'>
<a className="itemBtn">删除</a>
<a className="itemBtn">详情</a>
</td>
</tr>
);
}
} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 StaffItemPanel 接下来是StaffItemPanel，该组件仅用于展示由父组件传入的各个人员条目，新建一个StaffItemPanel.js文件：
import React from 'react'; import StaffItem from './StaffItem.js'; export default class StaffItemPanel extends React.Component{
render(){
let items = [];
if(this.props.items.length == 0) {
items.push(<tr><th colSpan="5" className="tempEmpty">暂无用户</th></tr>);
}else {
this.props.items.forEach(item => {
items.push(<StaffItem key={item.key} item={item}/>);
});
}
return (
<table className='itemPanel'>
<thead>
<th className='itemTd'>姓名</th>
<th className='itemTd'>年龄</th>
<th className='itemTd'>身份</th>
<th className='itemTd'>性别</th>
<th className='itemTd'>操作</th>
</thead>
<tbody>{items}</tbody>
</table>
);
}
} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 该组件的功能相对简单，其中
if(this.props.items.length == 0) {
items.push(<tr><th colSpan="5" className="tempEmpty">暂无用户</th></tr>);
}else {
this.props.items.forEach(item => {
items.push(<StaffItem key={item.key} item={item} />);
});
}
————————————————
