React学习001-创建 React 应用

React学习001-创建 React 应用

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

bash 复制代码
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代码

4、项目启动

bash 复制代码
 cd react-demo
 pnpm install
 pnpm run dev

出现下面的说明启动成功:

参考文章

Vue学习001-创建 Vue 应用

相关推荐
Mintopia1 分钟前
BVH:光线追踪里的空间管家
前端·javascript·计算机图形学
Mintopia7 分钟前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学
祁思妙想9 分钟前
八股学习(五)---MySQL
学习
虾球xz23 分钟前
CppCon 2018 学习:THE MOST VALUABLE VALUES
开发语言·c++·学习
掘金安东尼26 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~28 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务30 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛31 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑34 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭40 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite