GitHub React 入门指南 – wiki词典

作者： /

My apologies, I made an error and attempted to use a tool that was not available. I will provide the article content directly in my response.

GitHub React 入门指南

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook (现在是 Meta) 开发和维护。它以组件化、声明式编程和高效的虚拟 DOM 而闻名，是目前最受欢迎的前端框架之一。本指南将带你从零开始，学习如何设置一个 React 项目，将其与 GitHub 集成进行版本控制，并最终部署到 GitHub Pages。

1. React 项目设置

在开始之前，请确保你的开发环境中已安装 Node.js (推荐 LTS 版本) 和 npm (Node.js 包管理器) 或 Yarn。你可以通过在终端运行以下命令来检查它们的版本：

“`bash
node -v
npm -v

或者

yarn -v
“`

1.1 使用 Create React App (CRA) 创建项目

Create React App 是一个官方支持的、零配置的 React 开发环境。它能帮你快速搭建一个 React 项目，无需手动配置 Webpack 或 Babel。

bash
npx create-react-app my-react-app
cd my-react-app

1.2 项目结构概述

创建项目后，你会看到类似如下的目录结构：

my-react-app/
├── node_modules/
├── public/
│ ├── index.html # 应用的入口 HTML 文件
│ └── ...
├── src/
│ ├── App.js # 主应用组件
│ ├── index.js # 应用的 JavaScript 入口文件，渲染 App 组件
│ ├── App.css
│ ├── index.css
│ └── ...
├── .gitignore
├── package.json # 项目依赖和脚本配置
├── README.md
└── yarn.lock # 或 package-lock.json

1.3 运行开发服务器

进入项目目录后，你可以启动开发服务器：

“`bash
npm start

或者

yarn start
“`

这会在你的浏览器中打开 http://localhost:3000，并显示你的 React 应用。当你修改代码时，页面会自动刷新。

2. GitHub 集成

版本控制是软件开发的核心实践。GitHub 提供了一个优秀的平台来托管你的代码仓库，方便协作和项目管理。

2.1 初始化 Git 仓库

在你的项目根目录 (my-react-app/) 中，初始化一个 Git 仓库：

bash
git init

2.2 首次提交

将所有文件添加到暂存区，并进行首次提交：

bash
git add .
git commit -m "Initial commit of React project"

2.3 创建 GitHub 仓库

前往 GitHub.com，点击右上角的 “+” -> “New repository”。
* Repository name (仓库名称): 建议与你的本地项目名称一致，例如 my-react-app。
* Description (描述): 可选，简要说明项目用途。
* 选择 Public (公开) 或 Private (私有)。
* 不要勾选 “Add a README file”、”Add .gitignore” 或 “Choose a license”，因为你的项目已经有了这些文件。

创建后，GitHub 会提供一系列命令来连接你的本地仓库。

2.4 关联远程仓库并推送

复制 GitHub 提供的命令，将其添加到你的本地终端并运行。通常会是以下两行：

bash
git remote add origin https://github.com/YOUR_USERNAME/my-react-app.git
git branch -M main # 将默认分支从 master 改为 main (可选，但推荐)
git push -u origin main

现在，你的 React 项目代码已成功上传到 GitHub。

3. 核心 React 概念 (简要)

在继续之前，我们快速回顾一些 React 的核心概念：

  • 组件 (Components): React 应用由相互独立的、可重用的组件构成。组件可以是函数或类。现在，函数组件与 Hooks 的结合是主流。
    “`jsx
    // src/components/MyButton.js
    import React from ‘react’;

    function MyButton({ label, onClick }) {
    return (

    );
    }

    export default MyButton;
    * **JSX:** JavaScript XML。一种 JavaScript 的语法糖，允许你在 JavaScript 代码中编写类似 HTML 的结构。它会被 Babel 转换成 `React.createElement()` 调用。
    * **Props (属性):** 从父组件传递给子组件的数据，用于自定义子组件的行为和外观。Props 是只读的。
    * **State (状态):** 组件内部管理的数据。当 State 改变时，组件会重新渲染。使用 `useState` Hook 在函数组件中管理状态。    jsx
    import React, { useState } from ‘react’;

    function Counter() {
    const [count, setCount] = useState(0); // count 是当前状态值，setCount 是更新状态的函数

    return (

    You clicked {count} times

    );
    }
    “`

4. 部署到 GitHub Pages

GitHub Pages 是一个免费的静态站点托管服务，非常适合部署你的 React 应用。

4.1 安装 gh-pages

在你的 React 项目中安装 gh-pages 包：

“`bash
npm install –save-dev gh-pages

或者

yarn add –dev gh-pages
“`

4.2 配置 package.json

打开 package.json 文件，进行以下修改：

  1. 在文件的顶部，"name" 字段下方，添加 "homepage" 字段。其值应为你的 GitHub Pages URL，格式通常是 https://YOUR_USERNAME.github.io/YOUR_REPO_NAME。

    json
    {
    "name": "my-react-app",
    "version": "0.1.0",
    "private": true,
    "homepage": "https://YOUR_USERNAME.github.io/my-react-app", // 替换为你的信息
    // ...
    }

  2. 在 "scripts" 字段中，添加 "predeploy" 和 "deploy" 脚本：

    json
    {
    "name": "my-react-app",
    // ...
    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build", // 或 "yarn build"
    "deploy": "gh-pages -d build"
    },
    // ...
    }

    • predeploy 脚本会在 deploy 脚本运行之前自动执行，用于构建你的 React 应用。
    • deploy 脚本使用 gh-pages 工具将 build 文件夹的内容推送到 gh-pages 分支。

4.3 部署你的应用

运行部署命令：

“`bash
npm run deploy

或者

yarn deploy
“`

这个命令会先执行 npm run build (或 yarn build)，然后将构建好的静态文件推送到你 GitHub 仓库的 gh-pages 分支。

4.4 启用 GitHub Pages

部署成功后，前往你的 GitHub 仓库页面。点击 “Settings” -> “Pages”。
在 “Source” 下拉菜单中，选择 gh-pages 分支 (或者在某些新版 GitHub UI 中，直接选择 gh-pages 分支并保存即可)。
稍等片刻 (可能需要几分钟)，你的 React 应用就会在 "homepage" 中配置的 URL 上线。

5. 总结与展望

恭喜你！你已经成功地创建了一个 React 项目，将其托管在 GitHub 上，并部署到了 GitHub Pages。这为你进一步学习和开发 React 应用打下了坚实的基础。

接下来，你可以：
* 深入学习 React Hooks (useState, useEffect, useContext 等)。
* 探索 React Router 进行页面路由。
* 学习状态管理库 (如 Redux, Zustand, Recoil)。
* 掌握样式化技术 (CSS Modules, Styled Components, Tailwind CSS)。
* 尝试使用 Next.js 或 Remix 等全栈 React 框架。
* 参与开源项目，贡献你的代码。

祝你在 React 开发的旅程中一切顺利！

滚动至顶部