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

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

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

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

相关文章

Visual Studio Code的下载安装与汉化

1.下载安装 Visual Studio Code的下载安装十分简单,在本电脑的应用商店直接下载安装----注意这是社区版-----一般社区版就足够用了---另外注意更改安装地址 2.下载插件 重启后就是中文版本了

CAN总线常见的错误帧及产生原因

文章目录 一、位错误(Bit Error)1. 表现形式2. 产生原因 二、填充错误(Stuff Error)1. 表现形式2. 产生原因 三、CRC 错误(CRC Error)1. 表现形式2. 产生原因 四、格式错误(Form Error&#xff…

在项目中调用本地Deepseek(接入本地Deepseek)

前言 之前发表的文章已经讲了如何本地部署Deepseek模型,并且如何给Deepseek模型投喂数据、搭建本地知识库,但大部分人不知道怎么应用,让自己的项目接入AI模型。 文末有彩蛋哦!!! 要接入本地部署的deepsee…

【拥抱AI】GPT Researcher的诞生

一、GPT Researcher 研究过程总结 GPT Researcher 是一个开源的自主智能体,旨在通过利用人工智能技术实现高效、全面且客观的在线研究。它通过一系列创新的设计和优化,解决了传统研究工具(如 AutoGPT)中存在的问题,如…

52款独特婚礼主题手绘水彩花卉树叶高清png免抠图设计素材Floria – Botanical Elements

Floria 是一个独特的系列,由郁郁葱葱的植物元素组成,以绘画风格手绘。它们非常适合任何设计项目 – 包装、网站、博客、文具等等! 在 Photoshop 中轻松更改颜色,并将其图层添加到任何纹理或颜色上。拥有 52 种花卉元素&#xff0c…

python入门笔记4

Python 中的列表(List)是 有序、可变 的序列类型,用方括号 [] 定义。以下是列表的核心语法和常用操作: list1 [Google, W3Cschool, 1997, 2000] list2 [7, 2, 3, 4, 5, 6, 1 ] #索引操作 print ("list1 first: ", li…

基于Ubuntu+vLLM+NVIDIA T4高效部署DeepSeek大模型实战指南

一、 前言:拥抱vLLM与T4显卡的强强联合 在探索人工智能的道路上,如何高效地部署和运行大型语言模型(LLMs)一直是一个核心挑战。尤其是当我们面对资源有限的环境时,这个问题变得更加突出。原始的DeepSeek-R1-32B模型虽…

Linux环境Docker使用代理推拉镜像

闲扯几句 不知不觉已经2月中了,1个半月忙得没写博客,这篇其实很早就想写了(可追溯到Docker刚刚无法拉镜像的时候),由于工作和生活上的事比较多又在备考软考架构,拖了好久…… 简单记录下怎么做的&#xf…

撕碎QT面具(6):调节窗口大小后,控件被挤得重叠的解决方法

问题:控件重叠 分析原因:因为设置了最小大小,所以界面中的大小不会随窗口的变化而自动变化。 处理方案:修改mimumSize的宽度与高度为0,并设置sizePolicy为Expanding,让其自动伸缩。 结果展示(自…

Mysql测试连接失败

解决方案 1 将mysql.exe(C:\Program Files\MySQL\MySQL Server 8.0\bin\mysql.exe)配置到系统环境变量 2 管理员权限启动cmd 输入 3 ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 123456; 4 FLUSH PRIVILEGES;

【UCB CS 61B SP24】Lecture 3 - Lists 1: References, Recursion, and Lists学习笔记

本文开坑伯克利 CS 61B(算法与数据结构)2024年春季课程学习笔记,Lecture 1 & Lecture 2 的内容为课程介绍与 Java 基础,因此直接跳过。本文内容为介绍基本数据类型与引用数据类型的区别,以及手动实现整数列表。 1…

每日学习Java之一万个为什么

9.Class <?> class1 Myclass.class 为什么要有通配符&#xff1f;传给谁用的&#xff1f; 首先&#xff0c;这里的class特指某个对象在JVM中的元数据集合。 有普通、接口、数组、基本类型、 void 类型、局部类、匿名类、枚举、注解 1.类型安全&#xff1a;通配符允许…

【算法】787. 归并排序

题目 归并排序 思路 和快排一样&#xff0c;先判断数据是否没有或者只为一个&#xff1b;如果大于一个&#xff0c;取中间的值一分为二&#xff0c;然后两边递归&#xff0c;归并的实质是把两个有序数组排成一个&#xff0c;两个数组都从头开始比较&#xff0c;把更小的取下…

滤波器 | 原理 / 分类 / 特征指标 / 设计

注&#xff1a;本文为 “滤波器” 相关文章合辑。 未整理去重。 浅谈滤波器之 —— 啥是滤波器 原创 RF 小木匠 射频学堂 2020 年 03 月 25 日 07:46 滤波器&#xff0c;顾名思义&#xff0c;就是对信号进行选择性过滤&#xff0c;对不需要的信号进行有效滤除。按照其传输信…

DeepSeek-学习与实践

1.应用场景 主要用于学习与使用DeepSeek解决问题, 提高效率. 2.学习/操作 1.文档阅读 文档 DeepSeek -- 官网, 直接使用 --- 代理网站 --- 极客智坊 https://poe.com/DeepSeek-R1 https://time.geekbang.com/search?qdeepseek -- 搜索deepseek的资料 资料 20250209DeepSeekC…

分布式架构与XXL-JOB

目录 先了解什么是任务调度&#xff1f; 什么是分布式任务调度&#xff1f; 了解XXL-JOB分布式任务调度平台 如何搭建XXL-JOB&#xff1f; 分片广播 作业分片方案 最近学习在项目的媒资管理模块如何高效处理大量视频&#xff0c;上传单个视频可能涉及到转码&#xff0c…

如何解决服务器端口被攻击:全面防护与快速响应

服务器端口被攻击是网络安全中常见的问题之一&#xff0c;尤其是当服务器暴露在公共网络上时&#xff0c;容易成为黑客的目标。攻击者可能通过扫描开放端口、利用漏洞或发动拒绝服务&#xff08;DoS/DDoS&#xff09;攻击来破坏服务器的正常运行。本文将详细介绍如何检测、防御…

在高流量下保持WordPress网站的稳定和高效运行

随着流量的不断增加&#xff0c;网站的稳定和高效运行变得越来越重要&#xff0c;特别是使用WordPress搭建的网站。流量过高时&#xff0c;网站加载可能会变慢&#xff0c;甚至崩溃&#xff0c;直接影响用户体验和网站正常运营。因此&#xff0c;我们需要采取一些有效的措施&am…

MyBatis-Plus之通用枚举

MyBatis-Plus之通用枚举 前言 MyBatis-Plus中提供了通用枚举&#xff0c;简单来说就是将数据库中的某一字段的代替的含义转换成真实的含义将数据展示给用户&#xff0c;用户在存储时也会将真实值转换成代替的数字存入到数据库中。举个例子&#xff1a;用户性别在数据库中存储…

鸿蒙应用中使用本地存储实现数据共享

在鸿蒙应用开发中&#xff0c;使用本地存储来保存和共享数据是一个常见的需求。通过本地存储&#xff0c;我们可以在不同的页面之间共享数据&#xff0c;避免重复加载数据&#xff0c;提高应用的性能和用户体验。本文将详细介绍如何在鸿蒙应用中使用 AppStorage 实现数据的保存…