React 系列教程 1：实现 Animate.css 官网效果

时间：2024-01-22 21:56:47

前言

这是 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 的状态变化简单来说也是要依靠事件驱动。所以对于小白来说不要有太多的思想包袱。上一篇文章通过更简单的示例介绍了 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 方法。

总结

本教程属于 React 非常基础的使用独立状态的例子，没有任何其它复杂的概念，所以非常适合新手。强调一点，本人并不精通 React，也是以一个学习者的姿态写这篇教程。因为 React 并不是我现在重点研究的技术，所以现阶段不想花过多的时间与精力去学习，但是还是希望这个简易的系列教程可以帮助想要学习 React 的新人。除了原创教程之外，我在之前也翻译过两篇非常优秀的实战教程，感兴趣的同学可以翻出来学习一下。

相关文章