需要下载安装的东西
环境配置
VSCode 配置
字体大小设置
这个效果因人而异，我喜欢用 24 号大小的字体：
光标丝滑配置
让光标移动更加丝滑流畅，可以添加一个插件，这个是我最喜欢用的了，写起来代码非常丝滑：
- 将"Cursor Smooth Caret Animation"设置为"on"
- 将"Cursor Blinking"设置为"smooth"
步骤如下：
然后搜索 Cursor Smooth Caret Animation ，选择 on ：
再搜索 Cursor Blinking 设置位 smooth：
即可纵享丝滑。
prettier-code formatter、eslint 插件配置
然后再安装两个插件：prettier-code formatter 自动管理代码格式问题，让代码更简洁；eslint 自动检查代码中潜藏的错误，比如变量名有没有使用到，语法错误等。
一些默认行为配置
然后去设置中进行设置搜索 autosave，把自动保存打开：
这样每次切换窗口或者标签的时候，代码文件就会自动保存了。
然后设置 prettier 设置为默认的格式化工具，在设置里搜索 default formatter：
最后设置在代码保存的时候，自动进行格式化，搜索 format on save：
react 本身并不提供开发完整应用程序的所有功能，它专注于构建用户界面UI的视图层，可以处理的是组件化、状态管理、渲染UI，不提供路由、表单管理、网络请求等开发功能。
所以 react 最准确的定位应该是 UI 库。
而并非一个框架。
一般意义上所谓的框架通常会帮你打包好一整套的方案，开发者按照它的套路来就可以了，比如 next.js，它会帮你搞定路由、数据处理、页面加载等一切事情，非常省心，但灵活性就低了一些，不太容易上手。
（类似于 Java 的 SpringBoot 框架）
不光要动 react 本身，还可能涉及全栈开发。
建议先把 react 本身学扎实，再去碰框架不迟。
vite 是法语单词，是快的意思，不要念 wai t，要念 wei t。
创建、运行项目
创建命令：npm create vite@latest apple-react -- -template react
这是让我们创建一个 按照 react 模板生成项目，也可以生成 ts 版本的，只要 -template react-ts 即可。
不过这里是为了学习，先用这个原生的，后续会重构成 ts 的：
可以看到也可以用 vite 创建别的项目，上面这里选择 react，然后来到下面这里：
可以看到还可以选择别的模板，这里选择 JavaScript 的模板：
接下来等待项目创建即可。
创建完之后如果太慢，可以切换源：
npm config set registry https://registry.npmmirror.com/
然后再执行 npm install。
然后注意在 VS Code 中，打开 terminal 后，要先输入 cmd 才能执行 npm 相关的命令噢：
等相关依赖下载完，执行 npm run dev：
然后打开链接：
然后提交 git 吧，项目初始化已经做好。
修改端口
我们可以修改前端的启动端口，在下面页面中的 defineConfig 中添加 server 对象，写入 port 属性即可：
目录介绍
index.html
index.html 文件是整个 react web 的网页入口，浏览器进来的第一站，react 程序就是基于这个文件展开的：
javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>apple-react</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>在这个文件中有一句最重要的代码：<div id="root">
所有组件最后都会装进这个小小的 div 元素中，它是整个 react 的大本营。
紧接着 <script type="module" src="/src/main.jsx"> 指向的是 src下面的 main.jsx，意思就是我们的 react 程序将从这里启动，而我们所有的 react 代码都会从 src 文件夹中加载，其中 type = module 指定了 js 代码的加载模式，使用的是 es 模块的加载系统。
node_modules
node_modules 存放了所有安装的第三方包，也就是用 npm install 下载安装的包都会被装在这里，因此这个文件奇大无比。点开它我们可以看到，react 包和 vite 开发包都被存放在这里，其它成百上千的包都是各种工具。
关于这个 node_modules 有条使用法则：千万不要手贱去修改或者删除这里的文件。
要是不小心这样做了直接整个删掉重新 npm install 即可。
public
public 文件夹，这是项目的静态资源仓库，这个项目中的所有文件都不会被加工，而是直接原样输出到浏览器。放什么样的文件进去打包出来就还是什么样。
src
src 文件夹，存放源码的地方。
main.js
其下面有个 main.js ，这是整个程序的起点，项目就是从这里启动的。其中一行代码值得我们关注：
javascript
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)这就相当于工地的总电闸，启动整个 react 程序。
可以看到这个 main 文件里面引用了一个 App 的组件，这个 App.jsx 就是项目的地基。所有的组件都是在这里被组装起来的。
main.css
此外这个 main.jsx 还对应了一个文件叫做 main.css，我们可以把网站的全局样式都定义在这里，让网站有一个自己独特的风格。
.gitignore
.gitignore 定义了提交推送代码仓库的规则，设置了哪些文件是不需要推送到代码仓库的。
package.json
package.json：node_modules 中堆放的各种包不是随便来的，它是由 package.json 来统一管理和调度的，在这个文件中定义了项目的身份认证（name、private、version字段）、依赖管理（比如项目所使用的各个包的版本）以及项目的运行指令控制（dev 表示开发，build 表示构建项目 等等）。
javascript
{
"name": "apple-react", // 只能小写，且不能有空格
"private": true, // 表示这是私人项目，不允许上传 npm 公开仓库
"version": "0.0.0", //版本号
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": { //项目的生产依赖，是项目的主要材料，网站上线的时候这个依赖里的内容都会被打包进去
"react": "^19.2.6", // 网站主框架
"react-dom": "^19.2.6" // 负责把页面渲染出来的引擎系统
},
"devDependencies": { // 开发过程中的依赖，只在项目开发时候使用，上线的时候不会被打包进去
"@eslint/js": "^10.0.1",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.1",
"eslint": "^10.3.0",
"eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.2",
"globals": "^17.6.0",
"vite": "^8.0.12"
}
}比如我们安装一个生产依赖包，framer-motion，这是个动画材料包，我们上线的时候也会用到，执行 npm install framer-motion 后就会出现在 dependencies 中：
如果要安装开发过程中需要的依赖的话，可以使用 npm install xxx --save-dev
package.json 版本号规则
package.json 版本号规则：
版本号一般都是三个数字，标准格式：
主版本号、次版本号、补丁版本号
主版本号：表示大更新，比如整个框架大改，可能不兼容旧版本。
次版本号：表示加了新功能，但不会破坏原有的用法。
补丁版本号：就是修个小bug，优化个性能，没啥大动作。
那么版本号前面奇怪的符号，比如^、~等等，甚至没有符号是什么意思？
^ 表示插入符号，最常见也最推荐使用，比如上图 react 后面的版本号就表示我想用 react 19.2.6 及其以上的版本，下载 19.2.7 或者19.4.4 都行，但千万别给我升级到 react 20 去。
这个符号最常用，小版本自动升级，大版本别动，很稳。
~ 这个表示只允许升级补丁版本。比如可以从 6.1.2 升级到 6.1.9，但不能升级到 6.2.0。适合对功能比较敏感的依赖，比如 UI 框架或者主题插件，不希望一升级就样式炸了。
没有符号的话，就是字面意思，表示我只要该版本，一个数字都不允许动。只有在为了绝对稳定的时候才这么写，比如在部署上线、CI/CD 流程中。
package-lock.json
package-lock.json：前端工程的依赖DNA图谱，由 npm 自动生成并且锁定了版本，不要去手动修改它，也不能随便删除它。可以理解为依赖树的快照+安装记录的详细清单。
那么到底锁定了什么呢？简单说就是锁定了依赖的真实版本。在package.json 中之前说过，比如带 ^ 符号的版本号那么随便是可以手动升级的，只要符号 ^ 的使用规则即可，那么在团队开发过程中，多个成员之间就可以通过或者 package-lock.json 文件，保证每次 npm install 都 100% 还原同样的开发环境。
这个在团队协作、自动化部署、调试排错当中非常有用。
vite.config.js
vite.config.js：这是脚手架工具 vite 的配置文件。这是整个脚手架工具的设计蓝图。vite 的一切行为都可以在这里配置，比如插件加载、构建打包、开发管理以及服务器配置等。
它主要管理三个方面的东西：插件系统（plugins）、路径别名（给模块起个代号，这样方便使用）、还有打包配置（决定项目上线的产物）。
javascript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
});Vite 的路径别名配置
接下来我们就试一下，怎么定义路径别名，这是为了方便后续的使用：
javascript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// 路径别名
import path from "path";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// components => /你的项目根目录/src/components
const createAlias = (dirName) => path.resolve(__dirname, `src/${dirName}`);
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
// 配置路径别名
resolve: {
alias: {
"@": createAlias(""), // src/ 项目根目录
"@components": createAlias("components"), // src/components/,组件专用目录
"~img": createAlias("assets/images"), // src/assets/images/,图片资源目录
"#types": createAlias("/types"), // src/types/, TS 类型定义目录
},
},
});然后接下里我们就可以愉快的使用别名了，这可以大大提升代码可读性，不用写的很长了。
别名命名规范：
前缀：@，用途：核心业务代码，示例：@utils
前缀：@模块名，用途：特定功能模块，示例：@auth、@payment
前缀：~，用途：静态资源，示例：~img、~fonts
前缀：#，用途：类型/配置等特殊文件，示例：#types、#config
QA
为什么写 react/vue 需要 node.js 呢？node.js 在这里面到底是起了什么作用？