React 系列教程 1：實現 Animate.css 官網效果

前言

這是 React 系列教程的第一篇，我們將用 React 實現 Animate.css 官網的效果。對於 Animate.css 官網效果是一個非常簡單的例子，原代碼使用 jQuery 編寫，就是添加類與刪除類的操作。這對於學習 React 來說是一個非常簡易的例子，但是我並不會在教程中介紹相關的前置知識，比如 JSX、ES6 等，對於小白來說可能還會有一些困惑的地方，所以還要了解一下 React 相關的基礎知識。雖然 React 有很多值得深究的知識，但這個系列教程並不會涉及高大深的內容。

預告一下，在下一篇教程中，我會使用 React + Redux，編寫一個元胞自動機蘭頓螞蟻的程序。

效果演示

本教程以實現 Animate.css 官網效果為主，不會去調整樣式細節，所以視覺上略顯朴素。以下是最終完成的效果：

See the Pen react-animate-css by Zongbin (@nzbin) on CodePen.

因為這個案例效果非常簡單，對於已經熟悉 React 的新手來說，完全可以嘗試自己編寫實現，甚至略過本篇教程。

開始吧

編寫 HTML 結構

整個教程采用 ES6 語法編寫，無法直接在瀏覽器預覽，所以需要使用 Babel 編譯一下，大家可以使用官方的 create-react-app 腳手架搭建開發環境。但是對於本教程而言，我推薦大家使用 CodePen 在線平台編寫，簡單直接，不需要復雜的環境配置。

啰嗦一句，在現代化的前端編程中，所有的頁面 HTML 元素幾乎都是寫在 JS 中，這確實更有利於 DOM 操作。與傳統前端開發一樣，我們同樣先把 HTML 結構寫出來，先看一看基本的雛形，然后再一點一點把事件添加上去。代碼如下：

class App extends React.Component{
  
  render (){
    return (
      <div>
        <h1>Animate.css</h1>
        <select>
          <optgroup label="Attention Seekers">
            <option value="bounce">bounce</option>
            <option value="flash">flash</option>
            <option value="pulse">pulse</option>
            <option value="rubberBand">rubberBand</option>
            <option value="shake">shake</option>
            <option value="swing">swing</option>
            <option value="tada">tada</option>
            <option value="wobble">wobble</option>
            <option value="jello">jello</option>
          </optgroup>

          // ...省略其它動畫選項

        </select>
        <input type="button" value="Animate it"/>
      </div>
    )
  }
}

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

對於熟悉 ES6 語法的朋友，上面的寫法不難理解，我們寫了一個 React 組件以及一個渲染輸出語句。

關於狀態

React 和 jQuery（傳統前端編程）的最大不同在於 DOM 操作的方式，React 通過狀態變化來更新 DOM，而傳統方式則使用事件更新 DOM。但是 React 的狀態變化簡單來說也要依靠事件驅動。所以對於小白來說不要有太多的思想包袱。上一篇文章《如何在已有的 Web 應用中使用 ReactJS》通過更簡單的示例介紹了 React 和 jQuery 的不同之處，感興趣的同學可以詳細了解一下。按照 React 官方規范，我們用以下方法添加狀態：

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      selected:''
    }
  }
}

添加事件

jQuery 添加事件的方式是獲取引用元素，然后綁定事件，而 React 則是通過 JSX（可以簡單理解為模板字符串）直接在元素上綁定事件。這種方式和 DOM 0 級綁定事件的方式類似，但是並不相同。

添加事件之前，我們先看一下需要哪些事件。首先，我們需要給選擇框添加 change 事件，用於在切換動畫時添加一個動畫類。另外，當動畫結束時我們需要把動畫類移除，所以需要綁定一個 animationend 事件。最后，給 Animate it 按鈕添加一個 click 事件，點擊按鈕，重新添加動畫類。

以下是添加事件之后的代碼：

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      selected:''
    }
    this.animationName = 'bounce';
  }
  
  handleChange = (e)=>{
    this.setState({
      selected: e.target.value
    });
    
    this.animationName = e.target.value;
  }
  
  handleAnimationEnd = (e)=>{
    this.setState({
      selected: ''
    });
  }
  
  handleClick = (e)=>{
    this.setState({
      selected: this.animationName
    });
  }
  
  render (){
    return (
      <div>
        <h1 className={`animated ${this.state.selected}`} onAnimationEnd={this.handleAnimationEnd}>Animate.css</h1>
        <select onChange={this.handleChange} >

          // ...省略動畫選項
          
        </select>
        <input type="button" value="Animate it" onClick={this.handleClick}/>
      </div>
    )
  }
}

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

添加完事件之后，整個教程基本就結束了，或許我的代碼並不是最好的。對於剛開始接觸 React 或者 JS 基礎不太扎實的同學，需要重點理解一下事件綁定時 this 的指代問題，以上代碼使用了箭頭函數來解決 this 的指代問題，還可以使用 bind 方法。對於涉及動畫的問題，還要了解 animationend 和 transitionend 兩個事件。

總結

本教程屬於 React 非常基礎的使用獨立狀態的例子，沒有任何其它復雜的概念，所以非常適合新手。強調一點，本人並不精通 React，也是以一個學習者的姿態寫這篇教程。因為 React 並不是我現在重點研究的技術，所以現階段不想花過多的時間與精力去學習，但還是希望這個簡易的系列教程可以幫助想要學習 React 的新人。除了原創教程之外，我在之前也翻譯過兩篇非常優秀的實戰教程，感興趣的同學可以翻出來學習一下。