React之旅-02 创建项目

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

  • 官方提供的脚手架,官网:https://create-react-app.dev/。如需创建名为 my-app 的项目,请运行如下命令:
npx create-react-app my-app
  • 使用Vite包,官网:https://vite.dev/。如需创建项目,请运行如下命令:
npm create vite@latest

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

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

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

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

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

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

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

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

相关文章

Cursor实战:Web版背单词应用开发演示

Cursor实战:Web版背单词应用开发演示 需求分析自行编写需求文档借助Cursor生成需求文档 前端UI设计后端开发项目结构环境参数数据库设计安装Python依赖运行应用 前端代码修改测试前端界面 测试数据生成功能测试Bug修复 总结 在上一篇《Cursor AI编程助手不完全指南》…

【JavaEE进阶】Spring MVC(3)

欢迎关注个人主页:逸狼 创造不易,可以点点赞吗 如有错误,欢迎指出~ 返回响应 返回静态页面 //RestController Controller RequestMapping("/response") public class ResponseController {RequestMapping("/returnHtmlPage&…

文本操作基础知识:正则表达式

目录 摘要: 一、语法 二、匹配模式pattern 1、普通字符[ ] 2、限定字符 3、定位字符 4、运算字符( ) 三、修饰符flags 四、各语言的正则使用 1、Python的re 参考资料: 摘要: 常用匹配:[A-C]、[^A-C]、\w、\d、\n、\r、…

ROS-相机话题-获取图像-颜色目标识别与定位-目标跟随-人脸检测

文章目录 相机话题获取图像颜色目标识别与定位目标跟随人脸检测 相机话题 启动仿真 roslaunch wpr_simulation wpb_stage_robocup.launch rostopic hz /kinect2/qhd/image_color_rect/camera/image_raw:原始的、未经处理的图像数据。 /camera/image_rect&#xff…

Ubuntu USB耳机找不到设备解决

​ 一. 确定硬件连接 lsusb -t 插拔USB耳机,确定是否有USB识别到 二. 查看输出设备 sudo apt-get install pavucontrol pavucontrol 点击想要使用的输出设备后面的绿色选项 三. 输出设备没有USB耳机时调试 3.1 确认ALSA是否识别设备 列出ALSA播放设备&#…

深入解析「卡顿帧堆栈」 | UWA GPM 2.0 技术细节与常见问题

在游戏开发过程中,卡顿问题一直是影响玩家体验的关键因素。UWA GPM 2.0全新推出的「卡顿帧堆栈」功能,专为研发团队提供精准、高效的卡顿分析方案,能够直观呈现游戏运行时的堆栈信息,助力团队迅速找到性能瓶颈。该功能一经上线&am…

Web3.py 入门笔记

Web3.py 学习笔记 📚 1. Web3.py 简介 🌟 Web3.py 是一个 Python 库,用于与以太坊区块链进行交互。它就像是连接 Python 程序和以太坊网络的桥梁。 官方文档 1.1 主要功能 查询区块链数据(余额、交易等)发送交易与…

点击unity资源文件自动展开左侧的文件路径

背景: 最近从cocos那边转过来的unity同事总是吐糟我们unity选中一个资源后都无法清晰的看到他的文件路径,这给他的工作带来了很多的烦恼,于是我想到昨天刚看到一个unity编辑器下的简易协程实现,通过2个接口Selection.activeObjec…

几种查询本机公网IP的方式

英文网站 bgp.he.net 链接地址:https://bgp.he.net/ bgp.he.net是一个在线工具平台,主要用于查询IP的路由信息,特别是与BGP(边界网关协议)相关的信息。 以下是对bgp.he.net的详细介绍: 一、平台功能 BGP查询:用户可以通过输入IP地址,查询该IP的BGP路由信息,包括AS号…

每日一题——编辑距离

编辑距离 参考资料题目描述示例 解题思路动态规划(DP)方法 代码实现复杂度分析示例详解示例1:"nowcoder" → "new"示例2:"intention" → "execution" 总结与心得 参考资料 建议先参考下…

ChatGPT行业热门应用提示词案例-AI绘画类

AI 绘画指令是一段用于指导 AI 绘画工具(如 DALLE、Midjourney 等)生成特定图像的文本描述。它通常包含场景、主体、风格、色彩、氛围等关键信息,帮助 AI 理解创作者的意图,从而生成符合要求的绘画作品。 ChatGPT 拥有海量的知识…

LearnOpenGL——高级OpenGL(下)

教程地址:简介 - LearnOpenGL CN 高级数据 原文链接:高级数据 - LearnOpenGL CN 在OpenGL中,我们长期以来一直依赖缓冲来存储数据。本节将深入探讨一些操作缓冲的高级方法。 OpenGL中的缓冲本质上是一个管理特定内存块的对象,它…

VScode插件EIDE - 嵌入式开发工具

Embedded IDE - 可以选开源GCC编译器,直接替代Keil;或者用Keil内置的编译器, - 可导入keil的工程,与Keil Assistant插件相比,优势在于可以不用打开Keil改文件架构(增删等) 再吐槽一下富文本编辑…

C语言进阶——6-C语言文件操作

目录 本章重点1. 为什么使用文件2. 什么是文件2.1 程序文件2.2 数据文件2.3 文件名 3. 文件的打开和关闭3.1 文件指针3.2 文件的打开和关闭 4. 文件的顺序读写4.1 顺序写4.2 顺序读4.3 文本行输入函数——写一行数据4.4 文本行输出函数——读一行数据4.5 格式化写入文件4.6 格式…

2025年人工智能与教育系统国际学术会议(ICAIES 2025)

重要信息 大会官网: www.icispp.com 大会时间:2025年3月14-16日 大会地点:中国-北京 简介 会议主题主要围绕教育创新与多媒体技术等相关研究领域展开讨论,旨在为相关领域的专家学者及企业发展人提供一个分享研究成果、讨论存…

使用 Certbot 自动获取和更新 Let‘s Encrypt SSL 证书

文章目录 引言一、什么是 Certbot?二、安装 Certbot2.1 在 Ubuntu/Debian 上安装 Certbot2.2 在 CentOS/RHEL 上安装 Certbot2.3 使用 Snap 安装 Certbot 三、获取 SSL 证书3.1 为 Nginx 获取 SSL 证书3.2 为 Apache 获取 SSL 证书3.3 手动获取 SSL 证书 四、自动更…

idea-gradle打包运行配置

最近接触了一个项目,使用gradle做为构建工具,这里记录一波,毕竟平时使用的都是maven idea 配置 这里有个坑,Gradle Wrapper,配置的地址gradle下载超时 这个配置修改成阿里的 第一张 第二张 第二张配置的jvm貌似没啥用…

AD(Altium Designer)器件封装——立创商城导出原理图和PCB完成器件封装操作指南

1、立创商城下载原理图和PCB图 1.1 打开立创商城 官网:www.SZLCSC.COM 1.2 寻找所需器件 以芯片为例 器件类——>芯片类——>对应芯片 1.3 确定所需芯片 确定芯片——>数据手册 1.4 打开原理图和PCB图 1:原理图 2:PCB 3:打开 1.5 导出原理图 操作

Kubernetes:EKS 中 Istio Ingress Gateway 负载均衡器配置及常见问题解析

引言 在云原生时代,Kubernetes 已经成为容器编排的事实标准。AWS EKS (Elastic Kubernetes Service) 作为一项完全托管的 Kubernetes 服务,简化了在 AWS 上运行 Kubernetes 的复杂性。Istio 作为服务网格领域的佼佼者,为微服务提供了流量管理…

【CUDA 】第4章 全局内存——4.4 核函数可达到的带宽(3展开转置)【补图】

CUDA C编程笔记 第四章 全局内存4.4 核函数可达到的带宽4.4.2.3 展开转置【为每个线程分配更独立的任务】 待解决的问题: 第四章 全局内存 4.4 核函数可达到的带宽 4.4.2.3 展开转置【为每个线程分配更独立的任务】 展开:提高转置内存带宽的利用率&a…