react 實戰案例(webpack構建)

最近在學習react+es6+webpack ，從網上看了資料，整理了這個項目，順便記錄一下學習歷程，這裏要求對react ，es6 ， webpack ,nodejs有一定的基礎，但是又不知道怎麼取搭建項目的。

首先看一下目錄結構

下面我就把各個部分的代碼貼出來，供大家參考:

1.首先肯定是我們的依賴，package.json

{
  "name": "webpack-bry",
  "version": "1.0.0",
  "description": "bry first webpack program",
  "main": "index.js",
  "devDependencies": { //各種依賴
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1", 
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^0.18.2",
    "webpack": "^3.6.0", 
    "webpack-dev-server": "^2.8.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack", //從webpack啓動
    "server": "webpack-dev-server --open" //用server啓動
  },
  "author": "bry",
  "license": "ISC",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.6.0"
  }
}

2.接下來是webpack的配置文件:webpack.config.js

const webpack = require('webpack');


module.exports = {
  devtool: 'eval-source-map', //生成Source Maps（使調試更容易）

  entry:  __dirname + "/app/ManageSystem.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/build",//打包後的文件存放的地方
    filename: "bundle.js"//打包後輸出文件的文件名
  },

  //使用webpack構建本地服務器
  devServer: {
    contentBase: "./build",//本地服務器所加載的頁面所在的目錄
    historyApiFallback: true,//不跳轉  在開發單頁應用時非常有用，如果設置爲true，所有的跳轉將指向index.html
    inline: true,//實時刷新
    port:8081, //設置默認監聽端口，如果省略，默認爲'8080'
    hot: true  //開啓熱加載
  },

 //Babel配置  es2015就是es6
  module: {
        rules: [

            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "es2015", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            },

            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, 
                    {
                        loader: "css-loader",
                         options: {
                            modules: true
                        }
                    }
                ]
            }


        ]
    },

    plugins: [
        new webpack.BannerPlugin('版權所有，翻版必究'), //版權插件
        new webpack.HotModuleReplacementPlugin()//熱加載插件
    ],




}

3.index.html 我們的主頁

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <div id='root'>
    </div>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

4.入口文件:ManageSystem.js

import React from 'react'; //import 是es6的導入模塊的寫法
import {render} from 'react-dom';
import StaffHeader from './StaffHeader.js';
import StaffItemPanel from './StaffItemPanel.js';
import StaffFooter from './StaffFooter.js';
import StaffDetail from './StaffDetail.js';

import Staff from './STAFF.js';


class App extends React.Component {
    constructor(){
        super();
        this.state = {
            staff : new Staff,
            staffDetail: null
        };
    }

    //增
    addStaffItem(item){
        this.setState({
            staff: this.state.staff.addStaffItem(item)
        });
    }
    //刪
    removeStaffItem(key){
        this.setState({
            staff: this.state.staff.removeStaffItem(key)
        });
    }

    /*
     *詳情
     */
    //打開
    detailStaffItem(key){
        this.setState({
            staffDetail: this.state.staff.staff.filter(item => {
                return item.key==key;
            })[0]
        });
    }
    //關閉
    closeDetail(){
        this.setState({
            staffDetail: null
        });
    }
    //編輯
    editDetail(item){
        this.setState({
            staff : this.state.staff.editStaffItem(item)
        });
    }

    /*
     * 排序
     */
    sortStaff(sortType) {
        this.setState({
            staff: this.state.staff.sortStaff(sortType) 
        });
    }

    /*
     * 篩選
     */
    filtStaff(filtType) {
        this.setState({
            staff: this.state.staff.filtStaff(filtType)
        });
    }

    /*
     * 搜索
     */
    searchStaff(word) {
        this.setState({
            staff: this.state.staff.searchStaff(word)
        });
    }


    render(){
      return (
        <div>
          <StaffHeader sortStaff={this.sortStaff.bind(this)} filtStaff={this.filtStaff.bind(this)} searchStaff={this.searchStaff.bind(this)}/>
          <StaffItemPanel items={this.state.staff.staff} removeStaffItem={this.removeStaffItem.bind(this)} detailStaffItem={this.detailStaffItem.bind(this)}/>
          <StaffFooter addStaffItem={this.addStaffItem.bind(this)}/>
          <StaffDetail staffDetail={this.state.staffDetail} closeDetail={this.closeDetail.bind(this)} editDetail={this.editDetail.bind(this)}/>
        </div>
      );
    }
}

render(<App />, document.getElementById('root'));

5.數據管理： STAFF.js

class staffItem {
    constructor(item){
        this.info = {};
        this.info.name = item.name;
        this.info.age = item.age || 0;
        this.info.sex = item.sex;
        this.info.id = item.id;
        this.info.descrip = item.descrip || '';
        this.key = ++staffItem.key;
    }
}
staffItem.key = 0;

export default class STAFF {

    constructor(){
        this.allStaff = [
            new staffItem(STAFF.rawData[0]),
            new staffItem(STAFF.rawData[1]),
            new staffItem(STAFF.rawData[2]),
            new staffItem(STAFF.rawData[3]),
            new staffItem(STAFF.rawData[4]),
            new staffItem(STAFF.rawData[5]),
            new staffItem(STAFF.rawData[6]),
            new staffItem(STAFF.rawData[7]),
            new staffItem(STAFF.rawData[8]),
            new staffItem(STAFF.rawData[9]),
            new staffItem(STAFF.rawData[10])
        ];
        this.staff = [];
        this.sortType = 0;//0-身份 1-年齡升 2-年齡降
        this.filtType = 0;//0-all 1-主任 2-老師 3-學生 4-實習
        this.word = '';//搜索關鍵字
        this._sortStaff(this.sortType);  //默認按身份排序
        this._filtStaff(this.filtType);
    }

    //增
    addStaffItem(item) {
        let newItem = new staffItem(item);
        this.allStaff.push(newItem);
        //排序 篩選 搜索過濾
        this._sortStaff(this.sortType);
        this._filtStaff(this.filtType);
        this._searchStaff(this.word);
        return this;
    }

    //刪
    removeStaffItem(key) {
        let newStaff = this.allStaff.filter(item => {
            return item.key != key;
        });
        this.allStaff = newStaff;
        //篩選 搜多過濾
        this._filtStaff(this.filtType);
        this._searchStaff(this.word);
        return this;
    }

    //改
    editStaffItem(item) {
        this.allStaff.forEach(staffItem => {
            if(staffItem.key == item.key) {
                staffItem.info.name = item.name;
                staffItem.info.sex = item.sex;
                staffItem.info.age = item.age;
                staffItem.info.id = item.id;
                staffItem.info.descrip = item.descrip;          
            }
        });
        this._sortStaff(this.sortType);
        this._filtStaff(this.filtType);
        this._searchStaff(this.word);
        return this;
    }

    //篩選
    _filtStaff(filtType){
        this.filtType = filtType;
        switch(parseInt(filtType)){
            case 0: 
                this.staff = this.allStaff;
                break;
            case 1: 
                this.staff = this.allStaff.filter(item => {
                    return item.info.id == '主任';
                });
                break;
            case 2: 
                this.staff = this.allStaff.filter(item => {
                    return item.info.id == '老師';
                });
                break;
            case 3: 
                this.staff = this.allStaff.filter(item => {
                    return item.info.id == '學生';
                });
                break;
            case 4: 
                this.staff = this.allStaff.filter(item => {
                    return item.info.id == '實習';
                });
                break;
            default: break;
        }
    }

    //排序
    _sortStaff(sortType) {
        this.sortType = sortType;
        switch(parseInt(sortType)){
            case 0: //身份
                this.allStaff.forEach(item => {
                    switch(item.info.id) {
                      case '主任':
                          item.info.id = 1; break;
                      case '老師':
                          item.info.id = 2; break;  
                      case '學生':
                          item.info.id = 3; break;  
                      case '實習':
                          item.info.id = 4; break;
                      default: break;                         
                    }
                });
                this.allStaff.sort(function(item1, item2){
                    if(item1.info.id < item2.info.id)
                        return -1;
                    else if (item1.info.id > item2.info.id)
                        return 1;
                    else 
                        return 0;
                });
                this.allStaff.forEach(item => {
                    switch(item.info.id) {
                      case 1:
                          item.info.id = '主任'; break;
                      case 2:
                          item.info.id = '老師'; break;   
                      case 3:
                          item.info.id = '學生'; break;   
                      case 4:
                          item.info.id = '實習'; break;
                      default: break;                         
                    }
                });
                break;
            case 1: //年齡升
                this.allStaff.sort(function(item1, item2){
                    if(item1.info.age < item2.info.age)
                        return -1;
                    else if (item1.info.age > item2.info.age)
                        return 1;
                    else 
                        return 0;
                });
                break;
            case 2: //年齡降
                this.allStaff.sort(function(item1, item2){
                    if(item1.info.age < item2.info.age)
                        return 1;
                    else if (item1.info.age > item2.info.age)
                        return -1;
                    else 
                        return 0;
                });
                break;
            default: break;
        }
    }

    //搜索
    _searchStaff(word){
        this.word = word;
        //在staff中搜索
        this.staff = this.staff.filter(item => {
            return item.info.name.indexOf(word)!=-1 || 
                   (item.info.age+'').indexOf(word)!=-1 || 
                   item.info.id.indexOf(word)!=-1 ||
                   item.info.sex.indexOf(word)!=-1;
        });
    }

    filtStaff(filtType){
        this._filtStaff(filtType);
        this._searchStaff(this.word);
        return this;
    }
    sortStaff(sortType){
        this._sortStaff(sortType);
        this._filtStaff(this.filtType);
        this._searchStaff(this.word);
        return this;
    }
    searchStaff(word){
        this._filtStaff(this.filtType);
        this._searchStaff(word);
        return this;
    }
} 
//模擬數據庫
STAFF.rawData = [{ descrip:'我是一匹來自遠方的狼。', sex: '男', age: 20, name: '張三', id: '主任'},
                 { descrip:'我是一匹來自遠方的狼。', sex: '女', age: 21, name: '趙靜', id: '學生'},
                 { descrip:'我是一匹來自遠方的狼。', sex: '女', age: 22, name: '王二麻', id: '學生'},
                 { descrip:'我是一匹來自遠方的狼。', sex: '女', age: 24, name: '李曉婷', id: '實習'},
                 { descrip:'我是一匹來自遠方的狼。', sex: '男', age: 23, name: '張春田', id: '實習'},
                 { descrip:'我是一匹來自遠方的狼。', sex: '男', age: 22, name: '劉建國', id: '學生'},
                 { descrip:'我是一匹來自遠方的狼。', sex: '男', age: 24, name: '張八', id: '主任'},
                 { descrip:'我是一匹來自遠方的狗。', sex: '男', age: 35, name: '李四', id: '老師'},
                 { descrip:'我是一匹來自遠方的豬。', sex: '男', age: 42, name: '王五', id: '學生'},
                 { descrip:'我是一匹來自遠方的牛。', sex: '男', age: 50, name: '趙六', id: '實習'},
                 { descrip:'我是一匹來自遠方的馬。', sex: '男', age: 60, name: '孫七', id: '實習'}];

6.新增用戶組件:StaffFooter.js

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

    handlerAddClick(evt){
        evt.preventDefault();
        let item = {};
        let addForm = ReactDOM.findDOMNode(this.refs.addForm);
        let sex = addForm.querySelector('#staffAddSex');
        let id = addForm.querySelector('#staffAddId');

        item.name = addForm.querySelector('#staffAddName').value.trim();
        item.age = addForm.querySelector('#staffAddAge').value.trim();
        item.descrip = addForm.querySelector('#staffAddDescrip').value.trim();
        item.sex = sex.options[sex.selectedIndex].value;
        item.id = id.options[id.selectedIndex].value;

        /*
         *表單驗證
         */
        if(item.name=='' || item.age=='' || item.descrip=='') {
            let tips = ReactDOM.findDOMNode(this.refs.tipsUnDone);
            tips.style.display = 'block';
            setTimeout(function(){
                tips.style.display = 'none';
            }, 1000);
            return;
        }
        //非負整數
        let numReg = /^\d+$/;
        if(!numReg.test(item.age) || parseInt(item.age)>150) {
            let tips = ReactDOM.findDOMNode(this.refs.tipsUnAge);
            tips.style.display = 'block';
            setTimeout(function(){
                tips.style.display = 'none';
            }, 1000);
            return;
        }

        this.props.addStaffItem(item);
        addForm.reset();

        //此處應在返回添加成功信息後確認
        let tips = ReactDOM.findDOMNode(this.refs.tips);
        tips.style.display = 'block';
        setTimeout(function(){
            tips.style.display = 'none';
        }, 1000);
    }

    render(){
        return (
          <div>
            <h4 className="titleCenter">人員新增</h4>
            <hr/>
            <form ref='addForm' className="addForm">
                <div>
                  <label style={{'display': 'block'}}>姓名</label>
                  <input ref='addName' id='staffAddName' type='text' placeholder='Your Name'/>
                </div>
                <div>
                  <label  style={{'display': 'block'}}>年齡</label>
                  <input ref='addAge' id='staffAddAge' type='text' placeholder='Your Age(0-150)'/>
                </div>
                <div>
                  <label  style={{'display': 'block'}}>性別</label>
                  <select ref='addSex' id='staffAddSex'>
                    <option value='男'>男</option>
                    <option value='女'>女</option>
                  </select>
                </div>
                <div>
                  <label  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  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 onClick={this.handlerAddClick.bind(this)}>提交</button>
                </div>
            </form>
          </div>
        )
    }
}

7.頭部搜索信息組件:StaffHeader.js

import React from 'react';
import ReactDOM from 'react-dom'
export default class StaffHeader extends React.Component{

    //排序
    handlerOrderChange(){
        let sel = ReactDOM.findDOMNode(this.refs.selOrder);
        let selValue = sel.options[sel.selectedIndex].value;
        this.props.sortStaff(selValue);
    }

    //篩選
    handlerIdChange(){
        let sel = ReactDOM.findDOMNode(this.refs.selId);
        let selValue = sel.options[sel.selectedIndex].value;
        this.props.filtStaff(selValue);
    }

    //search
    handlerSearch(){
        let bar = ReactDOM.findDOMNode(this.refs.searchBar);
        let value = bar.value;
        this.props.searchStaff(value);
    }

    render(){
        return (
          <div>
              <h3 className="titleCenter">人員管理系統</h3>
              <table className="optHeader">
                <tbody>
                  <tr>
                    <td className="headerTd"><input ref='searchBar' onChange={this.handlerSearch.bind(this)} type='text' placeholder='Search...' /></td>
                    <td className="headerTd">
                        <label>人員篩選</label>
                        <select id='idSelect' ref="selId" onChange={this.handlerIdChange.bind(this)}>
                            <option value='0'>全部</option>
                            <option value='1'>主任</option>
                            <option value='2'>老師</option>
                            <option value='3'>學生</option>
                            <option value='4'>實習</option>
                        </select>
                    </td>
                    <td>
                        <label>排列方式</label>
                        <select id='orderSelect' ref="selOrder" onChange={this.handlerOrderChange.bind(this)}>
                            <option value='0'>身份</option>
                            <option value='1'>年齡升</option>
                            <option value='2'>年齡降</option>
                        </select>
                    </td>
                  </tr>
                </tbody>
              </table>
          </div>
        );
    }
}

8.一條職員信息的組件:StaffItem.js

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

    //delete
    handlerDelete(evt){
        this.props.removeStaffItem(this.props.item.key);
    }

    //detail
    handlerDetail(evt){
        this.props.detailStaffItem(this.props.item.key);
    }

    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" onClick={this.handlerDelete.bind(this)}>刪除</a>
                    <a className="itemBtn" onClick={this.handlerDetail.bind(this)}>詳情</a>
                </td>
              </tr>
        );
    }
}

9.整個職員信息列表的組件: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} removeStaffItem={this.props.removeStaffItem} detailStaffItem={this.props.detailStaffItem}/>);
            });
        }

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

10.職員詳細信息組件:StaffDetail.js

import React from 'react';
import ReactDOM from 'react-dom'
export default class StaffDetail extends React.Component{

    handlerEdit(){
        let item = {};
        let editTabel = ReactDOM.findDOMNode(this.refs.editTabel);
        let sex = editTabel.querySelector('#staffEditSex');
        let id = editTabel.querySelector('#staffEditId');

        item.name = editTabel.querySelector('#staffEditName').value.trim();
        item.age = editTabel.querySelector('#staffEditAge').value.trim();
        item.descrip = editTabel.querySelector('#staffEditDescrip').value.trim();
        item.sex = sex.options[sex.selectedIndex].value;
        item.id = id.options[id.selectedIndex].value;
        item.key = this.props.staffDetail.key;

        /*
         *表單驗證
         */
        if(item.name=='' || item.age=='' || item.descrip=='') {
            let tips = ReactDOM.findDOMNode(this.refs.DtipsUnDone);
            tips.style.display = 'block';
            setTimeout(function(){
                tips.style.display = 'none';
            }, 1000);
            return;
        }
        //非負整數
        let numReg = /^\d+$/;
        if(!numReg.test(item.age) || parseInt(item.age)>150) {
            let tips = ReactDOM.findDOMNode(this.refs.DtipsUnAge);
            tips.style.display = 'block';
            setTimeout(function(){
                tips.style.display = 'none';
            }, 1000);
            return;
        }

        this.props.editDetail(item);

        //此處應在返回修改成功信息後確認
        let tips = ReactDOM.findDOMNode(this.refs.Dtips);
        tips.style.display = 'block';
        setTimeout(function(){
            tips.style.display = 'none';
        }, 1000);
    }

    handlerClose(){
      this.props.closeDetail();
    }

    componentDidUpdate(){
        if(this.props.staffDetail == null){}
        else {
            let selSex = ReactDOM.findDOMNode(this.refs.selSex);
            for(let i=0; i<selSex.options.length; i++){
                if(selSex.options[i].value == this.props.staffDetail.info.sex){
                  selSex.options[i].selected = 'selected';
                  break;
                }
            }
            let selId = ReactDOM.findDOMNode(this.refs.selId);
            for(let i=0; i<selId.options.length; i++) {
                if(selId.options[i].value == this.props.staffDetail.info.id){
                  selId.options[i].selected = 'selected';
                  break;
                }
            }

        }
    }

    render(){
      let staffDetail = this.props.staffDetail;  
      if(!staffDetail)
        return null;

      return (
          <div className="overLay">
            <h4 className="titleCenter">點擊'完成'保存修改,點擊'關閉'放棄未保存修改並退出.</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>
            <p ref='Dtips' className='tips'>修改成功</p>
            <p ref='DtipsUnDone' className='tips'>請錄入完整的人員信息</p>
            <p ref='DtipsUnAge' className='tips'>請錄入正確的年齡</p>
            <button onClick={this.handlerEdit.bind(this)}>完成</button>
            <button onClick={this.handlerClose.bind(this)}>關閉</button>
          </div>
      );
    }
}

11.接下來是最後的樣式了:style.css

body,html {
    font-family: '微軟雅黑';
}

#app{
    width: 600px;
    margin: 100px auto;
    position:  relative;
}



.titleCenter{
    text-align: center;
}
.optHeader {
    margin: 30px auto;
}
.headerTd {
    width: 33%;
    text-align: center;
}
.optHeader select {
    width: 5em;
}

.itemPanel {
    width: 100%;
    border: 2px solid #b0c4de;
    border-radius: 4px;
    margin-bottom: 100px;
}
.itemTd {
    width: 20%;
    line-height: 1.5em;
    text-align: center;
}
.itemBtn {
    width: 3em;
    font-size: 80%;
    color: #1e90ff;
    display: inline-block;
}
.tempEmpty {
    line-height: 1.5em;
    background: #dcdcdc;
}


.addForm label{
    text-align: center;
}
.addForm input, .addForm select, .addForm textarea{
    width: 200px;
    margin: 0 auto 10px auto;
    display: block;
}
.addForm button {
    padding: 3px 20px;
    background-color: #1e90ff;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    margin: 5px auto;
    display: block;
}

.tips {
    display: none;
    color: #708090;
    margin: 0 auto;
    text-align: center;
}

.overLay {
    text-align: center;
    z-index: 100;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding-top: 50px;
    background-color: rgba(255, 255, 255, 0);
    animation-name: detailMerge;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}
.overLay table {
    width: 100%;
}
.overLay tr {
    line-height: 1.5em;
}
.overLay th {
    width: 40%;
}
.overLay td {
    width: 60%;
    text-align: center;
}
.overLay input, .overLay select, .overLay textarea {
    width: 200px;
}
.overLay button {
    padding: 3px 20px;
    background-color: #1e90ff;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    margin: 5px auto;
    display: inline-block;
}

@keyframes detailMerge {
    from {
        background-color: rgba(255, 255, 255, 0);
    }
    to {
        background-color: rgba(255, 255, 255, 0.95);
    }
}
@-webkit-keyframes detailMerge {
    from {
        background-color: rgba(255, 255, 255, 0);
    }
    to {
        background-color: rgba(255, 255, 255, 0.8);
    }   
}

現在所有文件的代碼都貼出來了，最後進入項目的文件夾,敲幾個命令就可以了:

 1.安裝依賴項
     npm install
 2.打包：
     npm start
 或者
 直接啓動 :
     npm run server

按照這些信息你先把項目搭建起來，之後你再細細的研究react是怎麼進行組件化的，以及es6的完美結合.

react 實戰案例(webpack構建)

java-IO流: Path和Files詳解

activeMQ 學習筆記

activeMQ--spring jms

springboot 整合jms (ActiveMQ 實現)

webpack 入門，超詳細

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結