如何创建react项目

最新推荐文章于 2025-09-12 10:51:28 发布

原创最新推荐文章于 2025-09-12 10:51:28 发布 · 285 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

博客介绍了使用webpack和vite工具构建React项目的方法。基于webpack，通过create-react-app脚手架创建并启动项目，还提及资源下载慢可换淘宝源及安装报错的解决办法。使用vite则需先安装构建工具，再构建项目、安装依赖并启动。

============ webpack + create-react-app ===================

1, 安装react代码行工具(脚手架), 基于webpack工具构建项目
   npm install -g create-react-app
2,创建一个react应用程序, my-app是自定义项目名
   create-react-app my-app
3,启动react项目 (需要cd进入项目my-app根目录)
   npm start

注意: 在使用 create-react-app 来创建一个新的React应用，在拉取各种资源时,往往会非常慢,一直卡在那,因为资源还是使用了 npm下载的, 我们可以换成淘宝的资源, 执行指令
npm config set registry https://registry.npm.taobao.org
可以把npm指令替换成cnpm指令

问题: 安装脚手架报错: The fs.promises API is experimental
原因: npm版本过高或node版本过低
解决: npm i npm@6.4.1 -g

============= 使用 vite工具构建项目 ================

1, 安装vite构建工具
   cnpm i vite create-vite -g
2, 使用vite构建项目, 选择react
   npm init vite
3, 切换到项目根目录, 安装依赖包
   cnpm i / npm i / yarn install
4, 运行,启动vite项目
   npm run dev