React 系列教程 1：实现 Animate.css 官网效果
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 的新人。除了原创教程之外，我在之前也翻译过两篇非常优秀的实战教程，感兴趣的同学可以翻出来学习一下。