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

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 端口:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/890947.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【STM32 Blue Pill编程实例】-OLED显示DHT22传感器数据

OLED显示DHT22传感器数据 文章目录 OLED显示DHT22传感器数据1、DHT22介绍2、硬件准备与接线3、模块配置3.1 定时器配置3.2 DHT22引脚配置3.3 OLED配置4、代码实现在本文中,我们将介绍如何将 DHT22 温度和湿度传感器与 STM32 Blue Pill 开发板连接,并使用 HAL 库在 STM32CubeI…

学习底座架构-武汉

1 学习底座架构概述 大脑学习中心-边缘系统 一、当下教育现状 二、什么是学习底座 三、学习底座价值 七、学习底座解决问题的流程 案例:以4R注意力为例 一 注意力问题解决流程 二 注意力问题的危害 三 衡量注意力水平高低的标准 四 注意力问题4大根源 & 2大诱因…

掌握未来技能:亚马逊云科技推出生成式 AI 认证计划!

目录 前言 生成式 AI 的力量 1. 内容创造的无限可能 2. 数据增强和个性化 3. 提高生产力 4. 教育和研究的辅助工具 5. 突破语言障碍 关于亚马逊云科技生成式 AI 认证 1. 认证目标 2. 认证内容 3. 认证优势 如何获得认证 1. 在线学习 2. 实践考试 3.AWS Certifie…

无人机电机故障率骤降:创新设计与六西格玛方法论双赢

项目背景 TBR-100是消费级无人机头部企业推出的主打消费级无人机,凭借其出色的续航能力和卓越的操控性,在市场上获得了广泛认可。在产品运行过程,用户反馈电机故障率偏高,尤其是在飞行一段时间后出现电机过热、损坏以及运行不稳定…

基础入门-Web应用架构搭建漏洞HTTP数据包

网站搭建 这里给一个网站搭建的视频链接,之前又搞过搭建服务器,这里就不再重做了 https://www.bilibili.com/video/BV16A4y1X7vg/?spm_id_from333.337.search-card.all.click&vd_sourcec2c3c616b3ad1faf44a9f6f30a4dbb03 值得注意的是,…

P1320压缩技术(续集版

P1320压缩技术(续集版 感觉这题还是蛮难的对我来说,通过这题我才知道原来字符串输入不碰到空格就会一起输进来 我参考了一写题解自己又写了自己的解法,vs中的scanf_s和scanf()用法不太一样,之前按scanf写法写一直在报错&#xff…

基于springboot+vue实现的酒店在线预订系统

基于springbootvue实现的酒店在线预订系统 (源码L文ppt)4-082 4.2 系统结构设计 构图是系统的体系结构,体系结构是体系结构体系的一部分,体系结构体系是体系结…

Chromium 中chrome.cookies扩展接口c++实现分析

chrome.cookies 使用 chrome.cookies API 查询和修改 Cookie,并在 Cookie 发生更改时收到通知。 更多参考官网定义:chrome.cookies | API | Chrome for Developers (google.cn) 本文以加载一个清理cookies功能扩展为例 https://github.com/Google…

全面讲解C++

数据类型 1.1 基本数据类型 1.1.1 整型(Integer Types) 整型用于表示整数值,分为以下几种类型: int:标准整数类型,通常为4字节(32位)。short:短整型,通常…

集合框架08:LinkedList源码分析、ArrayList和LinkedList区别

视频链接:13.15 LinkedList源码分析_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1zD4y1Q7Fw?spm_id_from333.788.videopod.episodes&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5&p15 13.16 ArrayList和LinkedList区别_哔哩哔哩_bilibilihttps://…

取证之FTK Imager学习笔记

一、FTK Imager制作镜像详细教程 1、文件-创建磁盘镜像 2、参数详解: 1)物理驱动器 整个驱动器,如:识别到的是整块硬盘、U盘等,而不管你分几个分区; 2)逻辑驱动器(L&#xff09…

深入理解Transformer的笔记记录(精简版本)NNLM → Word2Vec

文章的整体介绍顺序为: NNLM → Word2Vec → Seq2Seq → Seq2Seq with Attention → Transformer → Elmo → GPT → BERT 自然语言处理相关任务中要将自然语言交给机器学习中的算法来处理,通常需要将语言数学化,因为计算机机器只认数学符号。向量是人把自然界的东西抽象出…

Redis 实现 查找附近的人 功能

文章目录 概述Redis 中 Geospatial(地理位置)Demo例子总结 概述 使用 Redis 实现“查找附近的人”功能,通常会依赖 Redis 的 Geo(地理位置) 数据类型来存储用户的经纬度,并基于此进行地理范围查询。Redis …

ChatTTS在Windows电脑的本地部署与远程生成音频详细实战指南

文章目录 前言1. 下载运行ChatTTS模型2. 安装Cpolar工具3. 实现公网访问4. 配置ChatTTS固定公网地址 前言 本篇文章主要介绍如何快速地在Windows系统电脑中本地部署ChatTTS开源文本转语音项目,并且我们还可以结合Cpolar内网穿透工具创建公网地址,随时随…

低代码开发技术:驱动MES系统创新与制造业数字化转型的融合之路

低代码开发与生产管理MES系统的融合,是当今制造业数字化转型的一个重要趋势。以下是对这一融合现象的详细分析: 一、低代码开发的概念与特点 低代码开发是一种通过图形化界面和预构建模块来简化应用程序开发过程的方法。它允许开发人员使用拖放组件和最…

请确保已在git上配置你的user.name和user.email

问题:使用vscode在远程服务器上暂存修改报错: 原因:未在远程服务器上配置该项目对应的git的username和useremail 解决方法: 在vscode中新建一个终端 命名: git config --global user.email "youexample.com&qu…

【读书笔记·VLSI电路设计方法解密】问题12:制造MOSFET晶体管的主要工艺步骤是什么

VLSI芯片是在半导体材料上制造的,这种材料的导电性介于绝缘体和导体之间。通过一种称为掺杂的工艺引入杂质,可以改变半导体的电气特性。能够在半导体材料的细小且定义明确的区域内控制导电性,促使了半导体器件的发展。结合更简单的无源元件(电阻、电容和电感),这些器件被…

【Python】Conda离线执行命令

以下链接证明了想要离线使用conda命令的方法 启用离线模式 — Anaconda documentation 基本上大部分的命令都会提供网络选项 例如creat命令 conda create — conda 24.7.1 文档 - Conda 文档

Anthropic CEO 万字长文:我认为AGI最早会在 2026 年出现,机器可以像人类一样协助办公

在 Claude AI 新模型发布之际,Anthropic 的CEO Dario Amodei 发表了一篇近2万字深度长文,探讨人工智能对人类的潜在积极影响。作为斯坦福大学神经科学博士,Amodei 以严谨的学术态度定义了强人工智能概念,并详细阐述了它在不同核心…

打破常规,BD仓储物流的效能提升!

当前,随着国家战略的推进,JS与民用领域的融合不断加深,物流业也步入了军民融合的新时代。在智能仓储物流方面,JS物流的智能化进展受到了BD系统的高度关注和重视。 一、建设JS仓储物流RFID基础设施 JS物流领域引入RFID技术的基础工…