React入門執行個體

學習React不是一蹴而就的事情，入門似乎也沒那麼簡單。但一切都是值得的。

今天給大家帶來一個詳細的React的執行個體，執行個體並不難，但對於初學者而言，足夠認清React的思考和編寫過程。認真完成這個執行個體的每一個細節會讓你受益匪淺。接下來我們開始吧。
代碼下載
預覽
首先說明一下，本例究竟做了什麼。本文實現了一個單頁面人員管理系統的前台應用。包括以下功能：

人員基本資料列表；
人員的錄入及刪除；
人員詳細資料的查看；
人員資訊的編輯；
根據人員身份進行篩選；
根據人員某些屬性進行排序；
根據人姓名、年齡、身份、性別等關鍵字進行人員搜尋。
頁面預覽如下：

圖1

人員管理系統
代碼下載
本文構建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={{'text-align':'center'}}>人員新增</h4>            <hr/>            <form ref='addForm' className="addForm">                <div>                  <label for='staffAddName' style={{'display': 'block'}}>姓名</label>                  <input ref='addName' id='staffAddName' type='text' placeholder='Your Name'/>                </div>                <div>                  <label for='staffAddAge' style={{'display': 'block'}}>年齡</label>                  <input ref='addAge' id='staffAddAge' type='text' placeholder='Your Age(0-150)'/>                </div>                <div>                  <label for='staffAddSex' style={{'display': 'block'}}>性別</label>                  <select ref='addSex' id='staffAddSex'>                    <option value='男'>男</option>                    <option value='女'>女</option>                  </select>                </div>                <div>                  <label for='staffAddId' style={{'display': 'block'}}>身份</label>                  <select ref='addId' id='staffAddId'>                    <option value='主任'>主任</option>                    <option value='老師'>老師</option>                    <option value='學生'>學生</option>                    <option value='實習'>實習</option>                  </select>                </div>                <div>                  <label for='staffAddDescrip' style={{'display': 'block'}}>個人描述</label>                  <textarea ref='addDescrip' id='staffAddDescrip' type='text'></textarea>                </div>                <p ref="tips" className='tips' >提交成功</p>                <p ref='tipsUnDone' className='tips'>請錄入完整的人員資訊</p>                <p ref='tipsUnAge' className='tips'>請錄入正確的年齡</p>                <div>                  <button>提交</button>                </div>            </form>          </div>        )    }}

代碼看起來比較長，其實就是一個html表單，這個步驟基本都是不需要太多思考的操作，代碼也沒有任何理解上的難度，記住，我們現在就是要把整個架構搭起來，做一個靜態版的應用。同樣的，呈現出最終的樣式，需要一些css，自行參考原始碼。呈現的樣子見圖三最下面的藍色方框。

StaffDetail
通常情況下，該組件是不顯示的，只有當使用者點擊某條目的詳情的時候，我用了一種動畫效果將該組件’浮現出來’。方法就是在css中將該組件的z-index設定為一個很大的值，比如100，然後通過逐漸改變背景透明度的動畫實現浮現的效果。目前我們只需要做一個靜態版的React，尚未實現使用者點擊操作的互動，所以這裡只需要建立以下js檔案，並在css中將.overLay的display設定為none就可以了，源碼中的css檔案已經做好了。

import React from 'react';export default class StaffDetail extends React.Component{    render(){      let staffDetail = this.props.staffDetail;        if(!staffDetail)        return null;      return (          <div className="overLay">            <h4 style={{'text-align':'center'}}>點擊'完成'儲存修改,點擊'關閉'放棄未儲存修改並退出.</h4>            <hr/>            <table ref="editTabel">              <tbody>                <tr>                  <th>姓名</th>                  <td><input id='staffEditName' type="text" defaultValue={staffDetail.info.name}></input></td>                </tr>                <tr>                  <th>年齡</th>                  <td><input id='staffEditAge' type="text" defaultValue={staffDetail.info.age}></input></td>                </tr>                <tr>                  <th>性別</th>                  <td>                    <select ref='selSex' id='staffEditSex'>                      <option value="男">男</option>                      <option value="女">女</option>                    </select>                  </td>                </tr>                <tr>                  <th>身份</th>                  <td>                    <select ref="selId" id='staffEditId'>                      <option value="主任">主任</option>                      <option value="老師">老師</option>                      <option value="學生">學生</option>                      <option value="實習">實習</option>                    </select>                  </td>                </tr>                <tr>                  <th>個人描述</th>                  <td><textarea id='staffEditDescrip' type="text" defaultValue={staffDetail.info.descrip}></textarea></td>                </tr>              </tbody>            </table>