ブログの内容は次のとおりです.
Programming with Mosh React Tutorial for Beginners [React js]
勉強の過程で書いたものです.
<合成コード>

import React, { Component, Fragment } from 'react';

class Counter extends Component {
    state = {
        count : 1,  
        tags: ["tag1", "tag2", "tag3"]     
    };
    render() { 
        return (
            <Fragment>                              
                <span  className={this.getBadgeClasses()}>{this.formatCount()}</span>
                <button className="btn btn-secondary btn-sm">Increment</button>
                <ul>{this.state.tags.map(tag => <li key={tag} >{tag}</li>)}</ul>
            </Fragment>
        );
    }
    getBadgeClasses() {
        let classes = "badge m-2 badge-";
        classes += this.state.count === 0 ? "warning" : "primary"; //엘로우 블루
        return classes;
    }
    formatCount() {
        const {count} = this.state; 
        const x = "ZERO";
        return count === 0 ? x : count;
    }
}

export default Counter;

Handling Events

次に、ユーザーがボタンをクリックすると、カートの数字が増加するようにコードを作成します.バニラjavascriptはaddEventListenerと似た概念である.
クリック時に開始する関数を作成し、クリックするボタンを編集します.

handleIncrement () {
        console.log("Increment Clicked", this);
        // 클릭시 호출될 메서드

<button onClick={this.handleIncrement} className="btn btn-secondary btn-sm">Increment</button>
// Button에 onClick을 이용해서 메서드와 연결

ここで注意すべき点は、JSXはhandleIncrement()ではなくhandleIncrement()を使用してコードを記述する必要があることです.呼び出しをスキップした結果ではなく、クリックするたびに呼び出されるからです.
前述したように、クリックするとIncrement Clickedが出力されますが、この出力は未定義になります.問題を解決しよう

Binding

上記の結果が出たのはjavascriptでは,thisが偶数のオブジェクトになる理由がないためである.オブジェクトでは、メソッドはそのメソッドを含むobjectを指すためです.したがって、メソッドとthisの関係には「バインド」が使用されます.

handleIncrement = () => {
        console.log("Increment Clicked", this);
    }

バインドは、次のArow関数を使用して実行できます.(ジェネレータによるベースバインドの詳細については、次を参照してください)
https://ko.reactjs.org/docs/handling-events.html
パラメータがある場合は、匿名関数処理後に渡す必要があります.

() => handleIncrement(매개변수명)

updating state

handleIncrement = () => {
 		console.log("Increment Clicked", this);
		this.state.count++;     
    }

ここで,クリック時値の増加を実現するために,コードを修正した.
しかし、実際にはクリックするたびに値は増加しません.反応器はsetState()法を用いて状態を動的に管理するためである.

handleIncrement = () => {
        console.log("Increment Clicked", this);
        this.setState({count: this.state.count + 1});
    } 

前述したように変更すると、正常に動作します.

setState()プロパティ

setState()の特性を見てみましょう.

setState()法は反応器の状態が変化することを伝える方法である.

その後、ステータスが変化した場合、render()が再呼び出される.これをレンダー

と呼びます

ですがsetstate()は非同期なので、renderをいつ呼び出すかは期待できません.

いずれにしてもrenderを呼び出すと仮想DOMが作成されます.new treeとold treeを比較すると、反応器は変更した要素のみを更新します.

実際にボタンをクリックしますが、formatCount()に変更し、spanラベルとformatCount()のみを更新します.

render() { 
        return (
            <Fragment>                              
                <span  className={this.getBadgeClasses()}>{this.formatCount()}</span>
                <button className="btn btn-secondary btn-sm">Increment</button>
                <ul>{this.state.tags.map(tag => <li key={tag} >{tag}</li>)}</ul>
            </Fragment>
        );
    }

参考資料
https://ko.reactjs.org/docs/getting-started.html
https://www.youtube.com/watch?v=Ke90Tje7VS0&t=916s