5分で反応JSを学んでください — 初心者向けチュートリアル

16308 ワード
tutorial react javascript jsx テキストリンク
このチュートリアルでは、非常に単純なアプリケーションを構築することによって反応の基本的な理解を与える.私は、私がコアでないと思わないすべてを去ります.
そして、もしそれがあなたの興味を火花、あなたがもっと勉強したい場合は、Scrimbaで私たちのチェックアウトすることができます.
でも今は基礎に集中しよう!

セットアップ
反応を始めるとき、あなたは、最も簡単なセットアップを可能にするべきですReact とReactDOM スクリプトタグを使用したライブラリ.
次のようになります.
<html>
<head>  
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>  
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>  
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>  
</head>  
<body>  
    <div id="root"></div>  
    <script type="text/babel">  

    /*   
    ADD REACT CODE HERE 
    */  

    </script>  
</body>  
</html>
また、Backupを書くためにJSXと呼ばれる何かを使用して、我々はBabelを輸入しました.JSXをプレーンJavaScriptに変換する必要がありますので、ブラウザで理解できます.
もっと気にかけたいことが二つあります.
  • The <div> の#root . これは我々のアプリのエントリポイントです.これは、我々の全体のアプリが住んでいるところです.
  • The <script type="text/babel"> 体のタグ.これは我々が我々の反応コードを書くところです.
    • あなたがコードで実験したいならば、チェックしてください

    コンポーネント
    反応のすべてはコンポーネントです、そして、これらは通常JavaScriptクラスの形をとります.コンポーネントを作成するにはReact-Component クラス.コンポーネントを作成しましょうHello :
    class Hello extends React.Component {  
    render() {  
        return <h1>Hello world!</h1>;  
    }  
}
    次に、コンポーネントのメソッドを定義します.この例では、1つのメソッドしか持っていませんrender() .
    内部render() あなたがページに描画するために反応するものの説明を返します.上記の場合、我々は単にそれを表示したいh1 テキストこんにちは、世界とタグ!インサイド.
    画面上にレンダリングする私たちの小さなアプリケーションを取得するには、我々も使用する必要がありますReactDOM.render() :
    ReactDOM.render(  
    <Hello />,   
    document.getElementById("root")  
);
    それで、我々が我々がつなぐ場所ですHello アプリケーションのエントリポイントを持つコンポーネント<div id="root"></div> ).

    So we’re simply saying: Hey React! Please render the Hello component inside the DOM node with an id of root!


    次のようになります.

    我々が見たHTMLの構文<h1> and <Hello/> ) 私が以前に述べたJSXコードです.それは実際にはHTMLではない、それははるかに強力です.あなたがそこで書くものは、DOMのHTMLタグとして終わります.
    次のステップは、データを処理するために我々のアプリを取得することです.

    取り扱いデータ
    反応のデータの2種類があります:小道具と状態.つの違いは最初に理解するために少しトリッキーなので、それは少し混乱を見つける心配しないでください.あなたがそれらと作業を開始すると簡単になります.
    重要な違いは、状態がプライベートで、コンポーネント自体の中から変更できます.小道具は外部であり、コンポーネント自体によって制御されません.これは、データを制御する階層の高いコンポーネントから渡されます.
    コンポーネントは内部状態を直接変更できます.それは直接その小道具を変更することはできません.
    まず小道具を詳しく見てみましょう.

    小道具
    我々Hello コンポーネントは完全に静的です.何があっても同じメッセージを出す.しかし、反応の大きな部分は再利用性であり、一度コンポーネントを書く能力を意味し、異なるユースケースでそれを再利用する.たとえば、異なるメッセージを表示します.
    このタイプの再利用性を達成するために、我々は小道具を加えます.これはコンポーネントに小道具を渡す方法です.
    ReactDOM.render(  
    <Hello message="my friend" />,   
    document.getElementById("root")  
);
    このプロップはmessage そして、私の友人は価値があります.このコンポーネントは、hellothis.props.message , このように:
    class Hello extends React.Component {  
    render() {  
        return <h1>Hello {this.props.message}!</h1>;  
    }  
}
    その結果、画面に表示されます.

    我々が書いている理由{this.props.message} というのは、JSXにJavaScript式を加えたいということを伝える必要があるからです.これはエスケープと呼ばれます.
    だから今、私たちは、ページ上の任意のメッセージをレンダリングできる再利用可能なコンポーネントがあります.ウーホー!
    しかし、コンポーネントが独自のデータを変更できるようにしたい場合はどうなりますか?その後、我々は代わりに状態を使用する必要があります!

    州
    反応中のデータを保存する他の方法は、コンポーネントの状態です.小道具と違って — コンポーネントによって直接変更できません — 国家はそうすることができる.
    だからあなたのアプリケーションのデータを変更する場合 — たとえば、ユーザーの相互作用に基づいて — アプリケーションのどこかのコンポーネントの状態に格納する必要があります.

    初期化状態
    状態を初期化するには、単に設定するthis.state にconstructor() クラスのメソッド.私たちの状態は、私たちのケースではmessage .
    class Hello extends React.Component {  

    constructor(){  
        super();  
        this.state = {  
            message: "my friend (from state)!"  
        };  
    }  

    render() {  
        return <h1>Hello {this.state.message}!</h1>;  
    }  
}
    我々が国家をセットする前に、我々は電話しなければなりませんsuper() コンストラクタで.これはthis 前に初期化されませんsuper() が呼び出されました.

    状態を変える
    状態を変更するには、単にこれを呼び出します.setstate ()で、引数として新しい状態オブジェクトを渡します.我々は、我々が呼ぶ方法の中でこれをしますupdateMessage .
    class Hello extends React.Component {  

    constructor(){  
        super();  
        this.state = {  
            message: "my friend (from state)!"  
        };  
        this.updateMessage = this.updateMessage.bind(this);   
   }

   updateMessage() {  
        this.setState({  
            message: "my friend (from changed state)!"  
        });  
    }

    render() {  
        return <h1>Hello {this.state.message}!</h1>;  
    }  
}

    Note: To make this work, we also had to bind the this keyword to the updateMessage method. Otherwise we couldn’t have accessed this in the method.



    イベントハンドラ
    次のステップは、クリックするボタンを作成することですupdateMessage() メソッド.
    それで、ボタンをボタンに加えましょうrender() メソッド:
    render() {  
  return (  
     <div>  
       <h1>Hello {this.state.message}!</h1>  
       <button onClick={this.updateMessage}\>Click me!</button>  
     </div>     
  )  
}
    ここでは、イベントリスナーをボタンにフックし、OnClickイベントを聞きます.これが引き起こされると、UpdateMessageメソッドを呼び出します.
    以下はコンポーネント全体です.
    class Hello extends React.Component {  

    constructor(){  
        super();  
        this.state = {  
            message: "my friend (from state)!"  
        };  
        this.updateMessage = this.updateMessage.bind(this);  
    }

    updateMessage() {  
        this.setState({  
            message: "my friend (from changed state)!"  
        });  
    }

    render() {  
         return (  
           <div>  
             <h1>Hello {this.state.message}!</h1>  
             <button onClick={this.updateMessage}/>Click me!</button>  
           </div>     
        )  
    }  
}
    UpdateMessageメソッドを呼び出します.setstat ()は、this.state.message 値.ボタンをクリックすると、どのようにして再生されますか

    おめでとう!今、反応の中で最も重要な概念の非常に基本的な理解を持っている.

    If you want to learn more, be sure to check out our


    符号化による幸運
    読書ありがとう!私の名前は一人です、私は共同創設者です、そして、私は人々が新しい技術を学ぶのを援助します.私に従ってください、そして、あなたが接触していたいならば.
    mysql IN FIND_IN_SETコントラスト
    Mysql8.0.15関連コマンド