专栏首页小丞前端库React 入门学习(八)-- GitHub 搜索案例

React 入门学习(八)-- GitHub 搜索案例

📢 大家好,我是小丞同学,一名大二的前端爱好者 📢 这篇文章是学习 React 中 GitHub 搜索案例的学习笔记 📢 非常感谢你的阅读,不对的地方欢迎指正 🙏 📢 愿你忠于自己,热爱生活

引言

本文主要介绍 React 学习中 Github 搜索案例,这个案例主要涉及到了 Axios 发送请求,数据渲染以及一些中间交替效果的实现

个人感觉在做完 TodoList 案例之后,这个案例会很轻松,只是多加了一个 Loading 效果的实现思路,以及一些小细节的完善,感觉练练手还是很不错的

一、实现静态组件

和之前的 TodoList 案例一样,我们需要先实现静态组件,在实现静态组件之前,我们还需要拆分组件,这个页面的组件,我们可以将它拆成以下两个组件,第一个组件是 Search,第二个是 List

接下来我们需要将提前写好的静态页面,对应拆分到组件当中

注意:

  1. class 需要改成 className
  2. style 的值需要使用双花括号的形式

最重要的一点就是,img 标签,一定要添加 alt 属性表示图片加载失败时的提示。

同时,a 标签要添加 rel="noreferrer"属性,不然会有大量的警告出现

二、axios 发送请求

在实现静态组件之后,我们需要通过向 github 发送请求,来获取相应的用户信息

但是由于短时间内多次请求,可能会导致请求不返回结果等情况发生,因此我们采用了一个事先搭建好的本地服务器

我们启动服务器,向这个地址发送请求即可

这个请求类型是 GET 请求,我们需要传递一个搜索的关键字,去请求数据

我们首先要获取到用户点击搜索按钮后输入框中的值

在需要触发事件的 input 标签中,添加 ref 属性

 <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索" />

我们可以通过 this.keyWordElement 属性来获取到这个当前节点,也就是这个 input

我们再通过 value 值,即可获取到当前 input 框中的值

// search 回调
const { keyWordElement: { value: keyWord } } = this

这里采用的是连续的解构赋值,最后将 value 改为 keyWord ,这样好辨别

获取到了 keyWord 值,接下来我们就需要发送请求了

axios.get(`http://localhost:3000/api1/search/users?q=${keyWord}`).then(
    response => {
        this.props.updateAppState({ isLoading: false, users: response.data.items })
    },
    error => {
        this.props.updateAppState({ isLoading: false, err: error.message })
    }
)

我们将 keyWord 接在请求地址的后面,来传递参数,以获得相关数据

这里会存在跨域的问题,因我我们是站在 3000 端口向 5000 端口发送请求的

因此我们需要配置代理来解决跨域的问题,我们需要在请求地址前,加上启用代理的标志 /api1

// setupProxy.js
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
    app.use(
        proxy('/api1', {
            target: 'http://localhost:5000',
            changeOrigin: true,
            pathRewrite: {
                '^/api1': ''
            }
        })
    )
}

这样我们就能成功的获取到了数据

三、渲染数据

在获取到了数据之后,我们需要对数据进行分析,并将这些数据渲染到页面上

比较重要的一点是,我们获取到的用户个数是动态的,因此我们需要通过遍历的方式去实现

同时我们的数据当前存在于 Search 组件当中,我们需要在 List 组件中使用,所以我们需要个 Search 组件传递一个函数,来实现子向父传递数据,再通过 App 组件,向List 组件传递数据即可得到 data

users.map((userObj) => {
  return (
    <div key={userObj.id} className="card">
      <a rel="noreferrer" href={userObj.html_url} target="_blank">
        <img alt="avatar" src={userObj.avatar_url} style={{ width: '100px' }} />
      </a>
      <p className="card-text">{userObj.login}</p>
    </div>
  )
})

这里我们通过 map 遍历整个返回的数据,来循环的添加 card 的个数

同时将一些用户信息添加到其中

四、增加交互

做到这里其实已经完成了一大半了,但是似乎少了点交互

  • 加载时的 loading 效果
  • 第一次进入页面时 List 组件中的欢迎使用字样
  • 在报错时应该提示错误信息

这一些都预示着我们不能单纯的将用户数据直接渲染,我们需要添加一些判断,什么时候该渲染数据,什么时候渲染 loading,什么时候渲染 err

首先我们需要增加一些状态,来指示我们该渲染什么,比如

  • 采用 isFrist 来判断页面是否第一次启动,初始值给 true,点击搜索后改为 false
  • 采用 isLoading 来判断是否应该显示 Loading 动画,初始值给 false,在点击搜索后改为 true,在拿到数据后改为 false
  • 采用 err 来判断是否渲染错误信息,当报错时填入报错信息,初始值给空
state = { users: [], isFirst: true, isLoading: false, err: '' }

这样我们就需要改变我先前采用的数据传递方式,采用更新状态的方式,接收一个状态对象来更新数据,这样就不用去指定什么时候更新什么,就可以减少很多不必要的函数声明

同时在 App 组件给 List 组件传递数据时,我们可以采用解构赋值的方式,这样可以减少代码量

// App.jsx
// 接收一个状态对象
updateAppState = (stateObj) => {
    this.setState(stateObj)
}
<Search updateAppState={this.updateAppState} />
<List {...this.state} />

这样我们只需要在 List 组件中,判断这些状态的值,来显示即可

// List/index.jsx
// 对象解构
const { users, isFirst, isLoading, err } = this.props
// 判断
{
  isFirst ? <h2>欢迎使用,输入关键字,点击搜索</h2> :
    isLoading ? <h2>Loading...</h2> :
      err ? <h2 style={{ color: 'red' }}>{err}</h2> :
        users.map((userObj) => {
          return (
           // 渲染数据块
           //为了减少代码量,就不贴了
          )
        })
}

我们需要先判断是否第一次,再判断是不是正在加载,再判断有没有报错,最后再渲染数据

我们的状态更新是在 Search 组件中实现的,在点击搜索之后数据返回之前,我们需要将 isFirst 改为 falseisLoading 改为 true

接收到数据后我们再将 isLoading 改为 false 即可

以上就是 Github 搜索案例的实现过程

最终效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React 入门学习(六)-- TodoList 案例

    TodoList 案例在前端学习中挺重要的,从原生 JavaScript 的增删查改,到现在 React 的组件通信,都是一个不错的案例,这篇文章主要记录,还原...

    小丞同学
  • 干货 | GitHub 寻宝指南

    作为一个资深的咨询师、程序员,GitHub 是我用过的最好工具,因为 Google 并非总是那么用。GitHub 是一个宝藏库,可没有藏宝图,GitHub 一 ...

    AI科技评论
  • 前端资源分享-只为更好前端

    阅读更多 本文在GitHub的地址GitHub Front-end-resources

    WEBING
  • 不会这些搜索技巧,别说你懂GitHub!

    很多的小伙伴,经常会有这样的困惑,我看了很多技术的学习文档、书籍、甚至视频,我想动手实践,于是我打开了GitHub,想找个开源项目,进行学习,获取项目实战经验。...

    杰哥的IT之旅
  • 前端开发学习-UI库MDB

    目前我在工作之余,会对自己进行一些能力的提升和加强,除了对自己硬实力有提升的网课,我始终还是没有放弃自学前端开发,毕竟开发一个自己的个人网站,是我一直都想做的事...

    筑梦师winston
  • 小程序开发框架对比(wepy/mpvue/uni-app/taro)

    uni-app 团队投入两周完成了这个深度评测,下面我们就分享下,实际开发不同框架的测试例时遇到的问题,以及在各端的兼容测试结果。在本文里,我们团队基于真实测...

    码客张
  • 前端大牛们都学过哪些东西?

    单纯的技术层面也就是上述的那些个东西。如果某个同学都学会了上面的那些东西,是不是就能完全的胜任前端开发工作呢?

    web前端教室
  • 在前端,如何针对特意功能高效技术选型?

    由于业务需求,我需要一个 React 的弹框组件,我应如何快速选择一个合适的 npm 库?

    山月
  • 前端资源、交流社区、技术博客等整理总汇

    最近看到这篇前端资源总汇的文章,整理的非常详细,于是搬过来,方便自己后期查阅,侵删。

    德顺
  • GitHub最大更新:直接运行代码;人工智能凉了?年度报告揭示真相

    很简单,以后你不光能在GitHub上存储和搜索代码,而且还能直接运行部分代码。这个期待已久的更新获得一致好评。详情如何,下面我们会仔细说。

    量子位
  • GitHub最大更新:直接运行代码;人工智能凉了?年度报告揭示真相

    很简单,以后你不光能在GitHub上存储和搜索代码,而且还能直接运行部分代码。这个期待已久的更新获得一致好评。详情如何,下面我们会仔细说。

    磐创AI
  • GitHub 最大更新:直接运行代码;人工智能凉了?年度报告揭示真相

    很简单,以后你不光能在 GitHub 上存储和搜索代码,而且还能直接运行部分代码。这个期待已久的更新获得一致好评。详情如何,下面我们会仔细说。

    崔庆才
  • 前端资源分享——只为更好前端

    一、团队组织 网站说明腾讯 AlloyTeam 团队腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究ISUX腾讯社交用户体验设计,简称ISUX,腾...

    wangxl
  • 业界 | GitHub发布代码运行平台Actions及2018年度报告

    欧洲反垄断局表示,他们确定「二者合并后将继续面临来自其他同行的持续、激烈竞争。」当局也不担心微软会「破坏 GitHub 的开放性」,他们指出,如果微软对该平台的...

    机器之心
  • 适合 JS 新手学习的开源项目——在 GitHub 学编程

    这里是 HelloGitHub 的《GitHub 上适合新手的开源项目》系列的最后一篇,系列文章:

    HelloGitHub
  • 最全前端资源汇总

    一、概要 这份汇总整理,很程度上参考了GitHub最全前端资源汇总;云集前端教程、开发资源、免费书籍、手册规范、求职面试等等,旨在为前端学习 & 技能提升提供方...

    张果
  • SEO 在 SPA 站点中的实践

    观察基于 create-react-doc 搭建的文档站点, 发现网页代码光秃秃的一片(见下图)。这显然是单页应用 (SPA) 站点的通病 —— 不利于文档被搜...

    牧云云
  • github 项目搜索技巧-让你更高效精准地搜索项目

    干啥的?相当于给搜索结果添加过滤条件,看下下面的案例你就知道啦,过滤 github 的搜索结果,更精确搜索项目

    suwanbin
  • 从零使用electron搭建桌面端Dooring

    之前有朋友希望我基于H5-Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooring-e...

    徐小夕

扫码关注云+社区

领取腾讯云代金券