React+axios は github 検索ユーザー機能を実装します (サンプル コード)

React をインポートします。{ コンポーネント } を 'react' からインポートします。
「./App.css」をインポートします
'./commons/Header' からヘッダーをインポートします
'./commons/List' からリストをインポートします
デフォルトクラスAppをエクスポートし、Componentを拡張します。
  // 状態を初期化する
  状態={
    ユーザー:[],
    isloading:false、
    isfirst:true、
    エラー:''

  }
  更新=(更新メッセージ)=>{
     this.setState() は、
      更新メッセージ
     ）
  }
  与える（） {
    戻る （
      <div className="コンテナ">
        <ヘッダー更新={this.update} />
        <ユーザーのリスト={this.state}></リスト>
      </div>
    ）
  }
}

React をインポートします。{ コンポーネント } を 'react' からインポートします。
「axios」からaxiosをインポートします

デフォルトクラス Header をエクスポートし、Component を拡張します {
  検索=()=>{
     console.log(this.searchbtn.value);
     this.props.update({isfirst:false, isloading:true})
     axios.get(`http://localhost:3000/api1/search/users?q=${this.searchbtn.value}`).then(
      // 成功時のコールバック応答=>{
        
         console.log("リクエストを正常に送信しました",response.data.items);
         this.props.update({ユーザー: response.data.items,isloading:false})
       },
      // 失敗時のコールバックエラー=>{
        this.props.update({err:error.message,isloading:false})
          console.log("失敗",error.message);
      }
     ）
  } 

    与える（） {
        戻る （
            <セクション className="ジャンボトロン">
            <h3 className="jumbotron-heading">Github ユーザーを検索</h3>
            <div>
              <input type="text" placeholder="検索する名前を入力してください" 
               ref={c=>this.searchbtn=c}
              />
              &nbsp;
              <button onClick={this.search}>検索</button>
            </div>
          </セクション>
        ）
    }
}

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'./Listem' から Listitem をインポートします

デフォルトのクラスListをエクスポートし、Componentを拡張します。
  与える（） {
    戻る （
      <div クラス名="行">
        {
          this.props.users.isfirst ? <h2 style={{margin:"50px"}}>ようこそ、キーワードを入力してください</h2> :
          this.props.users.isloading ? <h2 style={{margin:"50px"}}>読み込み中......</h2> :
          this.props.users.err ? <h2 style={{margin:"50px"}}>{this.props.users.err}</h2> :
          this.props.users.users.map((a) => {
                  戻る （
                    <リスト項目キー={a.id} ユーザー={a} />
                  ）
                })
        }
      </div>
    ）
  }
}

React をインポートします。{ コンポーネント } を 'react' からインポートします。
「./index.css」をインポートします
エクスポートデフォルトクラスListitemはComponentを拡張します{
 
    与える（） {
        戻る （
            <div className="カード" >
            <a href={this.props.users.html_url} ターゲット="_blank" >
              <img src={this.props.users.avatar_url} スタイル={{ width: '100px' }} />
            </a>
            <p className="card-text">{this.props.users.login}</p>
          </div>
        ）
    }
}