react入门

一、什么是react英文全称React官方全称 React.js开发团队Meta公司原 Facebook2013 年开源的前端 UI 库核心定位用于构建用户界面UI的JavaScript 库只专注页面渲染不是完整框架搭配路由、状态库才是完整项目二、react的优点组件化开发复用性高、易维护虚拟 DOMDiff 算法渲染性能优秀Hooks 简洁写法逻辑聚合开发高效生态完善路由、状态、UI、跨端工具齐全Meta 官方维护社区庞大问题解决方案多支持 SSR、RSC要搭配next.js等兼顾首屏速度与 SEOSearch Engine Optimization搜索引擎优化TS 友好适合大型团队协作。SSR英文全称Server-Side Rendering中文全称服务端渲染解释页面 HTML 在后端服务器提前生成好直接发给浏览器浏览器拿到完整页面直接展示首屏速度快、利于 SEO。 传统 React 客户端渲染CSR是浏览器下载 JS 后再渲染页面空白屏久。RSC英文全称React Server Components中文全称React 服务端组件解释React18 后期正式落地、React19 稳定的新组件模型组件直接在后端运行不打包到前端 JS减小前端代码体积搭配 Next.js 使用。 区分SSR 是渲染方案RSC 是组件类型二者常搭配使用。SEO英文全称Search Engine Optimization中文全称搜索引擎优化解释优化页面内容、结构让百度、谷歌等爬虫能顺利抓取页面内容提升网站在搜索结果里的排名。 纯客户端渲染 React 项目 JS 动态生成内容爬虫抓取不到文字SEO 很差SSR/RSC 可解决该问题。三、环境搭建1. CRACreate React App稳定支持React16、17、18 不支持稳定使用 React19 当你用 CRA 创建项目安装依赖react-scripts5时脚手架默认自动安装 React 18 配套版本;CRA 已官方废弃不再维护创建命令npx create-react-app my-old-react --template typescriptnpx临时下载远程包并运行无需全局安装脚手架执行完自动清理不污染本地全局环境。create-react-app脚手架核心包名底层基于 Webpack官方已停止主推仅存量老项目使用。my-old-react自定义项目文件夹名称执行后自动生成该目录存放所有代码。--template typescript模板参数生成内置 TS 类型支持的项目去掉该参数则生成纯 JavaScript 项目。2. Vite日常自学 / 新项目最常用Vite6 默认 React19同时兼容 React18、17 想练 React19 首选这个创建项目命令pnpm 国内最快# 新建ReactTS项目推荐 pnpm create vitelatest 项目名 --template react-ts # 纯JS React项目 pnpm create vitelatest 项目名 --template reactpnpm create vitelatest调用 vite 创建工具拉取最新版 vite项目名你的文件夹名称--template react-ts模板reactreact 框架ts 自带 TypeScript项目内常用运行命令先进入项目文件夹cd 项目名安装依赖pnpm install本地开发启动热更新pnpm dev打包生产代码输出 dist 文件夹pnpm build本地预览打包后的 dist 产物pnpm preview补充用 npm 也能执行只是下载慢一点npm create vitelatest 项目名 --template react-ts npm install npm run dev npm run build npm run preview3. Umi4国内公司后台常用默认 React18稳定跑 17/18不建议上 19。完整企业级 React 框架精装成品房底层可选用 Vite/Webpack内置全套后台业务方案。创建命令推荐 pnpm国内下载快pnpm create umi my-adminpnpm create umi调用 umi 官方脚手架my-admin自定义项目文件夹名后续常用命令4. Next15学 RSC、SSR、React19 默认 React19官方完美适配 19 所有新特性创建命令pnpm create next-applatest my-next-demo --typescriptpnpm create next-applatest拉取最新 Next15 脚手架my-next-demo项目文件夹名--typescript直接生成 TS 项目后续常用命令