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 的新人。除了原创教程之外,我在之前也翻译过两篇非常优秀的实战教程,感兴趣的同学可以翻出来学习一下。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

极速适配 iPhone X 秘笈

22340
来自专栏练小习的专栏

用TAOBAO的方法隐藏多余的线条

偶然的看到了TAOBAO UED团队的BLOG,在上面看到了篇文章,说的是怎么隐藏导航最后一项的竖线 1、类目之间的横竖线 ? 从很久很久以前开始,类目间的竖线...

207100
来自专栏Nian糕的私人厨房

Vue2.0 路由配置及Tab组件开发

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

13530
来自专栏javascript趣味编程

2 HTML5基础

答:借助HTML5解决和分析工业设计中的问题,易于实现数据可视化,而且支持所有主流操作系统。与传统C/C++/FORTRON计算机语言相比具备几个显著优势:首先...

19400
来自专栏前端新视界

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

这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果。对于 Animate.css 官网效果是一个非常简单的例子,...

13300
来自专栏韩东吉的Unity杂货铺

零基础入门 16: UGUI RawImage

今天的内容会很简单,也会很短,分享一下UGUI的RawImage,那什么是RawImage呢?

12630
来自专栏编程微刊

jQuery实现多种切换效果的图片切换的五款插件

33410
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

23650
来自专栏非著名程序员

【周末分享】解决中文排版错位的JustifiedTextview控件

1、FlowingDrawer 效果 ---- ? 2、Justifiedtextview 说明 ---- android中textview在中文排版时会出现无...

23380
来自专栏较真的前端

HTML 5.2 新特性

19450

扫码关注云+社区

领取腾讯云代金券