react学习——20react编写github案列

1、List组件

index.js

javascript 复制代码
import React, {Component} from "react";
//引入样式
import "./index.css";
export default class List extends Component {
    render() {
        const {users,isFirst,isLoding,err}=this.props
        return(
            <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

javascript 复制代码
.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组件

javascript 复制代码
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=xxxxxx
        axios.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"/>&nbsp;
                    <button onClick={this.search}>Search</button>
                </div>
            </section>
        );
    }
}

3、App.js

javascript 复制代码
//创建"外壳"组件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

javascript 复制代码
//引入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>
);
相关推荐
王俊山IT19 分钟前
C++学习笔记----10、模块、头文件及各种主题(一)---- 模块(5)
开发语言·c++·笔记·学习
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
Mephisto.java1 小时前
【大数据学习 | kafka高级部分】kafka中的选举机制
大数据·学习·kafka
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0011 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
王解1 小时前
Jest项目实战(4):将工具库顺利迁移到GitHub的完整指南
单元测试·github
油泼辣子多加1 小时前
2024年11月4日Github流行趋势
github
南宫生2 小时前
贪心算法习题其三【力扣】【算法学习day.20】
java·数据结构·学习·算法·leetcode·贪心算法
梓羽玩Python2 小时前
推荐一款用了5年的全能下载神器:Motrix!全平台支持,不限速下载网盘文件就靠它!
程序员·开源·github
武子康3 小时前
大数据-212 数据挖掘 机器学习理论 - 无监督学习算法 KMeans 基本原理 簇内误差平方和
大数据·人工智能·学习·算法·机器学习·数据挖掘