需要下载安装的东西

VSCode；

Node.js；

环境配置

VSCode 配置

字体大小设置

这个效果因人而异，我喜欢用 24 号大小的字体：

光标丝滑配置

让光标移动更加丝滑流畅，可以添加一个插件，这个是我最喜欢用的了，写起来代码非常丝滑：

1. 将"Cursor Smooth Caret Animation"设置为"on"
2. 将"Cursor Blinking"设置为"smooth"

步骤如下：

然后搜索 Cursor Smooth Caret Animation ，选择 on ：

再搜索 Cursor Blinking 设置位 smooth：

即可纵享丝滑。

React 项目配置

React 快捷代码填充插件

装了这个插件之后会有智能提示，插件为：Simple react Snippets。

开发环境搭建

首先 Win + R 键输入 CMD 命令打开命令行窗口，然后 cd 到自己的项目文件夹里，在这个目录中会创建我们的项目。

然后使用命令：

// 用 npm 启动一个 Vite 项目模板（创建前端项目）
npm init vite

npm init vite 是用于初始化一个基于 Vite 构建工具的前端项目脚手架命令，它可以快速生成项目结构，并支持选择不同前端框架如 React 或 Vue。Vite 相比传统构建工具如 webpack，在开发环境下启动速度更快，支持基于 ES Module 的按需加载，从而提升开发体验。

快速构建我们的 React 应用，注意要先输入项目的名称，然后选择这个项目的框架：

选择 React 之后，会来到下面的页面：

这一步其实是在选择项目的“语言 + 是否启用一些新特性或框架”：一般来说，直接选 TypeScript 就可以，因为它是当前主流且适合你这种 Java 背景；带 React Compiler 的选项属于较新的优化功能，还不够稳定，不建议入门用；JavaScript 是无类型版本，企业用得相对少；而 RSC、React Router、TanStack Router、RedwoodSDK、Vike 这些都是进阶或框架级方案，新手容易增加复杂度。

至于教程里的 “TypeScript + SWC”，其实是旧版本 Vite 的选项（SWC 是编译器），现在已经默认内置了，所以你不用纠结，直接选 TypeScript 就是最稳、最适合入门的选择。

因此我们直接选择 TypeScript 即可。

选择 Yes，直接构建完成并启动：

打卡页面如下：

使用 VSCode 打开该项目：

如上图所示，我们还可以在这个文件栏这一侧边栏中右键选择打开集成终端，然后输入 CMD 命令后就可以正常使用命令行来启动程序了：

React 项目目录介绍

node_modules：

依赖包目录，所有 npm 下载的库都在这里，比如 React 本体；类比 Java：Maven 的 .m2 仓库。

public（静态资源）：

放不会被打包处理的文件，比如 favicon.ico、静态图片；特点是原样复制到最终项目，别人随意访问。

src（核心目录）：

你真正写代码的地方。

assets：

放图片、字体等资源，这些资源是会被编译器最终打包到最终项目里的，并且外部无法直接访问。

App.tsx：

根组件（最重要），作用：页面 UI 的入口、所有组件的“顶层”。

App.css：

根组件样式，绑定到 App.tsx 的样式，一般写该组件的局部样式。

index.css：

全局样式，应用级别的 CSS，通常在 main.tsx 中被引入，影响整个页面。

main.tsx（启动入口）：

整个 React 应用的“启动点”，做了什么？找到 HTML 里的 #root，把 App 渲染进去；类比 Java：Spring Boot 的 main 方法。

index.html（页面壳子）：

浏览器真正加载的 HTML：
<div id="root"></div>
React 会把页面渲染到这里。

package.json（项目说明书🔥）：

非常重要，包含比如：项目依赖、启动命令以及一些脚本。

package-lock.json：

依赖锁定，npm 自动生成，锁住每个依赖的版本，保证团队成员或 CI 构建的依赖版本完全一致。

eslint.config.js：

代码规范，ESLint 配置文件，规定代码风格、报错规则、格式化规则等，保证团队代码统一。

tsconfig.app.json：

TypeScript 配置（应用），控制 前端应用 的编译规则，例如 JSX 转换、模块解析、严格模式等。

tsconfig.node.json：

TypeScript 配置（Node 相关），控制 Node 环境脚本/构建工具 的编译规则，比如 Vite 或自定义脚本用 TS 编写时需要的配置。

vite.config.ts：

Vite 的配置文件，可以做：配置代理（解决跨域）、插件以及打包优化。

tsconfig.json：

TypeScript 配置，控制：类型检查、编译规则等。

整个运行流程（重点理解）：

启动项目：

npm run dev

发生的事情：

1、Vite 启动开发服务器

2、打开 index.html

3、加载 main.tsx

4、渲染 App.tsx

5、页面显示出来

React 项目本质就是：把组件（App）渲染到 HTML 容器（root）里。