React+axios implementiert die Suchbenutzerfunktion von GitHub (Beispielcode)

importiere React, {Komponente} von 'react'
importiere "./App.css"
Header aus „./commons/Header“ importieren
Liste aus „./commons/List“ importieren
exportiere Standardklasse App erweitert Komponente {
  // Status initialisieren
  Zustand={
    Benutzer:[],
    wird geladen:false,
    ist zuerst: wahr,
    ähm:''

  }
  update=(Aktualisierungsnachricht)=>{
     dies.setState(
      Aktualisierungsnachricht
     )
  }
  rendern() {
    zurückkehren (
      <div Klassenname="Container">
        <Header-Update={dieses.Update} />
        <Benutzer auflisten={this.state}></List>
      </div>
    )
  }
}

importiere React, {Komponente} von 'react'
Axios von „Axios“ importieren

exportiere Standardklasse Header erweitert Komponente {
  suche=()=>{
     Konsole.log(dieser.searchbtn.value);
     dies.props.update({isfirst:false, isloading:true})
     axios.get(`http://localhost:3000/api1/search/users?q=${this.searchbtn.value}`).then(
      // Callback-Antwort bei Erfolg=>{
        
         console.log("Anfrage erfolgreich gesendet",response.data.items);
         this.props.update({Benutzer: response.data.items,wird geladen:false})
       },
      // Callback-Fehler bei Fehler=>{
        dies.props.update({err:error.message,isloading:false})
          console.log("fehlgeschlagen",Fehlermeldung);
      }
     )
  } 

    rendern() {
        zurückkehren (
            <Abschnitt Klassenname="jumbotron">
            <h3 className="jumbotron-heading">Github-Benutzer suchen</h3>
            <div>
              <input type="text" placeholder="Geben Sie den gesuchten Namen ein" 
               ref={c=>this.searchbtn=c}
              />
              &nbsp;
              <button onClick={this.search}>Suchen</button>
            </div>
          </Abschnitt>
        )
    }
}

importiere React, {Komponente} von 'react'
Listitem aus './Listem' importieren

exportiere Standardklasse Liste erweitert Komponente {
  rendern() {
    zurückkehren (
      <div Klassenname="Zeile">
        {
          this.props.users.isfirst ? <h2 style={{margin:"50px"}}>Willkommen bei uns, bitte geben Sie das Schlüsselwort ein</h2> :
          this.props.users.isloading ? <h2 style={{margin:"50px"}}>Wird geladen......</h2> :
          dies.props.users.err ? <h2 style={{margin:"50px"}}>{this.props.users.err}</h2> :
          diese.props.users.users.map((a) => {
                  zurückkehren (
                    <Listenelementschlüssel={a.id} Benutzer={a} />
                  )
                })
        }
      </div>
    )
  }
}

importiere React, {Komponente} von 'react'
importiere "./index.css"
exportiere Standardklasse Listitem erweitert Komponente {
 
    rendern() {
        zurückkehren (
            <div Klassenname="Karte" >
            <a href={this.props.users.html_url} Ziel="_blank" >
              <img src={this.props.users.avatar_url} style={{ width: '100px' }} />
            </a>
            <p className="card-text">{this.props.users.login}</p>
          </div>
        )
    }
}