React之旅-02 创建项目

创建React项目,常用的方式有两种:

bash 复制代码
npx create-react-app my-app
  • 使用Vite包,官网:https://vite.dev/。如需创建项目,请运行如下命令:
bash 复制代码
npm create vite@latest

经过对比分析,使用Vite包更加便利。故强烈推荐使用此方式。

Vite创建项目步骤,输入创建命令后,根据提示一步一步完成,首先输入项目名称(react-vite-app),然后选择框架(React),最后选择语言(TypeScript),当然,你完全可以根据自己的喜好进行选择。如下图:

创建完成后,进入项目目录,执行命令:npm install 安装依赖包,安装成功后,运行:npm run dev,开启Web服务器,如下图:

在浏览器地址栏中输入:http://localhost:5173,就可以看到预览界面了

至此,使用Vite包创建React项目,操作成功。使用VS Code 查看具体的项目文件。如下图:

项目文件的结构及各文件的说明,可以自行搜索,并可根据实际需要,对项目文件进行增、删、改。

相关推荐
唐叔在学习2 分钟前
30s让ai编写「跳过外链中转页」的油猴脚本
前端·javascript
酸菜土狗12 分钟前
🔥 纯 JS 实现 SQL 字段智能解析工具类,前端也能玩转 SQL 解析
前端
wo不是黄蓉13 分钟前
脚手架步骤流程
前端
我这一生如履薄冰~27 分钟前
css属性pointer-events: none
前端·css
brzhang32 分钟前
A2UI:但 Google 把它写成协议后,模型和交互的最后一公里被彻底补全
前端·后端·架构
coderHing[专注前端]41 分钟前
告别 try/catch 地狱:用三元组重新定义 JavaScript 错误处理
开发语言·前端·javascript·react.js·前端框架·ecmascript
UIUV1 小时前
JavaScript中this指向机制与异步回调解决方案详解
前端·javascript·代码规范
momo1001 小时前
IndexedDB 实战:封装一个通用工具类,搞定所有本地存储需求
前端·javascript
liuniansilence1 小时前
🚀 高并发场景下的救星:BullMQ如何实现智能流量削峰填谷
前端·分布式·消息队列
再花1 小时前
在Angular中实现基于nz-calendar的日历甘特图
前端·angular.js