用 React 和 Vite 打造 GitHub 仓库展示组件

是染染啊
701 阅读3分钟

使用 React 构建 GitHub 仓库信息组件

React 是一个由 Facebook 开发并维护的用于构建用户界面（UI）的开源 JavaScript 库。下面是如何使用 React 和 Vite 创建一个获取 GitHub 仓库信息的组件。

初始化项目

首先，初始化一个新的 Vite 项目，并选择 React 框架：

npm init vite

按照提示为项目命名并选择框架。接下来安装项目依赖：

npm install

项目结构与生命周期

  • dependencies：react 为项目依赖，从开发阶段到上线后一直都需要。
  • devDependencies：vite 为开发依赖，仅在开发阶段使用，上线后不需要。

src 目录：项目开发主战场

src 目录是项目开发的核心区域，其中 main.jsx 作为入口文件。以下是关键概念：

  • 挂载点：通过 createRoot 创建根容器实例，并将其挂载到指定的 DOM 元素上（如这里的 #root），与 index.html 中的 class 一致。
  • 渲染函数：使用 JSX 语法将组件树作为参数传递给 render 方法。
  • 严格模式：可以包裹在 StrictMode 组件中以启用额外的检查和警告。

完整代码实现

以下是一个完整的 React 组件示例，用于获取并展示 GitHub 用户的仓库列表。

// 获取所有仓库列表组件
import { useState, useEffect } from "react"; // 引入必要的钩子函数
import './repos.css'; // 引入样式文件

function Repos() {
    // 定义状态变量
    const [repos, setRepos] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        async function fetchRepos() {
            try {
                const res = await fetch('https://api.github.com/users/xc-chao/repos');
                if (!res.ok) {
                    throw new Error('网络响应错误');
                }
                const data = await res.json();
                setRepos(data);
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        }

        fetchRepos();
    }, []); // 空数组确保副作用只在组件挂载时执行

    return (
        <div className="github-repos">
            <h2>GitHub 仓库</h2>
            {loading && <span>加载中...</span>}
            {error && <p>发生错误: {error}</p>}
            <ul>
                {repos.map(repo => (
                    <li key={repo.id}>
                        <a href={repo.html_url} target="_blank" rel="noopener noreferrer">
                            {repo.name}
                        </a>
                        <p>作者: {repo.owner.login}</p>
                    </li>
                ))}
            </ul>
            {!loading && repos.length === 0 && <p>暂无数据</p>}
        </div>
    );
}

export default Repos;

关键点解析

  1. 导入命名导出：

    • useState 和 useEffect 是来自 react 包的命名导出。使用花括号明确指出我们希望导入的是模块中的具体命名导出，避免冲突并提高可读性。

  2. 模板定义：

    • 在 React 中，我们使用函数组件来构建用户界面，并通过 return 语句中的 JSX 定义模板，类似于 Vue 的 <template> 区域。

  3. 样式管理：

    • React 采用 ES6 模块化方式单独引入 CSS 文件进行样式管理，确保样式的作用域清晰且易于维护。

  4. 逻辑编写：

    • 函数组件内部直接编写逻辑代码，相当于 Vue 中的 <script> 区域功能。这种方式使逻辑与视图紧密结合，便于开发和维护。

  5. className 属性：

    • 在 JSX 中，为了防止与 JavaScript 的 class 关键字冲突，使用 className 来指定 HTML 元素的 CSS 类名。

  6. 加载状态管理：

    • 清晰地管理加载状态，确保在数据获取完成之前显示适当的加载指示器或错误消息。

精粹总结

使用 React 和 Vite 快速搭建了一个 GitHub 仓库信息组件：

  1. 初始化项目：

    • 使用 npm init vite 创建项目并选择 React 框架。
    • 安装依赖：npm install。

  2. 组件实现：

    • 状态管理：通过 useState 和 useEffect 钩子处理数据获取和加载状态。
    • 样式引入：采用 ES6 模块化方式单独引入 CSS 文件，确保样式清晰维护。
    • 模板定义：在函数组件的 return 中使用 JSX 定义模板，类似 Vue 的 <template> 区域。
    • 逻辑编写：直接在函数组件内部编写逻辑代码，类似于 Vue 的 <script> 区域。

  3. 关键点：

    • 使用 className 而不是 class 来避免与 JavaScript 关键字冲突。
    • 清晰管理加载状态，确保用户体验流畅。

通过这些步骤，我们构建了一个简洁、功能齐全且易于维护的 React 组件。

avatar
文章
阅读
粉丝