十分详细的React入门实例

学习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(只在点击某条目的详情后展示)

第二步：构建静态版的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>
        );
    }
}

该组件主要用于提供搜索框，人员筛选下拉框以及排列方式下拉框。没错，我们首先就是要搭建一个静态版的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>
        );
    }
}

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>
        );
    }
}

该组件的功能相对简单，其中

        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} />);
            });
        }

是为了在暂无条目的时候给出相应的提示，如下图：

图5

StaffFooter

StaffFooter组件的功能是添加新人员，新建StaffFooter.js文件：

import React from 'react';
export default class StaffFooter extends React.Component{

    render(){
        return (
          <div>
            <h4 style={
     {&#