使用ReactJS构建GitHub配置文件-DEV365 开发者社区

这是我在AltSchoolAfrica的第二学期考试的一部分建立的项目。

介绍

任务是构建一个React应用程序，以获取我的GitHub Portfolio，并使用以下关键功能

在Github上显示一个我所有存储库列表的页面
在使用React中的所有必要工具时，请使用嵌套路由显示另一个页面，该页面链接到每个存储库。
实施适当的SEO（搜索引擎优化）
实施错误边界功能
添加404页。

您可以在Github上找到源代码，并且App在here

上托管

让我通过我在创建此项目时遵循的步骤。

脚手架应用程序

第一步是使用create-react-app使用create-react-app使用npx create-react-app github_profile在我的终端上使用create-react-app进行脚克式应用程序，之后我将目录更改为项目文件夹，然后在终端上ran命令yarn start在http://localhost:3000

上启动了开发服务器。

npm依赖项
下一步是通过在终端上运行命令来安装NPM依赖项
yarn add react-router-dom styled-components react-icons react-helmet react-error-boundary moment

应用程序文件夹结构
下一步是在src文件夹中创建子文件夹
即assets components hooks pages

持有图像资产的assets文件夹，可重复使用组件的components文件夹，hooks文件夹保存api呼叫的逻辑和pages文件夹以保存不同的页面。

持续整合和连续发展（CI/CD）

我在Github上创建了项目存储库，并在我的终端上使用命令行将代码推向GitHub以保存和跟踪开发过程中的更改和更新。
我还设置了要在Vercel上托管的应用程序，这使我看到了本地计算机和托管链接上的更改。

构建应用程序

组件
创建所需的应用程序夹结构后，接下来是在组件文件夹中创建可重复使用的组件，如下图所示

我添加了一个index.js文件以导出组件文件夹的组件，以使我的代码清洁器导入这些组件时。

import Button from './Button'
import Card from './Card'
import Header from './Header'
import Footer from './Footer'
import Loader from './Loader'
import SearchBar from './SearchBar'
import Grid from './Grid'
import Meta from './Meta'
import BreadCrumb from './BreadCrumb'
import Paginate from './Paginate'
import Card2 from './Card2'

export {
  Button,
  Card,
  Header,
  Footer,
  Loader,
  SearchBar,
  Grid,
  Meta,
  BreadCrumb,
  Paginate,
  Card2
}

要查看每个组件的详细代码，请查看repository
api
接下来是结帐Github api documentation，然后从github获得了访问令牌，以使我与React应用程序中的API互动，请确保将您的访问令牌保存在.env file和.env中添加到.gitignore file中，以防止暴露于.gitignore file您在github上的访问令牌

自定义钩
接下来，我在挂钩文件夹中创建了自定义钩子，以与API进行交互并从GitHub API端点进行API调用，如下图所示，我创建了3个自定义钩，useApiFetch.js，以获取我的GitHub repositories，useProfileFetch.js，以获取我的github profile，以获取我的github profile和useRepoFetch使用repoId

获取单个存储库

要查看每个自定义钩的详细代码，请查看repository

页面
接下来是创建不同的页面，即Home, NotFound (404),Error, Repos, SingleRepo, SearchResults，在页面文件夹中，如下图所示

路由和错误边界实现
使用react-router-dom实现了路由，而使用react-error-boundary实现了错误边界，两者都是React的NPM软件包。创建的路由是针对不同页面的，以下是路由和错误边界的代码

Index.js file
import React from 'react'
import ReactDOM from 'react-dom/client'
import { ErrorBoundary } from 'react-error-boundary'
import { BrowserRouter as Router } from 'react-router-dom'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import styled from 'styled-components'


const ErrorFallback = ({ error }) => {
  return (
    <Container>
      <Content>
        <p>Something went wrong</p>
        <pre>{error.message}</pre>
      </Content>
    </Container>
  )
}

export const Container = styled.section`
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 75vh;
`
export const Content = styled.div`
  p {
    font-size: 1.5rem;
    font-weight: 200;
    text-align: center;
    color: black;
    margin: 0.5rem 0;
    //width: 50% ;
    @media screen and (max-width: 400px) {
      font-size: 2rem;
    }
  }
  pre {
    color: red;
    width: 50%;
    text-align: center;
  }
`

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <Router>
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        <App />
      </ErrorBoundary>
    </Router>
  </React.StrictMode>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

App.js file
import React from 'react'
import { Route, Routes } from 'react-router-dom'
import { Footer, Header } from './components'
import Home from './pages/Home'
import Repos from './pages/Repos'
import SingleRepo from './pages/SingleRepo'
import NotFound from './pages/NotFound'
import styled from 'styled-components'
import SearchResults from './pages/SearchResults'

const App = () => {
  return (
    <Container>
      <Header />
      <Routes>
        <Route exact path='/' element={<Home />} />
        <Route exact path='/search/:keyword' element={<SearchResults />} />
        <Route exact path='/repos' element={<Repos />} />
        <Route exact path='/repos/:repoId' element={<SingleRepo />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
      <Footer />
    </Container>
  )
}

export const Container = styled.div`
background-color: rgba(255, 255, 255, 0.16);
`

export default App

样式
为了进行样式，我使用样式组件为每个组件和页面编写CSS，因为随着应用程序随着其他功能的增长而增长的时间更大。

其他功能
除了获取GitHub存储库的基本功能并查看单个存储库详细信息外，我还添加了

搜索功能，您可以通过其用户名搜索任何github用户，
用于显示搜索的GitHub用户配置文件详细信息的搜索结果页面。
分页功能，使查看我的存储库更容易增强用户体验，因为他们不必一直滚动以查看更多存储库。

最近的改进
我最近更新了一些功能，以改善用户体验

在移动设备上，字体重量增加以使存储库卡上的描述更加可读。
我添加了一个骨架加载状态，以给用户反馈，因为应用程序正在使用react-loading-skeleton npm package加载。

未来其他功能
我希望将来在此应用中添加其他功能，例如

身份验证功能，用户可以注册并登录以查看其GitHub存储库
改进用户界面（UI）并增强用户体验（UX）

如果您想看到一项功能，请通过在本文中添加评论，谢谢。

。

您可以在Github

上找到源代码