当前位置：首页 > news >正文

React学习001-创建 React 应用

news 2025/6/16 5:29:09

React学习001-创建 React 应用

1、安装node.js
2、安装构建工具
- 2.1 核心特性
- 2.2 性能对比
- 2.3 适用场景
3、创建应用
4、项目启动
参考文章

在这里插入图片描述

1、安装node.js

这里建议安装nvm多版本管理node.js，想用哪个版本，一条命令即可~
多版本管理node.js

2、安装构建工具

Rollup、esbuild、webpack 和 Vite 四种前端构建工具的对比分析。
在vue那篇文章里面，默认使用的Vite构建工具。

2.1 核心特性

Rollup 专注于 ES 模块打包，支持 Tree Shaking，输出代码简洁高效；插件生态较丰富库/框架开发，生成轻量级、高性能的 JS 库。
esbuild 基于 Go 语言，极速构建（快 10-100 倍）；支持 TS/JSX，但功能较基础快速开发环境，适合预构建和简单任务。
webpack 全能型打包工具，支持多种资源（JS/CSS/图片等），生态庞大，配置复杂复杂应用开发，尤其是企业级项目。
Vite 双引擎架构（开发用 esbuild，生产用 Rollup）；基于原生 ESM，按需编译现代 Web 应用开发，追求极速启动和热更新。

2.2 性能对比

构建速度：
esbuild 最快（Go 语言多线程并行），适合开发阶段。
Vite 开发模式下冷启动快（跳过打包），生产模式依赖 Rollup。
webpack 最慢（需构建完整依赖图），但可通过缓存优化。
Rollup 中等速度，适合小型库打包。
热更新（HMR）：
Vite 最快（基于 ESM 按需编译）。
webpack 较慢（需重新计算依赖树）。
Rollup 需插件支持，原生不支持 HMR。

2.3 适用场景

Rollup JS 库/框架（如 Vue/React 源码打包），需 Tree Shaking 和干净输出。多资源类型的大型应用开发。
esbuild 开发环境预构建、快速原型开发；作为底层工具（如 Vite 的依赖预构建）。生产环境复杂优化（如代码分割）。
webpack 企业级 SPA、多页面应用；需处理复杂资源或兼容旧浏览器。对构建速度要求极高的现代项目。
Vite 现代框架（Vue/React）项目；追求开发体验和 ESM 原生支持。需深度定制或旧浏览器兼容的项目。

3、创建应用

这里我们用vite构建工具创建react

npm create vite@latest my-app -- --template react

加粗样式
然后上下选择创建的框架：
在这里插入图片描述
推荐选择 TypeScript + SWC 或 JavaScript + SWC（性能优先，适合大多数现代项目）
某些 Babel 插件（如自定义代码转换）可能无法直接迁移到 SWC。
npm run dev 启动时间：SWC 约 1-2 秒，Babel 约 5-10 秒。
生产构建速度：SWC 通常比 Babel 快 50% 以上。
Babel 是一个 JavaScript 编译器，将ES代码转换成js代码
在这里插入图片描述