用 React 实现搜索 GitHub 用户功能

用 React 实现搜索 GitHub 用户功能

在本篇博客中,我们将介绍如何在 React 应用中搜索 GitHub 用户并显示他们的信息。

创建 React 应用

首先,我们使用 Create React App 创建一个新的 React 应用。Create React App 是一个快速搭建 React 项目的工具,它提供了一个现代化的开发环境,让我们能够专注于编写代码而不必担心配置问题。

npx create-react-app github-user-search

安装 axios

我们将使用 axios 来发起 HTTP 请求。Axios 是一个简单易用的 JavaScript HTTP 客户端,用于在浏览器和 Node.js 环境中进行 HTTP 请求。

npm install axios

编写搜索组件

接下来,我们创建一个名为 Search 的组件,用于输入搜索关键字并触发搜索操作。这个组件包含一个输入框和一个搜索按钮,用户可以在输入框中输入关键字,然后点击按钮或按下回车键进行搜索。

// Search.jsimport React, { Component } from 'react';export default class Search extends Component {state = {keyword: '',}onChange = (e) => {this.setState({ keyword: e.target.value });}onSearch = () => {const { keyword } = this.state;const { onSearch } = this.props;onSearch(keyword);}onKeyPress = (e) => {if (e.key === 'Enter') {this.onSearch();}}render() {return (<div className="input-group mb-3"><inputtype="text"className="form-control"placeholder="输入关键字"onChange={this.onChange}onKeyPress={this.onKeyPress}/><div className="input-group-append"><buttonclassName="btn btn-outline-secondary"type="button"onClick={this.onSearch}>搜索</button></div></div>)}
}

编写用户列表组件

接下来,我们创建一个名为 Users 的组件,用于显示搜索到的用户列表。这个组件接收一个用户列表作为 prop,并根据列表中的用户信息渲染用户卡片。

// Users.jsimport React, { Component } from 'react';
import User from './User';export default class Users extends Component {render() {const { users } = this.props;return (<div className="row row-cols-4 g-4">{users.map(user => <User key={user.node_id} user={user} />)}</div>)}
}

编写用户组件

然后,我们创建一个名为 User 的组件,用于显示单个用户的信息。这个组件接收一个用户对象作为 prop,并根据用户信息渲染用户卡片。

// User.jsimport React, { Component } from 'react';export default class User extends Component {render() {const { user } = this.props;return (<div className="border p-3 d-flex flex-column align-items-center" style={{ width: '240px' }}><imgsrc={user.avatar_url}alt={user.node_id}className="rounded-circle"style={{ width: '50px', height: '50px' }}/><h4 className="text-primary">{user.login}</h4></div>)}
}

编写应用主组件

最后,在 App 组件中集成上述组件,并实现搜索功能。这个组件是我们应用的入口点,它负责管理整个应用的状态和逻辑。

// App.jsimport React, { Component } from 'react';
import axios from 'axios';import Search from './Search';
import Users from './Users';export default class App extends Component {state = {users: [],}onSearch = async (keyword) => {const res = await axios.get(`/api/github/search/users?q=${keyword || 'h'}`);if (res && res.data) {this.setState({ users: res.data.items || [] });}}render() {const { users }= this.state;return (<div className="container" style={{ margin: '20px auto' }}><Search onSearch={this.onSearch} /><Users users={users} /></div>)}
}

部署并使用

现在,你可以部署你的应用,并开始搜索 GitHub 用户了!
在这里插入图片描述

参考

  • 用 React 实现搜索 GitHub 用户功能
  • 完整代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/704965.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MATLAB练习题:并行计算的parfor循环

​讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 在MATLAB中&#xff0c;parfor&#xff08;Parallel for&…

如何开始破解基于 Django 的应用程序

Django 是一个基于Python 的Web 框架。在这篇文章中,我将教你如何分析基于 django 的应用程序。在这篇文章中,我将使用 wagtail 作为示例。对我来说,在进行静态代码分析时,最重要的部分是确定如何注册和处理路由,这就是我们将在本文中介绍的内容。 在我们开始之前,我建议…

各平台,各语言基础数据类型占用字节比较

以下是在不同系统平台和编程语言中常见数据类型的字节数比较的整合表格。需要注意的是&#xff0c;这里列出的是通常情况下的数据类型大小&#xff0c;具体实现可能会有所不同。另外&#xff0c;对于Python和Golang而言&#xff0c;由于它们是解释型语言和编译型语言&#xff0…

springboot/ssm高校宣讲会管理系统Java企业招聘宣讲系统web

演示视频&#xff1a;https://www.bilibili.com/video/BV1vz421R7cg/、 基于springboot(可改ssm)vue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&am…

30-k8s集群的七层代理-ingress资源(进阶知识)

一、ingress概述 1&#xff0c;引发问题 目前使用svc资源做网络暴露&#xff0c;使用nodeport类型&#xff0c;一个业务对应一个宿主机端口&#xff0c;那么如果业务多了&#xff0c;所占用的宿主机端口也就多了&#xff0c;虽然说宿主机端口一般情况下都是够用的&#xff0c;…

python自动化管理和zabbix监控网络设备(有线网络和路由配置部分)

目录 目录 一、拓扑图 二、core-sw1 三、core-sw2 四、sum-sw1 五、sum-sw2 六、FW1 七、DMZ-SW1 结语 一、拓扑图 二、core-sw1 sys sysname core-sw1 vlan batch 10 20 30 40 50 60 100 vlan batch 200 210 220 230 240 250 stp region-configuration region-name…

【Java设计模式】一、工厂模式、建造者模式、原型设计模式

文章目录 1、简单工厂模式2、工厂方法模式3、抽象工厂模式4、建造者模式5、原型设计模式 设计模式即总结出来的一些最佳实现。23种设计模式可分为三大类&#xff1a; 创建型模式&#xff1a;隐藏了创建对象的过程&#xff0c;通过逻辑方法进行创建对象&#xff0c;而不是直接n…

贝叶斯核机器回归拓展R包:bkmrhat

1.摘要 bkmrhat包是用于扩展bkmr包的贝叶斯核机器回归&#xff08;Bayesian Kernel Machine Regression, BKMR&#xff09;分析工具&#xff0c;支持多链推断和诊断。该包利用future, rstan, 和coda包的功能&#xff0c;提供了在贝叶斯半参数广义线性模型下进行identity链接和 …

CUDA编程 - 用向量化访存优化 - Cuda elementwise - Add(逐点相加)- 学习记录

Cuda elementwise - Add 一、简介1.1、ElementWise Add1.2、 float4 - 向量化访存 二、实践2.1、如何使用向量化访存2.1、简单的逐点相加核函数2.2、ElementWise Add float4&#xff08;向量化访存&#xff09;2.3、完整代码 一、简介 1.1、ElementWise Add Element-wise 操作…

替代 Intercom 和 Zendesk: 开源的客户互动套件 | 开源日报 No.183

chatwoot/chatwoot Stars: 17.8k License: NOASSERTION chatwoot 是一个开源的客户互动套件&#xff0c;是 Intercom、Zendesk、Salesforce Service Cloud 等的替代品。 该项目主要功能、关键特性和核心优势包括&#xff1a; 支持多种对话渠道&#xff0c;如网站、Facebook、…

2024022601-数据库语言SQL

数据库语言SQL SQL的发展 1974年&#xff0c;由Boyce和Chamberlin提出 1975~1979&#xff0c;IBM San Jose Research Lab的关系数据库管理系统原型System R实施了这种语言 SQL-86是第一个SQL标准 SQL-89、SQL-92(SQL2)、SQL-99(SQL3) 非过程化语言 SQL语言进行数据库操作…

【 C++ 】闭散列哈希表的模拟实现

哈希节点状态 我们都很清楚数组里的每一个值无非三种状态&#xff1a; 如果某下标没有值&#xff0c;则代表空EMPTY。如果有值在代表存在EXIST。如果此位置的值被删掉了&#xff0c;则表示为DELETE。 而这三种状态我们可以借助enum枚举来帮助我们表示数组里每个位置的状态。…

亿道推出重磅加固平板!为行业发展注入新动力

随着科技生产力的不断发展&#xff0c;各行各业都得到质的飞跃。产品的迭代速度也大大加快&#xff0c;作为全球领先的加固行移动终端一站式提供商&#xff0c;亿道信息跟紧时代潮流&#xff0c;推出EM-I10J、EM-I20J两款均衡型加固平板&#xff0c;为行业发展注入新动力。 接地…

【Python笔记-设计模式】命令模式

一、说明 命令模式是一种行为设计模式&#xff0c;旨在对命令的封装&#xff0c;根据不同的请求将方法参数化、延迟请求执行或将其放入队列中&#xff0c;且能实现可撤销操作。 (一) 解决问题 将请求发送者和接受者解耦&#xff0c;请求发送者只需知道如何发送请求&#xff…

LVGL 环境搭建-基于WSL

背景说明 小白刚开始接触LVGL&#xff0c;前些日子狠心花198元入手了一块堪称LVGL 入门利器~HMI-Board 开发板&#xff0c;虽然有RT-Thread 集成好的LVGL 环境&#xff0c;只需要几个步骤就能成功把lvgl 的示例运行起来&#xff0c;对于爱折腾的我来说&#xff0c;过于简单也并…

Sora专辑|AI视频制作新时代的曙光:OpenAI Sora 模型启示录

本文深入剖析 OpenAI 最新发布的人工智能视频生成模型 Sora 的工作原理,并探讨它对电影制作行业的深远影响。Sora 利用海量数据和强大的计算能力,学习视频的"语法规则"即物理定律,从而生成逼真的视频画面。Sora 将从根本上改变电影制作的方式,降低制作成本、赋能…

融合快慢路径:SlowFast Networks引领视频行为识别新纪元

SlowFast Networks for Video Recognition 的技术原理 随着深度学习和计算机视觉技术的快速发展&#xff0c;视频行为识别成为了一个备受关注的研究领域。SlowFast Networks&#xff0c;由Facebook AI研究院&#xff08;FAIR&#xff09;提出的一个通用行为识别框架&#xff0…

OWASP发布AI大模型应用网络安全治理检查清单

文章目录 前言一、部署大模型之前的准备LLM部署策略的选择方案AI大模型的常见部署类型二、大模型应用时的安全检查清单1、对抗性风险2、威胁建模3、AI资产盘点4、AI安全和隐私培训5、建立并参考商业案例6、公司治理7、法律合规8、实现大模型解决方案9、测试、评估、验证和确认(…

vue2、vue3各自的响应式原理

查看本专栏目录 关于作者 还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#x…

小龙虾优化算法COA求解不闭合MD-MTSP,可以修改旅行商个数及起点(提供MATLAB代码)

一、小龙虾优化算法COA 小龙虾优化算法(Crayfsh optimization algorithm,COA)由Jia Heming 等人于2023年提出,该算法模拟小龙虾的避暑、竞争和觅食行为,具有搜索速度快,搜索能力强,能够有效平衡全局搜索和局部搜索的能力。 参考文献: [1] Jia, H., Rao, H., Wen, C.…