前言
这是 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 的新人。除了原创教程之外,我在之前也翻译过两篇非常优秀的实战教程,感兴趣的同学可以翻出来学习一下。
本文暂时没有评论,来添加一个吧(●'◡'●)