一、創建工程

在官網的教程中,要使用react創建工程需要執行命令：

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

這些命令會幫我們生成一系列工程需要的插件，ES6的語法新特性：模塊化編程，很多瀏覽器不支持，我們需要這些工具轉化成es5。
執行npm start 在瀏覽器會出現一個初始的工程頁面，然后導入到webstrom,

TimeDisplay.js 代碼：

import React, {Component} from 'react';
import DisplayLog from './DiaplayLog';
import Button from './Button';
import formateTime from '../utils/formateTime'

class TimeDisplay extends Component {

    //在構造中初始化state值
    constructor(props) {
        super(props);
        //此處不能用setState();
        this.state = {
            time: 0,
            on: false,
            log: []
        }

    }

    // handleClick() {
    //     //注意這里的'this'對象，由于handleClick方法是傳遞到了Button中所以如果直接用this,拿到的
    //     //就是Button對象，報錯：time屬性沒有定義，這時候我們就需要使用bind函數
    //     setInterval(()=>this.setState({time:++this.state.time}),10);
    //
    //     //還有一種寫法：
    //     // setInterval(function () {
    //     //     this.setState({time:++this.state.time});
    //     //     console.log(this.state.time);
    //     // }.bind(this),10);
    // }
    // 上面方式button的實現代碼：<Button className="success" text="開始" onClick={this.handleClick.bind(this)}/>

    //或者都用箭頭函數實現,箭頭函數的作用域是：寫在哪里，this就表示哪里
    handleClick = () => {
        if (this.state.on) {
            clearInterval(this.timer);
        } else {
            //計時器
            this.timer = setInterval(() => {
                this.setState({time: ++this.state.time})
            }, 10)
        }
        //改變開始、暫停狀態
        this.setState({on: !this.state.on})
    }

    //記錄時間,用數組把當前的時間記錄下來
    handlelogTime = () => {
        this.state.log.push(this.state.time);
        // console.log(this.state.time);
    }

    //清空
    handlelClear = () => {
        this.setState({log:[]})

    }

    //重置
    handleReset =  ()=> {
        this.setState({time:0});
    }

    render() {
        var text = this.state.on ? '暫停' : '開始';
        var time = formateTime(this.state.time);
        // /*這里需要把當前組件的對象傳遞進去*/
        return <div>
            <h1 className="time_displayer">{time}</h1>
            <div className="controler">

                <Button className={this.state.on ? "danger":"success"} text={text} onClick={this.handleClick}/>
                <Button className="warning" text="重置" onClick={this.handleReset}/>
                <Button className="primary" text="記錄" onClick={this.handlelogTime}/>
                <Button className="undefined" text="清空" onClick={this.handlelClear}/>

            </div>

            <DisplayLog log={this.state.log}/>

        </div>
    }

    //監聽鍵盤的事件
    componentDidMount() {
        window.addEventListener('keydowm',e=>e.preventDefault())
        window.addEventListener('keyup',e=>{
            e.preventDefault();
            switch (e.keyCode) {
                case 32://space
                    this.handleClick();
                    break
                case 82://重置
                    this.handleReset();
                    break
                case 13:
                    this.handlelogTime();
                    break
                case 67:
                    this.handlelClear()
                    break
            }
        })
    }
}

//導出，在文件外面使用這個類
export default TimeDisplay;

DisplayLog.js 代碼：

export default  class DisplayLog extends Component {

    renderEmpty = ()=>{
        return <span className="empty_log">空空如也</span>;
    }

    renderLog = ()=>{
        return this.props.log.map((item,i) => {
            return <li className="log_item">{formateTime(item)}</li>
        });
    }

    render() {

        const log = this.props.log.length === 0 ? this.renderEmpty() : this.renderLog();

        return <ul className="log">
            {log}
        </ul>
    }
}

formateTime.js 代碼

export default function (t = 0) {
    const msec = appendZero(Number.parseInt(t % 100)),
    sec = appendZero(Number.parseInt(t/100%60)),
     min = appendZero(Number.parseInt(t/6000%60)),
     hour = appendZero(Number.parseInt(t/360000));

    return `${hour}:${min}:${sec}.${msec}`;

}

const appendZero = n=>n.toLocaleString({},{minimumIntegerDigits:2});

1.gif

涉及和需要注意的知識點：

• 當導入（import xxxx）的組件有相同名字的時候可以取別名：{import A as B}
• JSX語法它是支持javascript語法的,在es6中因為class是個關鍵字所以，在聲明，標簽屬性的時候class要改為className,虛擬DOM會自動解析。:

<h1 className="time_displayer">00:00:16.00</h1>

• className 如果需要用類標簽設置多個style的話用空格隔開，而且后面的style屬性會覆蓋前面的屬性

<button className="button success">開始</button>

• .log > .empty_log -->empty_log使用這個樣式 ，.log .empty_log都會使用這個樣式
• javaScript創建數組最常見的方式：
  var a =[] 和 var arr = new Array();
  在數組末尾添加元素： arr.push();
  arr.map(function(item,i))來遍歷數組

var arr = [1,3,4]
arr.map(function (item,i) {
    return ++item;//可以返回任意類型，賦值給一個新的數組
})
console.log(arr);
//輸出：[ 1, 3, 4 ]

var a = arr.map((item,i)=>++item)
console.log(a);
//輸出：[ 2, 4, 5 ]

• list-style: none;//去掉列表默認樣式
• 偽類：
  .className:xxx 值有：
  hover——鼠標移到標簽的屬性；
  visited——鏈接點擊后的顏色
• css3 的陰影
  box-shadow: 0 0 25px rgba(0,0,0,0.2);