React Series Tutorial 1: Achieve ANIMATE.CSS official website effect

Objective

This is the first React series tutorial, we will use React to achieve the effect of ANIMATE.CSS official website. For the ANIMATE.CSS official website effect is a very simple example, the original code is written in JQuery, is to add classes and delete class operations. This is a very simple example of learning React, but I will not introduce the relevant pre-knowledge in the tutorial, such as JSX, ES6, and so on, there may be some confusion for small white, so also to understand React related basic knowledge. Although React has a lot to learn, this series of tutorials does not cover tall and deep content.

In the next tutorial, I'll use React + Redux to write a cellular automaton Langton Ant program.

Effect Demo

This tutorial to achieve ANIMATE.CSS official website effect, not to adjust the style details, so visually slightly simple. The following are the final results:

See the Pen react-animate-css by Zongbin (@nzbin) on Codepen.

Because this case is very simple, for beginners who are already familiar with React, you can try to write your own implementation, or even skip this tutorial.

Get started. Writing HTML structures

The entire tutorial is written in ES6 syntax and cannot be previewed directly in the browser, so you need to compile with Babel, and you can use the official Create-react-app scaffolding to build the development environment. But for this tutorial, I recommend that you use the Codepen online platform to write, simple and straightforward, without the need for complex environment configuration.

Wordy, in the modern front-end programming, all the page HTML elements are almost written in JS, which is really more conducive to DOM operation. As with the traditional front-end development, we also first write out the HTML structure, first look at the basic prototype, and then 1.1 points to add the event up. The code is as follows:

class App extends react.component{render () {return (      <div> // ... Omit other animation options</select> <input type= "button" value= "Animate it"/> </div>)}}reactdom.render (<app/>, document.getElementById (' container '));

For those familiar with ES6 grammar, the above writing is not difficult to understand, we have written a React component and a render output statement.

About states

The biggest difference between React and jQuery (traditional front-end programming) is the way DOM operates, React updates the DOM through state changes, while the traditional approach uses events to update the DOM. However, React's state change is simply dependent on event-driven. So for small Bailai said not to have too much thought baggage. The previous article, "How to use Reactjs in an existing WEB application", introduces the differences between React and jQuery through a simpler example, which interested students can look at in detail. In accordance with the React official specification, we add states in the following ways:

class App extends react.component{  Constructor (props) {    super (props);     this. State = {      selected:'    }}  }

Add Event

The way JQuery adds events is to get the reference element and then bind the event, while React binds the event directly on the element through JSX (which can be simply understood as a template string). This approach is similar to the DOM level 0 binding event, but it is not the same.

Before adding an event, let's look at what events are needed. First, we need to add an event to the selection box to change add an animation class when switching animations. Also, when the animation is finished we need to remove the animation class, so we need to bind an animationend event. Finally, Animate it add an event to the button, click click the button, and add the animation class again.

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> 
 This. state.selected} '} onanimationend={ This.handleanimationend}>animate.css This. HandleChange} >// ... Omit animation Options</select> <input type= "button" value= "Animate It" onclick={ This.handleclick}/> </div>)}}reactdom.render (<app/>, document.getElementById (' container '));

After adding the event, the whole tutorial is almost over, perhaps my code is not the best. For the first contact React or JS Foundation is not very solid classmate, need to focus on the event binding timing this of the reference problem, the above code using the arrow function to solve this the reference problem, you can also use the bind method. For issues involving animations, also understand animationend and transitionend two events.

Summarize

This tutorial is an example of React's very basic use of independent States, and there are no other complex concepts that are ideal for beginners. Stressed that I am not proficient in React, but also in a learner's posture to write this tutorial. Because React is not the technology I focus on now, so I don't want to spend too much time and energy to study at this stage, but I hope this simple series of tutorials can help the new people who want to learn React. In addition to the original tutorial, I have also translated two very good practical tutorials, interested students can be turned out to learn a bit.

React Series Tutorial 1: Achieve ANIMATE.CSS official website effect