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はシェルスクリプトを使用して履歴ログファイルを定期的に削除します

推薦する

アプレットにおけるwx.getUserProfileインターフェースの具体的な使用

最近、WeChatミニプログラムは、監査ミニプログラムのwx.loginおよびwx.getUserI...

MySQL 8.0.19 インストール詳細チュートリアル (Windows 64 ビット)

目次MySQLを初期化するMySQL サービスをインストール + MySQL サービスを開始MySQ...

MYSQL メタデータ ロック (MDL ロック) MDL ロックの問題分析

1. はじめにMYSQL の MDL ロックは常に頭痛の種でした。ロックについて話すとき、通常は I...

CSSのborder-radiusプロパティを使用して円弧を設定します

現象: divを一定の振幅で円、楕円などに変更する方法: CSSのborder-radiusプロパテ...

ES6 配列のコピーおよびフィルメソッド copyWithin() および fill() の具体的な使用法

目次バッチコピー copyWithin()配列を埋めるメソッド fill()指数の計算方法については...

MySQLの半同期の詳細な説明

目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...

ウェブ理論: 考えさせない読書ノート

第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...

IEの送信フォームの記録履歴クリックリターン情報を実現するためのCSSスタイルコントロールはまだ残っています

これは主に CSS スタイルのコントロールと META タグです。コードをコピーコードは次のとおりで...

収集する価値のあるCSS命名規則(ルール) よく使われるCSS命名規則

CSS命名規則(ルール) よく使われるCSS命名規則ヘッダー: ヘッダーコンテンツ: コンテンツ/コ...

MycliはMySQLコマンドライン愛好家にとって必須のツールです

マイクリMyCLI は、自動補完と構文の強調表示を備えた MySQL、MariaDB、および Per...

ウェブレスポンシブレイアウトにおけるiframe適応の方法

問題<br />レスポンシブ レイアウトでは、iframe 要素に注意する必要があります...

MySQL sql_mode の分析と設定の説明

昨夜、MySQL データベースにデータセットを挿入したときにエラーが発生しました。データベースは容赦...

初心者向け入門チュートリアル⑨:ポータルサイトの構築方法

さらに、ブログ プログラムで構築された記事 Web サイトは常にブログのように見え、カスタマイズでき...

開発効率の向上に役立つ 56 個の実用的な JavaScript ツール関数

目次1. デジタルオペレーション(1)指定された範囲内で乱数を生成する2. 配列操作(1)配列の順序...

MySQLの読み書き分離により挿入後にデータが選択されなくなる問題を解決

MySQLは独立した書き込み分離を設定します。コードに次のものを書くと問題が発生する可能性があります...