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

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

ここに画像の説明を挿入

負荷

ここに画像の説明を挿入

リクエスト成功

ここに画像の説明を挿入

リクエストに失敗しました

ここに画像の説明を挿入

cmdをクリックし、ファイルパスでEnterキーを押します

ここに画像の説明を挿入

ここに画像の説明を挿入
ここに画像の説明を挿入

まず、npm startでサーバーを起動します。

ここに画像の説明を挿入

アプリ

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

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

ヘッダー.jsx

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>
          </セクション>
        )
    }
}

リスト.jsx

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

react+axios を使って github ユーザーを検索する機能を実装するこの記事はこれで終わりです。もっと関連のある react axios github 検索コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を続けて閲覧してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Reactでaxiosを使用してリクエストを送信する一般的な方法
  • React Nativeでaxiosを使用してネットワークリクエストを行う方法
  • 1 つ以上のドメイン名への React axios クロスドメイン アクセス

<<:  MySQL Truncate の使用方法の詳細な説明

>>:  Linuxはシェルスクリプトを使用して履歴ログファイルを定期的に削除します

推薦する

MySQL 8.0.25 解凍版のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.25解凍版のインストールチュートリアル、参考までに具体的な内容は以下のとおりです...

Nginx リクエスト制限の設定方法

Nginx は、多くの優れた機能を備えた強力で高性能な Web およびリバース プロキシ サーバーで...

データベース管理に役立つ 5 つの MySQL GUI ツール

MySQL には多くのデータベース管理ツールがあります。作業効率の向上に役立つ優れた GUI ツール...

MySQL での r2dbc の使用に関する詳細な理解

導入MySQL は、私たちが日常業務で使用する非常に一般的なデータベースです。MySQL は現在 O...

MySQL データベース操作 (作成、選択、削除)

MySQL データベースの作成MySQL サービスにログインしたら、create コマンドを使用し...

MySQLはインデックスプッシュダウンを数秒で理解するのに役立ちます

目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...

Centos7.5でのIPアドレス設定の実装

1. IPアドレスを設定する前に、まずifconfigを使用してネットワークカード情報を表示し、ネッ...

div の水平レイアウトを両側に揃える 3 つの方法

この記事では、主に、div の水平レイアウトの両側の配置を実装する 3 つの方法を紹介し、それらを共...

JSオブジェクトの走査順序の詳細な説明

JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...

QQブラウザ機能を実装するためのCSS

コード知識ポイント1. fullpage.jsを組み合わせてフルスクリーンスクロールを実現する2. ...

ECMAScriptにおけるプリミティブ値と参照値の詳しい説明

目次序文動的プロパティとは何ですか?値のコピー値の種類を決定する要約する序文これは JavaScri...

Vue で 3D タグ クラウドを実装するための詳細なコード

プレビュー: コード:ページセクション: <テンプレート> <div class=...

Linux/CentOS サーバー セキュリティ構成の一般ガイド

Linux はオープン システムです。インターネット上には、既成のプログラムやツールが多数存在します...

Centos7環境でMySQL 5.6のインスタンスを複数作成する方法の詳細な説明

この記事では、CentOS 7 環境で MySQL 5.6 の複数のインスタンスを作成する方法につい...

MySQL の一般的な SQL ステートメントの概要

1. mysqlエクスポートファイル: SELECT `pe2e_user_to_company`....