【React】使用脚手架或Vite包两种方式创建react项目

ops/2024/10/15 9:12:00/

1.使用脚手架搭建React项目:

在终端窗口运行如下命令即可:

npx create-react-app react-basic(创建的文件目录)

npx:Node.js工具命令,用于查找并执行后续的包命令。

2.使用Vite包创建React项目:

在终端窗口运行如下命令:

npm create vite@latest

也可以指定 vite包 版本:

npm create vite@4.1.0

按 enter 键开始执行,然后填写项目名称,这里我们选择 React 框架,使用 TypeScript 语言:

接下来我们需要进入这个项目文件夹,安装所有第三方依赖并运行我们的 Web 服务器:

现在我们在命令行输入 code . 进入 Vscode 打开该项目(你也可以直接将该项目拖入 Vscode 打开),然后按 Ctrl+` 打开 Vscode 终端,或者选择 Vscode 导航栏里的 Terminal 新建终端,在终端中输入 npm run dev 来运行Web服务器,会发现出现了一个 localhost 端口:

只需点击端口号或者在浏览器中打开这个地址,即可看到我们的项目创建成功了:


http://www.ppmy.cn/ops/125864.html

相关文章

Linux中device_create、device_add、device_register的区别

目录 前言: 一、源码分析 1、device_create() 2、device_register 3、device_add 二、device_create()、device_register()、device_add()使用中的区别 1、device_create() 2、device_register() 3、device_add() 前言: Linux设备驱动开发中&…

uboot基础 -- 启动Linux kernel镜像之 booti 命令的用法

U-Boot booti 命令的作用与用法 booti 命令是 U-Boot 中用于引导 Linux 内核的命令,主要用于启动 ARM64 (AArch64) 平台上的内核映像。在现代嵌入式系统中,booti 通常用于启动设备上的 Linux 内核。 1. 基本概念 booti 命令用于引导内核时加载一个二进…

【VUE】Vue的diff算法和React的diff算法

React和Vue都使用了虚拟DOM来进行高效的页面更新,但它们在实现细节上有一些差异。下面是React和Vue的diff算法的异同点: 异同点: 目标:React和Vue的diff算法的目标都是尽量减少DOM操作的次数,提高页面更新的性能。虚…

初试PostgreSQL数据库

文章目录 一、PostgreSQL数据库概述1.1 PostgreSQL的历史1.2 PostgreSQL安装1.3 安装PostgreSQL二、PostgreSQL起步2.1 连接数据库2.1.1 SQL Shell2.1.2 执行SQL语句2.2 pgAdmin 42.2.1 打开pgAdmin 42.2.2 查找数据库2.2.3 打开查询工具2.2.4 执行SQL语句三、实战小结文章目录…

深入理解链表(SList)操作

目录: 一、 链表介绍1.1、 为什么引入链表1.2、 链表的概念及结构1.3、 链表的分类 二、 无头单向非[循环链表](https://so.csdn.net/so/search?q循环链表&spm1001.2101.3001.7020)的实现2.1、 [单链表](https://so.csdn.net/so/search?q单链表&spm1001.2…

SDV 峰会聚焦:下一代软件定义汽车的关键开源技术

10 月 17 - 18 日,由 GOSIM 开源创新汇主办、CSDN 承办的 GOSIM CHINA 2024 将在北京盛大启幕。作为 GOSIM 开源年度大会的第三届盛会,本次活动邀请了 60 多位国际开源专家,汇聚了来自全球百余家顶尖科技企业、知名高校及开源社区的技术大咖、…

docker环境redis启动失败

现象&#xff1a; 查看日志错误为 Bad file format reading the append only file: make a backup of your AOF file, then use ./redis-check-aof --fix <filename> 经查询为aof文件损坏导致&#xff0c;修复aof即可 解决方法&#xff1a; 1.查看执行的docker命令&…

【Python爬虫实战】正则:多字符匹配、开头与结尾定位、分组技术详解

&#x1f308;个人主页&#xff1a;https://blog.csdn.net/2401_86688088?typeblog &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html 目录 前言 一、匹配多个字符 &#xff08;一&#xff09;匹配任意多个字符 &#xff0…