react入门

一、什么是react

英文全称：React（官方全称 React.js）

开发团队：Meta公司（原 Facebook）2013 年开源的前端 UI 库

核心定位：用于构建用户界面（UI）的 JavaScript 库，只专注页面渲染，不是完整框架（搭配路由、状态库才是完整项目）

二、react的优点

• 组件化开发，复用性高、易维护；
• 虚拟 DOM+Diff 算法，渲染性能优秀；
• Hooks 简洁写法，逻辑聚合，开发高效；
• 生态完善，路由、状态、UI、跨端工具齐全；
• Meta 官方维护，社区庞大，问题解决方案多；
• 支持 SSR、RSC（要搭配next.js等），兼顾首屏速度与 SEO（Search Engine Optimization，搜索引擎优化）；
• TS 友好，适合大型团队协作。

SSR

1. 英文全称：Server-Side Rendering
2. 中文全称：服务端渲染
3. 解释：页面 HTML 在后端服务器提前生成好，直接发给浏览器；浏览器拿到完整页面直接展示，首屏速度快、利于 SEO。 传统 React 客户端渲染（CSR）是浏览器下载 JS 后再渲染页面，空白屏久。

RSC

1. 英文全称：React Server Components
2. 中文全称：React 服务端组件
3. 解释：React18 后期正式落地、React19 稳定的新组件模型；组件直接在后端运行，不打包到前端 JS，减小前端代码体积，搭配 Next.js 使用。 区分：SSR 是渲染方案，RSC 是组件类型，二者常搭配使用。

SEO

1. 英文全称：Search Engine Optimization
2. 中文全称：搜索引擎优化
3. 解释：优化页面内容、结构，让百度、谷歌等爬虫能顺利抓取页面内容，提升网站在搜索结果里的排名。 纯客户端渲染 React 项目 JS 动态生成内容，爬虫抓取不到文字，SEO 很差；SSR/RSC 可解决该问题。

三、环境搭建

1. CRA（Create React App）

        稳定支持：React16、17、18 不支持稳定使用 React19 ；当你用 CRA 创建项目，安装依赖 react-scripts@5 时，脚手架默认自动安装 React 18 配套版本;CRA 已官方废弃，不再维护

        创建命令

npx create-react-app my-old-react --template typescript

1. npx 临时下载远程包并运行，无需全局安装脚手架，执行完自动清理，不污染本地全局环境。
2. create-react-app 脚手架核心包名，底层基于 Webpack，官方已停止主推，仅存量老项目使用。
3. my-old-react 自定义项目文件夹名称，执行后自动生成该目录存放所有代码。
4. --template typescript 模板参数，生成内置 TS 类型支持的项目；去掉该参数则生成纯 JavaScript 项目。

2. Vite（日常自学 / 新项目最常用）

        Vite6 默认 React19，同时兼容 React18、17 想练 React19 首选这个

        创建项目命令（pnpm 国内最快）

# 新建React+TS项目（推荐）
pnpm create vite@latest 项目名 --template react-ts

# 纯JS React项目
pnpm create vite@latest 项目名 --template react

1. pnpm create vite@latest：调用 vite 创建工具，拉取最新版 vite
2. 项目名：你的文件夹名称
3. --template react-ts：模板，react=react 框架，ts = 自带 TypeScript

项目内常用运行命令

先进入项目文件夹：cd 项目名

1. 安装依赖

pnpm install

1. 本地开发启动（热更新）

pnpm dev

1. 打包生产代码，输出 dist 文件夹

pnpm build

1. 本地预览打包后的 dist 产物

pnpm preview

补充

用 npm 也能执行，只是下载慢一点：

npm create vite@latest 项目名 --template react-ts
npm install
npm run dev
npm run build
npm run preview

3. Umi4（国内公司后台常用）

        默认 React18，稳定跑 17/18，不建议上 19。完整企业级 React 框架（精装成品房），底层可选用 Vite/Webpack，内置全套后台业务方案。

        创建命令（推荐 pnpm，国内下载快）

pnpm create umi my-admin

1. pnpm create umi：调用 umi 官方脚手架
2. my-admin：自定义项目文件夹名

        后续常用命令

4. Next15（学 RSC、SSR、React19 ）

        默认 React19，官方完美适配 19 所有新特性

        创建命令

pnpm create next-app@latest my-next-demo --typescript

1. pnpm create next-app@latest：拉取最新 Next15 脚手架
2. my-next-demo：项目文件夹名
3. --typescript：直接生成 TS 项目后续常用命令