React之旅-02 创建项目

news/2025/2/22 4:22:12/

创建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 查看具体的项目文件。如下图:

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


http://www.ppmy.cn/news/1573654.html

相关文章

liunx服务器本地部署deepseek-r1:1.5b通过网页链接使用

一、本次本地部署deepseek安装系统为:Anolis OS 8.6 1、首先下载拉取deepseek镜像工具,通过这个工具拉取deepseek镜像。 curl -L https://ollama.com/download/ollama-linux-amd64.tgz -o ollama-linux-amd64.tgz sudo tar -C /usr -xzf ollama-linux-…

Spring MVC多语言支持揭秘:让你的应用走向世界

Spring MVC中的国际化支持,就是让网站或应用能够根据不同国家或地区的用户,自动显示对应的语言和内容。就像我们平时访问一些网站时,可以选择中文或英文等语言版本,这就是国际化的一种体现。 国际化的基本原理 国际化&#xff08…

【算法】788. 逆序对的数量

题目 逆序对的数量 思路 在归并排序的基础上求逆序数&#xff0c;如果l-mid中的数大于mid1-r中的数&#xff0c;则i和i之后的所有数都是指针j所指数的逆序数。与归并算法不同的是&#xff0c;本题需要有返回值&#xff0c;返回逆序数的数量。 代码 #include<iostream&g…

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

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

sql server 数据库 锁教程及锁操作

SQL Server数据库 锁的教程 SQL Server 的数据库锁是为了保证数据库的并发性和数据一致性而设计的。锁机制能够确保多个事务不会同时修改同一数据&#xff0c;从而避免数据冲突和不一致的发生。理解 SQL Server 的锁机制对于开发高效、并发性强的数据库应用非常重要。 1. 锁的…

【C/C++】后缀表达式 蓝桥杯/ACM备赛

核心考点&#xff1a;1.栈的应用 2.字符串处理 题目描述 所谓后缀表达式是指这样的一个表达式&#xff1a;式中不再引用括号&#xff0c;运算符号放在两个运算对象之后&#xff0c;所有计算按运算符号出现的顺序&#xff0c;严格地由左而右新进行&#xff08;不用考虑运算符的…

电脑机箱散热风扇声音大的影响因素

在使用电脑的过程中&#xff0c;机箱风扇声音过大常常会给用户带来困扰。了解导致机箱风扇声音大的影响因素&#xff0c;对于解决这一问题、提升电脑使用体验至关重要。 首先&#xff0c;风扇的质量是一个关键因素。一些低价、劣质的机箱风扇&#xff0c;在制造工艺上往往存在缺…

「软件设计模式」桥接模式(Bridge Pattern)

深入解析桥接模式&#xff1a;解耦抽象与实现的艺术 一、模式思想&#xff1a;正交维度的优雅解耦 桥接模式&#xff08;Bridge Pattern&#xff09;通过分离抽象&#xff08;Abstraction&#xff09;与实现&#xff08;Implementation&#xff09;&#xff0c;使二者可以独立…