“从零开始：利用AI快速搭建React项目并部署到GitHub页面在线显示的完整指南”

本指南是借助AI插件进行React项目编程乃至包括部署到Github网页的过程，适用于短时间需要做出React前端效果且能够别人也能随时查看效果的界面（赶工的话），如果需要详细学习或者做出非常系统高效且复杂好看的前端界面，还是需要自己掌握很多核心的逻辑和对Javascript和CSS的熟悉，不过据我了解前期完全可以借助AI搭建基本框架。本人纯小白，所以可能有很多写的不对的有问题的地方，请大佬们指正！代码已上传至 https://github.com/GNChuhuda/1

一.工具准备

1.vscode+fiitten code插件（AI插件）+Code runner插件

先确保下载好Visual Studio Code，然后由于我们是要编写完成一个前端项目React项目（其实其他vue之类的估计也类似，现在AI代码能力很强，可以辅助一些前端开发的刚开始的步骤和中间一些局部调整，提升效率——甚至绝大多数代码都可以用fitten code），所以我们需要下载两个插件。
①一个是Code runner，虽然 Code Runner 不能运行整个 React 项目，但它在 React 开发中仍然是一个非常有用的​​辅助工具​​。它的核心优势在于​​快速、轻量地测试和验证代码片段​​，总之可以先下载着，实际上如果需要运行React项目，配置好npm和node.js环境才是关键（后面会说）。
②第二个是Fitten Code，这是一个十分强大的目前免费的AI编程代码插件，可以直接输入需求，然后它告诉你怎么编写，甚至直接帮你修改代码文件，你只需要勾选Yes 或 No表示对代码修改是否同意。（真的很好用）

图:Code Runner

图:Fitten Code

下载完fitten code插件就会看到下图左边插件下方多了一个红色圈出来的东西，点进去然后就会弹到登录界面登录即可开始使用。

图:Fitten Code登录和使用

右下角可以看到Chat和Agent两种模式，Chat就可以当做编程版的GPT用，它只会根据你需求告诉你怎么写，Agent模式则是直接可以根据需求给你创建新文件，或者在你已打开项目的文件上直接开始增加修改删除代码，然后你也可以看到它修改后的代码和原始代码的对比版本，进而判断修改后代码的合理性。我使用的就是Agent模式。

2.npm和Node.js下载

安装好上面那些要写代码的环境后，接下来需要安装可以正确运行React项目的环境。也就是Node.js和npm。
当你安装 Node.js 时，npm 会自动随之安装。这是因为 npm 是 Node.js 的默认包管理工具，用于管理 JavaScript 的依赖包和工具。
所以去官网下载Node.js就可以了，Node.js官方下载界面，如果对下载过程不熟悉和配置担心出问题，可以参考此博客 Node.js 下载安装与环境配置全流程（保姆级详解）| 图文详解，快速上手，过程详细，包括下载后的路径配置，环境变量配置和环境验证（必须配）。该博客的后面的配置镜像和安装cnpm则不是必选项，根据个人需求安装。可能安装如果遇到了一些问题就AI问一下或者搜搜博客总能解决的，当时我遇到的一个报错是 npm ERR code EPERM，解决办法是 报错：npm ERR code EPERM。

3.Git和Github自行熟悉（如果需要部署到github page）

弄好Github仓库和Git，我也不太熟，不熟就参考【教程】Github环境配置新手指南（超详细），熟的话就不用管了。

二.环境配置

1.React初始化

建议直接在Vscode终端中运行以下命令，当然这个全局安装啥的要是报错了请上网检查寻找解决办法。Create React App​​ 是一个由 Facebook (Meta) 官方维护的、用于​​快速搭建现代 React 单页应用程序​​的​​命令行工具,近年来出现了一些更快速、更轻量的替代方案，最著名的是 ​​Vite​​,也可以去搜搜Vite怎么弄的，这里就介绍用CRA搭建了。
1.在终端或命令提示符中，运行以下命令来全局安装 Create React App：

npm install -g create-react-app

2.然后，使用 Create React App 创建一个新的项目。假设你的项目名为 my-app，我这里是second-app(我已经cd切换目录到我的存放这些项目的目录中去了)：

npx create-react-app my-app

3.然后你需要去cd到你刚刚创建的项目my-app目录，我这里是second-app，然后再运行npm-start。npm-start能启动项目的开发服务器​​，让你能够在本地开发和调试应用。之后修改代码会​​实时同步到浏览器​​，几乎无需手动刷新页面。

cd my-app
npm start

补充知识（可跳过）：
npm start实际执行的是项目 package.json中 scripts字段定义的 start脚本。具体来说，它调用了 react-scripts这个工具包中的 start脚本。​​ react-scripts是Create React App (CRA) 项目的专属依赖包，当你通过 create-react-app创建项目时，react-scripts会自动安装到项目的 node_modules文件夹中。
可以去package.json文件中查看以下这个scripts部分，里面就有这些七七八八的，待会部署的时候还会提到。

4.完了运行完就会自动弹出一个地址为http://localhost:3000 的界面，长这样，就说明你的初始化OK了。

三.代码编写

首先，如果对React的项目代码结构不清晰的，可以去网上搜搜教程或者博客，我是直接随便找了个菜鸟教程熟悉（完全没学过哈，但其实AI助手也是在这个菜鸟教程上发现的），React菜鸟教程。熟悉结构有助于你接下来借助AI进行编程，其实基本上主要核心代码好像都是写在下面这俩文件里。剩下的就是一些其他组件彼此调用，

• App.css：App 组件的样式文件。
• App.js：主组件文件，定义了一个基础的 React 组件。

还有一个 package.json：项目的配置文件，包含项目信息、脚本、依赖项等。这玩意是待会部署到Github上需要修改内容比较多的地方，需要定义一些配置相关的东西才能够成功部署。

接下来就可以开始尝试利用AI进行前端界面编写了，随便详细描述你的需求，可以一直不断调整需求，描述需要写的内容，例如需要几个界面，是否需要设置页面跳转，需要有什么样的背景，需要有那些文字等等。下面简单举例说明。
注意事项:
① 到后期如果已经做的比较复杂的界面了（自行抉择判断），每次进行AI修改的时候不要随便点“yes”，而是先观察一下修改了哪些代码（是可以看到new和old的对比的），再确定，如果不小心确认了，却在查看界面时发现，AI编写的不符合要求，记得Ctrl Z撤回；
②还有就是养成经常ctrl S的好习惯，这样vscode就可以进行版本保存。之后万一AI修改过程中不小心出现大误差，也能回归到之前的版本中。
③或者还有直接每一次的比较集中的修改都推送一次到Github保留不同版本代码。

1.从vscode打开你的项目，我这里是second-app,可以看到清晰的项目结构。

2.登录进入Fitten Code，准备输入需求开始AI代码。(Agent模式)
假设最开始输入需求：做一个拍卖平台，要求页面颜色淡淡的，上方导航栏左上方放图标，右边依次放入“首页”，“VIP专区”，“我的拍卖”，“我的钱包”，，要求最开始是首页界面，如果点击其他按钮就会跳转其他界面，注意上方导航栏和下面页面要有颜色区分度。然后就会看到AI开始自行分析任务进行代码修改，这个时候你只需要一步步检查然后选择Yes No即可，默认一开始AI不会犯大错所以直接Yes。

结果这里第一步出了一些小问题，如图所示。不过继续按照AI的提示去做就行。

可以看到下图中出现了两个版本的App.js，Old和New的，这里就可以进行对比AI修改的和之前的究竟改了哪些部分，以防止AI修改过头出问题或者修改方向出错。

可能后面还会有好几步继续修改，最后修改完可以再进行颜色或者整体大概调整，然后效果大概就是这样。

上面按钮跳转也已经实现，后面可以继续用AI去对每个界面进行详细的填充，注意之前AI提示有说到缺乏react-router-dom依赖这种是需要自己去操作的。目前AI只是临时帮你通过写一些JS代码实现了点击按钮跳转界面。

Learning: 因为看代码的时候如果是新手有很多语法都不熟悉，还是要多去边写边注释边问AI边查教程进行学习，后面进行更复杂的开发才能高效。
Html菜鸟教程
JavaScript菜鸟教程
CSS菜鸟教程

四.部署推送（如果需要部署到github page）

我是参考了如何将React应用部署到GitHub页面上和更新并重新部署 React 项目到 GitHub Pages两个博客来完成到github 页面的部署以及后续更新代码的更新部署的。如果会有点小问题，就可以再去查看一下其他人的博客。
①创建一个GitHub存储库


②完了依次进行该进行的那些个init，commit，branch，remote add，和push就好了。

git init
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/GNChuhuda/2.git
git push -u origin main

③添加GitHub Pages依赖包
接下来，我们将在我们的项目中安装gh-pages 包。该包允许我们将构建文件发布到GitHub上的gh-pages 分支中，然后可以在那里托管这些文件。通过npm将gh-pages 作为开发依赖包安装

npm install gh-pages --save-dev

④添加部署脚本
现在，让我们配置一下package.json 文件，这样我们就可以把GitHub仓库指向我们的React应用将被部署的位置。
（1）在package.json 文件中，添加一个homepage 属性，其结构如下。

https://(http://){github-username}.github.io/{repo-name}

(2)我们还需要在package.json 文件中添加predeploy 和deploy 脚本。如图所示。

"predeploy" : "npm run build",
"deploy" : "gh-pages-d build",

⑤提交修改并将代码更新推送到GitHub页面

git add .
git commit -m "setup gh-pages"
git push

⑥运行部署我们的React应用程序
这个命令将自动将执行"gh-pages -d build ",将 build目录的内容推送到远程仓库的 gh-pages分支。如果 gh-pages分支不存在，会自动创建它。

npm run deploy

⑦查看页面链接效果
去对应仓库的Settings中点击Pages，然后就可以找到跳转到可以显示的界面链接

然后就完成结束！
之后如果要更新代码，重新部署记得还是要在终端重新运行下面。（应该吧）

npm run build 
npm run deploy

参考内容来源：

Node.js 下载安装与环境配置全流程（保姆级详解）| 图文详解，快速上手
【教程】Github环境配置新手指南（超详细）
React菜鸟教程
Html菜鸟教程
JavaScript菜鸟教程
CSS菜鸟教程
如何将React应用部署到GitHub页面上
更新并重新部署 React 项目到 GitHub Pages

可能有用的其他博客：

React 全面入门：从零构建你的第一个动态 Web 应用
教你如何使用vercel服务免费部署前端项目和serverless api