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 的新人。除了原創教程以外，我在以前也翻譯過兩篇很是優秀的實戰教程，感興趣的同窗能夠翻出來學習一下。