Reactシリーズチュートリアル1:Animateを実現する.css公式サイトの効果

6028 ワード

前言
これはReactシリーズのチュートリアルの最初の編で、ReactでAnimateを実現します.css公式サイトの効果.アニメイトについてcss公式サイトの効果は非常に簡単な例で、元のコードはjQueryを使って作成され、クラスを追加したり削除したりする操作です.これはReactの勉強にとって非常に簡単な例ですが、JSXやES 6など、チュートリアルで前置知識を紹介するわけではありません.Reactには深い知識がたくさんありますが、このシリーズのチュートリアルは深い内容には触れません.
予告しますが、次のチュートリアルでは、React+Reduxを使用して、セルオートマチックラントンアリのプログラムを作成します.
効果のデモ
このチュートリアルでは、Animateを実装します.css公式サイトの効果は主で、スタイルの細部を調整することはできないので、視覚的には少し地味です.以下は、最終的に完了した効果です.
See the Pen react-animate-css by Zongbin (@nzbin) on CodePen.
このケースの効果は非常に簡単なので、Reactに詳しい初心者にとっては、このチュートリアルを省略することもできます.
始めよう
HTML構造の作成
チュートリアル全体はES 6構文で作成されており、ブラウザで直接プレビューすることはできません.Babelを使用してコンパイルする必要があります.公式のcreate-react-app足場を使用して開発環境を構築することができます.しかし、このチュートリアルでは、複雑な環境構成を必要とせずに、CodePenオンラインプラットフォームを使用して作成することをお勧めします.
くどくど言って、近代的なフロントエンドのプログラミングの中で、すべてのページのHTMLの要素はほとんどJSの中で書いて、これは確かにDOMの操作に有利です.従来のフロントエンド開発と同様に、HTML構造を書き、基本的な雛形を見てから、もう少しイベントを追加します.コードは次のとおりです.

class App extends React.Component{
  
  render (){
    return (
      
        Animate.css
        
        
      
    )
  }
}

ReactDOM.render(, document.getElementById('container'));

ES 6の文法に詳しい方には、上記の書き方がわかりやすく、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 (
      
        this.state.selected}`} onAnimationEnd={this.handleAnimationEnd}>Animate.css
        
        this.handleClick}/>
      
    )
  }
}

ReactDOM.render(, document.getElementById('container'));

イベントを追加した後、チュートリアル全体が基本的に終わりました.私のコードが一番ではないかもしれません.ReactやJSの基礎があまりしっかりしていない学生には、イベントバインド時のthisの指代問題を重点的に理解する必要があります.以上のコードは矢印関数を使用してthisの指代問題を解決し、bindの方法を使用することもできます.アニメーションに関する問題については、animationendとtransitionendの2つのイベントも理解します.
まとめ
このチュートリアルはReactの非常に基本的な独立した状態を使用する例で、他の複雑な概念はありませんので、初心者にぴったりです.強調して、私はReactに精通していないで、1人の学習者の姿勢でこの教程を書きます.Reactは私が今重点的に研究している技術ではないので、現段階ではあまり時間と精力を費やして勉強したくないが、この簡単なシリーズチュートリアルがReactを勉強したい新人を助けることができることを望んでいる.オリジナルチュートリアルのほか、私も前に2つの非常に優秀な実戦チュートリアルを翻訳したことがあります.興味のある学生はひっくり返して勉強することができます.

jqueryでmouseoverとhoverの方法の違いは?

Jqueryはマウスを上に移動してプロンプトボックスをポップアップし、消去構想とコードを移動することを実現する.