React series tutorial 1: Realize the effect of Animate.css official website

foreword

This is the first part of a series of React tutorials. We will use React to achieve the effect of the official website of Animate.css. The effect of the Animate.css official website is a very simple example. The original code is written in jQuery, which is the operation of adding and deleting classes. This is a very typical and simple example for learning React. However, I will not introduce the relevant prerequisite knowledge in the tutorial, such as JSX, ES6, etc., there will still be some confusion for Xiaobai, so you may also need to understand the basic knowledge of React. While there's a lot to learn about React, this series of tutorials focuses on the easy-to-understand basics. Forewarning, in the next tutorial, I will use React + Redux with you to write a cellular automata Langton ant program.

Effect demonstration

This tutorial is mainly to achieve the effect of Animate.css official website, and will not adjust the style details, so it is slightly plain visually. Here is the final result:

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

Because the effect of this case is very simple, for those who are already familiar with React, they can try to write the implementation themselves, or even skip this tutorial.

let's start

Write HTML structure

The entire tutorial is written in ES6 syntax and cannot be previewed directly in the browser, so it needs to be compiled with Babel. You can use the official create-react-app scaffolding to build a development environment. But for this tutorial, I recommend that you use the CodePen online platform to write, which is simple and straightforward, and does not require complex environment configuration.

Long-winded, in modern front-end programming, almost all page HTML elements are written in JS, which is indeed more conducive to DOM manipulation. Like traditional front-end development, we also write the HTML structure first, take a look at the basic prototype, and then add events bit by bit. code show as below:

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>

          // ...omit other animation options

        </select>
        <input type="button" value="Animate it"/>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

For friends who are familiar with ES6 syntax, the above is not difficult to understand. We wrote a React component and a rendering output statement.

About status

The biggest difference between React and jQuery (traditional front-end programming) is the way the DOM is manipulated. React updates the DOM through state changes, while the traditional way uses events to update the DOM. But React's state changes simply rely on event-driven. So for Xiaobai, don't have too much ideological baggage. The previous article introduced the difference between React and jQuery through a simpler example, and interested students can learn more about it. According to the official React specification, we add state in the following way:

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, but not the same as, binding events at DOM level 0.

Before adding events, let's take a look at what events are required. First, we need to add changean event to add an animation class when switching animations. Also, we need to remove the animation class when the animation ends, so we need to bind an animationendevent . Finally Animate it, add an clickevent to the button, click the button, you need to re-add the animation class.

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} >

          // ...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 basically over. For students who have just started to contact React or JS with a less solid foundation, they need to focus on understanding the reference problem of this in event binding. The above code uses arrow functions to solve thisthe reference. Generation problems, you can also use the bindmethod .

Summarize

I am not proficient in React, and I am writing this tutorial as a learner. Regarding React, I plan to write two tutorials, because React is not the technology I am focusing on now, so I will not discuss it in depth at this stage.