前言

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

React 系列教程 1:实现 Animate.css 官网效果的更多相关文章

  1. Beam编程系列之Python SDK Quickstart(官网的推荐步骤)

    不多说,直接上干货! https://beam.apache.org/get-started/quickstart-py/ Beam编程系列之Java SDK Quickstart(官网的推荐步骤)

  2. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  3. react系列教程

    这个系列将从基础语法讲起,把react全家桶都讲到,然后到具体的使用,最后完成后,会写一个完整的demo. 前置要求: 基本的CSS,JS要熟练. 部分ES6语法需要了解.可以参考下面提到的阮一峰老师 ...

  4. 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

  5. CSS--使用Animate.css制作动画效果

    一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   <!DOCTYPE h ...

  6. Beam编程系列之Java SDK Quickstart(官网的推荐步骤)

    不多说,直接上干货! https://beam.apache.org/get-started/beam-overview/ https://beam.apache.org/get-started/qu ...

  7. React 系列教程2:编写兰顿蚂蚁演示程序

    简介 最早接触兰顿蚂蚁是在做参数化的时候,那时候只感觉好奇,以为是很复杂的东西.因无意中看到生命游戏的 React 实现,所以希望通过兰顿蚂蚁的例子再学习一下 React. 兰顿蚂蚁的规则非常简单: ...

  8. React 系列教程

    英文版:https://reactjs.org/docs/create-a-new-react-app.html 中文版:https://doc.react-china.org/docs/hello- ...

  9. NGUI系列教程六(技能冷却的CD效果)

    今天来学习一下,如何利用NGUI做技能冷却的CD效果. 1,首先按之前的教程Create Your UI,Camera为Simple 2D 最终如下图: 2,添加一个按钮,Background 为一张 ...

随机推荐

  1. MyBatis(二):Select语句传递参数的集中方案

    从别人说的方案中看出,传递参数方案还挺多,不如自己整理下,以便以后使用过程中有个笔记回忆录. 1.传递一个参数的用法: 配置文件 <select id="getById" r ...

  2. 并发容器和框架之ConcurrentHashMap

    了解HashMap的人都知道HashMap是线程不安全的(多线程下的put方法达到一定大小,引发rehash,导致闭链,最终占满CPU),同时线程安全的HashTable效率又令人望而却步(每个方法都 ...

  3. 如何用elementui去实现图片上传和表单提交,用axios的post方法

    下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容 <!--这个组件主要用来研究upload这个elementui的上传插件组件--> & ...

  4. PHP+MySQL分页显示示例分析

    Web开发是今后分布式程式开发的主流,通常的web开发都要涉及到与数据库打交道,客户端从服务器端读取通常都是以分页的形式来显示,一页一页的阅读起来既方便又美观.所以说写分页程序是web开发的一个重要组 ...

  5. javascript 作用域链与执行环境

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 作用域.作用域链.执行环境.执行环境栈以及this的概念在javascript中非常重要,本人经常弄混淆, ...

  6. 浅谈SSRF漏洞

    SSRF漏洞是如何产生的? SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞.一般情况下,SSRF是要目标网站 ...

  7. [COGS 2258][HZOI 2015]复仇的序幕曲

    Description 你还梦不梦痛不痛,回忆这么重你怎么背得动 ----序言 当年的战火硝烟已经渐渐远去,可仇恨却在阿凯蒂王子的心中越来越深 他的叔父三年前谋权篡位,逼宫杀死了他的父王,用铁血手腕平 ...

  8. bzoj4919 [Lydsy1706月赛]大根堆

    Description 给定一棵n个节点的有根树,编号依次为1到n,其中1号点为根节点.每个点有一个权值v_i. 你需要将这棵树转化成一个大根堆.确切地说,你需要选择尽可能多的节点,满足大根堆的性质: ...

  9. codefroces 946F Fibonacci String Subsequences

    Description定义$F(x)$为$F(x−1)$与$F(x−2)$的连接(其中$F(0)="0"$,$F(1)="1"$)给出一个长度为$n$的$01$ ...

  10. [HAOI2007]覆盖问题

    题目描述 某人在山上种了N棵小树苗.冬天来了,温度急速下降,小树苗脆弱得不堪一击,于是树主人想用一些塑料薄膜把这些小树遮盖起来,经过一番长久的思考,他决定 用3个L*L的正方形塑料薄膜将小树遮起来.我 ...