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 应用

相关推荐
骁的小小站1 小时前
Verilator 和 GTKwave联合仿真
开发语言·c++·经验分享·笔记·学习·fpga开发
林强1812 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散4 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
颜颜yan_4 小时前
UU远程——让工作、学习、娱乐跨设备无缝衔接,“远程”更像“身边”
学习·娱乐·远程工作
衬衫chenshan4 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇5 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15886 小时前
点击Top切换数据
前端·javascript·vue.js
YJlio6 小时前
Process Monitor 学习笔记(5.24):工具栏参考与高效快捷键指南
笔记·学习·php
deng-c-f6 小时前
Linux C/C++ 学习日记(30):协程(一):同步和异步、协程的简要介绍、用户态CPU调度的实现
学习·协程·同步/异步
程序猿追6 小时前
Vue组件化开发
前端·html