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

news2025/1/14 2:17:10

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.coloradmin.cn/o/2215045.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Jetpack-Room

Room是Android Jetpack中的一个组件,它提供了一个抽象层,帮助开发者在本地数据库(如SQLite)上进行持久化数据存储。Room通过简化数据库操作,使得数据管理变得更加容易和高效。 Room重要的概念 实体(Entit…

Facebook上的隐私保护:如何加强个人数据的安全性?

在数字化时代,个人数据的保护已成为用户日益关注的话题,尤其是在社交媒体平台如Facebook上。用户在享受社交媒体带来的便利时,如何有效保护个人隐私,维护自身的数据安全,成为了一个亟需解决的问题。 Facebook的隐私保护…

具备技术二:正则表达式

一、C正则库 regex 用于报文的解析。 使用接口:bool regex_match(const string &src, smatch &matches, regex &e); src:要解释的字符串。 smatch:一个类似于数组的结构,用于存储一个个解释之后的字符串。 matche…

若依-医疗系统

项目介绍 湘雅三医院医疗系统是根据长沙市湘雅第三医院来开发的一款后台管理系统,是基于SpringBoot和Vue2开发的一款前端后端分离项目, 项目中包括:1:权限认证,动态菜单2:用户管理,部门管理&am…

2024年诺贝尔物理学奖:机器学习与神经网络的历史性突破

2024年诺贝尔物理学奖的揭晓引发了广泛的讨论,因为这次的获奖者并非传统意义上的物理学家,而是来自机器学习与神经网络领域的研究者——John J. Hopfield 和 Geoffrey E. Hinton。这一决定不仅让人惊讶,也让我们重新思考物理学的边界和诺贝尔…

Microsoft 的指南可帮助缓解 Kerberoasting

随着网络威胁不断演变,安全专业人员必须了解最新的攻击媒介和防御机制。 Kerberoasting是一种众所周知的 Active Directory (AD) 攻击媒介,由于使用 GPU 加速密码破解技术,其有效性正在不断提高。 由于 Kerberoasting 可让网络威胁者窃取凭…

模拟电路设计期末速成总结

模拟电路设计期末速成总结 模拟电路设计是电子工程和电气工程专业中的一门重要基础课,主要研究连续时间信号(模拟信号)的处理和应用。期末复习时,针对这门课可以分为以下几个关键内容进行速成总结。 一、基本概念与元件 模拟信号…

Python酷库之旅-第三方库Pandas(150)

目录 一、用法精讲 681、pandas.Timestamp.now方法 681-1、语法 681-2、参数 681-3、功能 681-4、返回值 681-5、说明 681-6、用法 681-6-1、数据准备 681-6-2、代码示例 681-6-3、结果输出 682、pandas.Timestamp.replace方法 682-1、语法 682-2、参数 682-3、…

Nest.js 实战 (十四):如何获取客户端真实 IP

问题解析 在 Nest.js 应用中,当你试图通过 request.ip 获取客户端的 IP 地址时,如果总是返回 ::1 或者 ::ffff:127.0.0.1,这通常意味着请求来自本地主机。 因为在前后端分离应用中,前端请求后端服务一般的做法都是通过代理&…

查看记录Linux当前系统环境下已经安装好的CUDA和cuDNN版本信息

在实际工作中,经常需要接触服务器,有时候在实施部署的时候需要对裸机进行安装和部署,涉及到深度学习环境搭建的话就会比较耗时一些,为了简化操作工作以及保证与开发好的模型完美兼容最好的办法就是与我们自己的开发机器保持完全相…

Unity 2D角色的跳跃与二段跳示例

如图,实现这样的效果 其实非常简单,就两个必要条件 触发:一定是按下触发 跳跃次数:一定大于0 声明跳跃次数 public int jumpCount;//多段跳次数 还有一个可以优化的点,就是如果你想角色的多段跳可以有第一次跳的那么…

C语言复习概要(六)

公主请阅 1. 深入理解数组与指针在C语言中的应用1.1 数组名的理解 2. 使用指针访问数组3. 一维数组传参的本质4. 冒泡排序的实现5. 二级指针6. 指针数组7. 指针数组模拟二维数组8.总结 1. 深入理解数组与指针在C语言中的应用 数组与指针是C语言的核心概念之一,理解…

无极低码课程【mysql windows下安装要点】

在Windows环境中安装MySQL 5.7教程 MySQL 是世界上最流行的开源关系型数据库管理系统之一。本教程将指导您在Windows操作系统上安装MySQL 5.7。 网上教程较多,这里不再详述,注意关键点即可 准备工作 下载MySQL 5.7安装包 访问 MySQL官方网站 下载MyS…

新年好——Dijkstra+Permutation

题目 代码 #include <bits/stdc.h> using namespace std; #define x first #define y second typedef pair<int, int> PII; const int N 5e410, M 2e510; const int inf 0x3f3f3f3f; int n, m; int a[6]; int h[N], e[M], ne[M], idx, w[M]; int dist[6][N];…

用Python实现运筹学——Day 17: 0-1 整数规划

一、学习内容 1. 0-1 整数规划的定义 0-1 整数规划是一类特殊的整数规划问题&#xff0c;决策变量只能取 0 或 1。它常用于解决选择问题&#xff0c;如是否选择某个项目、是否执行某个任务等。决策变量 ​ 通常表示“选择”&#xff08;&#xff09;或“不选择”&#xff08;…

实用宝典:元器件外贸独立站电子元件数据库设置完全手册

对于投身于元器件外贸领域的企业来说&#xff0c;如何建立一个既能凸显自身特色又具备高度功能性与良好用户体验的独立站&#xff1f;而在这一过程中&#xff0c;#电子元件数据库#作为独立站的核心要素之一&#xff0c;它的构建质量和管理方式又将如何直接影响网站的整体竞争力…

Python| 如何使用 DALL·E 和 OpenAI API 生成图像(2)

引言 想象一下&#xff0c;只要描述你想要的画面&#xff0c;电脑就能帮你画出来。这在几年前还像是科幻小说里的场景&#xff0c;但随着神经网络和潜在扩散模型&#xff08;LDM&#xff09;技术的发展&#xff0c;现在已经成为可能。OpenAI 推出的 DALLE 工具&#xff0c;因其…

STM32L151 多通道ADC DMA循环扫描STM32CubeIDE STM32CubeMX参考设计

简介 项目开发过程中&#xff0c;采用STM32L151 芯片进行涉及&#xff0c;其中需要使用其片上ADC进行多路ADC数据采样。这里就记录一下实际这块的开发过程&#xff0c;其中涉及工程代码再项目中实际投产使用。STM32L151 多通道ADC DMA循环扫描STM32CubeIDE STM32CubeMX参考设计…

【文心智能体 | AI大师工坊】通过知识库优化智能体『万圣节之纸人还魂』:探索恐怖剧本杀的奇幻之旅

文章目录 1.1、智能体运行效果1.2、创作灵感来源1.3、如何制作智能体1.4、可能会遇到的几个问题1.5、快速调优指南 My_优质智能体『万圣节之纸人还魂&#x1f47b;』&#xff1a;https://aq58pt.smartapps.baidu.com/?_swebfr1&_swebScene3611000100000000 在当今人工智能…

Vue开发中由错误These relative modules were not found 引起的问题思考及解决

一、由Vue: These relative modules were not found 引起的问题 1、vue2.6.14 These relative modules were not found 在使用vue2.6.14开发的项目在本地windows 10上都一直成功&#xff0c;想放到jenkins上进行发布。之前其它的 vue 项目也都能发布正常&#xff0c;但此次一…