1、List組件
index.js
import React, {Component} from "react";
//引入樣式
import "./index.css";
export default class List extends Component {render() {const {users,isFirst,isLoding,err}=this.propsreturn(<div className="row">{isFirst?<h2>歡迎使用，輸入關鍵字，隨后點擊搜素</h2>:isLoding?<h2>正在加載中...</h2>:err?<h2 style={{color:'red'}}>{err}</h2>:users.map((userObj)=>{return(<div key={userObj.id} className="card"><a href={userObj.html_url} target="_blank" rel="noreferrer"><img alt={"reactjs"} src={userObj.avatar_url} style={{width: '100px'}}/></a><p className="card-text">{userObj.login}</p></div>)})}</div>);}
}
index.css
.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;
}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;
}.card > img {margin-bottom: .75rem;border-radius: 100px;
}.card-text {font-size: 85%;
}2、search組件
import React, {Component} from "react";
//引入axios
import axios from 'axios';
export default class Search extends Component {search = () =>{//獲取用戶的輸入(連續解構賦值+重命名)const {keyword:{value:keyword}} = this;//發送請求前通知App組件更新狀態this.props.updateAppState({isFirst:false,isLoding: true});//發送網絡請求 https://api.github.com/search/users?q=xxxxxxaxios.get(`https://api.github.com/search/users?q=${keyword}`).then(res=>{const {items} = res.data;this.props.updateAppState({isLoding:false,users:items});console.log(items)},err=>{//請求失敗通知App組件更新狀態this.props.updateAppState({isLoding:false,err:err.message});})}render(){return(<section className="jumbotron"><h3 className="jumbotron-heading">Search Github Users</h3><div><input ref={c=>this.keyword=c} type="text" placeholder="enter the name you search"/> <button onClick={this.search}>Search</button></div></section>);}
}
3、App.js
//創建“外殼”組件APP
import React, {Component} from "react";
//引入Search組件
import Search from "./components/Search";
//引入List組件
import List from "./components/List";
//創建并暴露App組件
export default class App extends Component {state={users:[],isFirst:true,//是否第一次加載數據isLoding:false,//是否正在加載數據err:''//是否加載失敗}updateAppState=(stateObj)=>{this.setState({...stateObj})}render() {return (<div className="container"><Search updateAppState={this.updateAppState}></Search><List {...this.state}></List></div>)}
}
5、index,js
//引入React核心庫
import React from 'react';
//引入ReactDOM
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(// <React.StrictMode>作用：在開發模式下，React 會在渲染組件時檢查其代碼，以發現一些常見錯誤。<React.StrictMode><App /></React.StrictMode>
);
)
