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 方法。对于涉及动画的问题,还要了解 animationendtransitionend 两个事件。

总结

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

posted @ 2018-04-29 23:12 叙帝利 阅读(...) 评论(...) 编辑 收藏