介绍
在github上部署React应用程序可能是与他人共享您的应用程序并在线上可用的好方法。在本文中，我们将浏览使用Vite创建React应用所需的步骤，并在GitHub上部署。
React是一个受欢迎的开源前端JavaScript库，用于快速有效地用于Web应用程序的用户界面，其代码比Vanilla JavaScript的代码明显少得多。IT是由Facebook开发的，现在由Facebook和Facebook和Facebook和一个个人开发商和公司的社区。
Vite是用于构建现代Web应用程序的构建工具和开发服务器。它被设计为快速，轻巧且易于使用。 Vite是由Vue.js的创建者Evan You开发的，并受到Vue.js提供的开发经验的启发。
GitHub是一个基于Web的平台，为软件开发团队提供了广泛的协作工具。它是托管，共享和协作代码存储库的流行平台。
先决条件
要与本教程一起，您将需要：
1-安装在系统节点上的Node.js> = 16。
2- a GitHub帐户。
开发React应用程序时，一个重要的步骤是将项目部署到托管服务，以便其他项目可以访问它。 GitHub是一个流行的托管和共享代码的平台，它还提供了一种使用gh-pages'部署React项目的简单方法。GH-pages'是node.js的软件包。轻松将静态网站部署到GitHub页面。
这样说，让我们开始教程。
创建一个GitHub存储库
第一步是为您的项目创建一个GitHub存储库。如果您已经有一个项目存储库，则可以跳过此步骤。要创建一个新的存储库，请按照以下步骤：
1-转到github.com并登录您的帐户。
2-单击右上角的++图标，然后选择新的存储库。
3-给您的存储库一个名称，如果需要，请添加简短的描述。我将其命名为反应。
4-选择是将存储库公开还是私人。
5-单击创建存储库按钮。
6-单击创建存储库后，您将看到此页面。
用Vite创建一个React应用程序
如果您尚未创建React应用程序，则可以使用VITE。使用VITE，您可以创建一个较小的构建时间的React应用程序，并且文件夹中的文件最少，最佳输出。为此，您需要在计算机上安装node.js。这是：
1-创建一个文件夹并随心所欲。
2-使用您的首选IDE打开文件夹，我将使用Visual Studio代码。
3-确保在该文件夹中打开终端。
4-要安装Vite，您需要运行：
npm create vite@latest
5-运行NPM Create vite@最新创建后，您将被要求放置一个项目名称。
我将其命名为反应。
6-将要求您选择一个框架。由于此项目是一个React项目，因此您需要从列表中选择React。
7-还将要求您选择一个变体。我将选择JavaScript。
8-通过运行：
将您的目录更改为React-Project
cd <Your project name>
在我的示例中，我将运行：
cd react-project
9-安装所有依赖关系需求运行：
npm install
10-等待安装完成。
安装GH-PAGES软件包
完全安装了依赖项后，您需要安装gh-pages包。
1-安装gh-pages运行：
npm install --save-dev gh-pages
2-等待安装完成。
更新软件包。
“ GH-pages”软件包使用package.json文件中的主页字段来确定在何处部署应用程序。要更新软件包。JSON文件，请按照以下步骤：
1-以以下格式添加带有GitHub存储库URL的主页字段：
主页：https：//.github.io//
2-在脚本标签中添加：
predeployâ：npm运行构建，
部署：gh -pages -d dist -
使用predeploy和部署脚本用于自动化部署过程。
3-保存更改。
更新vite.config.js文件
1-添加基础：//â€，到vite.config.js，在我的示例中，它将是基础：/react-project/â
2-保存更改。
将React应用推到GitHub
已安装了“ gh-pages”软件包和package.json和vite.config.js文件更新
1-通过运行命令来初始化git存储库：
git init
这将在您的项目目录中创建一个新的git存储库。
2-通过运行命令：
git add .
这将为您的项目中的所有文件上演。
3-通过运行命令来提交更改：
git commit -m "Initial commit"
这将在GIT存储库中创建一个新的提交，并使用消息初始提交。
4-通过运行命令将主分支重命名为main：
git branch -M main
5-通过运行命令添加远程存储库：
git remote add origin <repository URL>
这是您创建的GitHub存储库中的存储库URL
这将添加GitHub存储库作为您本地git存储库的遥控器。
6-最后，通过运行命令：
将更改推向远程存储库
git push -u origin master
这将将您本地GIT存储库的初始提交推向GitHub存储库。
部署您的React应用程序
使用React应用程序推到GitHub，您现在可以部署React应用程序。
1-运行命令：
npm run deploy
2-等待部署完成。
访问您的应用
部署完成后，您可以通过转到软件包文件的主页字段中指定的URL访问React应用程序。通常，URL将以https：//.github.io//。
的形式为，也可以通过单击存储库设置找到URL。
然后单击页面。
这是URL。
单击URL，这是您已部署的React应用程序。
结论
使用gh-pages软件包将React应用程序部署到GitHub页面上是一种简单便捷的方式，可以与他人分享您的作品。通过遵循本文概述的步骤，您可以轻松地将自己的React项目部署到GitHub页面并与世界分享您的工作。