创建React项目的三个方式
创建React项目
创建一个React项目非常简单,通常有几种方法可以进行,下面是最常见的几种方法:
1. 使用 create-react-app (已经不被推荐了)

create-react-app 是一个官方的脚手架工具,用于快速创建 React 项目。它会为你配置好很多常用的开发工具和预设。
步骤:
-
安装 Node.js 和 npm(如果你还没有安装的话):
React 需要 Node.js 和 npm,安装方式请参考 Node.js 官方网站,安装完毕后可以在终端运行node -v和npm -v来检查是否安装成功。 -
使用
create-react-app创建项目: 打开终端或命令提示符,执行以下命令:npx create-react-app my-app这会创建一个名为
my-app的 React 项目。npx是一个工具,可以自动下载并运行create-react-app,无需全局安装。 -
进入项目文件夹:
cd my-app -
启动开发服务器:
npm start此时,浏览器会自动打开
http://localhost:3000,你就可以看到一个默认的 React 应用。
2. 使用 Vite(现代化快速开发工具)
Vite 是一个现代化的构建工具,启动速度快,适合用来开发 React 应用。
步骤:
-
安装 Vite: 首先,确保你已经安装了 Node.js,然后在终端中运行:
npm create vite@latest my-vite-app --template react -
进入项目文件夹:
cd my-vite-app -
安装依赖:
npm install -
启动开发服务器:
npm run dev访问
http://localhost:5173,就能看到你的 React 项目了。
如果用WebStorm创建的话,可以按照如下所示操作:

进入后点击运行npm install,然后可以运行这个按钮"dev" : “vite”

点击进入下面这个链接

能看到下面这个界面就算成功了

3. 使用 Next.js(适用于需要服务端渲染或静态生成的项目)
如果你需要构建一个支持服务端渲染(SSR)或静态站点生成(SSG)的 React 应用,可以使用 Next.js。

步骤:
-
创建 Next.js 项目:
npx create-next-app@latest my-next-app -
进入项目文件夹:
cd my-next-app -
启动开发服务器:
npm run dev访问
http://localhost:3000,你就能看到 Next.js 默认页面。

总结
create-react-app:最基础的 React 脚手架,适合大多数 React 应用。Vite:速度快,适合开发时追求快速反馈的场景。Next.js:适用于服务端渲染或静态生成的 React 应用,SEO 更友好。
你可以根据项目需求选择合适的工具来创建 React 项目!
相关文章:
创建React项目的三个方式
创建React项目 创建一个React项目非常简单,通常有几种方法可以进行,下面是最常见的几种方法: 1. 使用 create-react-app (已经不被推荐了) create-react-app 是一个官方的脚手架工具,用于快速创建 React 项目。它会为你配置好很…...
QT闲记-工具栏
工具栏通常用来放置常用的操作按钮,如QPushButton,QAction等。可以放置在顶部,底部,左侧,右侧,并且支持拖曳,浮动。 1、创建工具栏 通常通过QMainWindow 提供的addToolBar()来创建,它跟菜单栏一样,如果需要工具栏,一般情况下,我们设置这个类的基类为QMainWindow。 …...
为什么继电器要加一个反向并联一个二极管
1 动感就是电流不突变 2 为什么有的继电器上面要反向并联一个二极管和电阻 1 并联二极管是为消除掉动感产生的高压 2 加上二极管是为了让继电器更快的断开(二极管选型的工作电流要大于动感电流,开关要够快) 3 公式:二极管压降0…...
【Leetcode 每日一题 - 扩展】1512. 好数对的数目
问题背景 给你一个整数数组 n u m s nums nums。 如果一组数字 ( i , j ) (i,j) (i,j) 满足 n u m s [ i ] n u m s [ j ] nums[i] nums[j] nums[i]nums[j] 且 i < j i < j i<j,就可以认为这是一组 好数对 。 返回好数对的数目。 数据约束 1 ≤ n …...
vue3 采用xlsx库实现本地上传excel文件,前端解析为Json数据
需求:本地上传excel 文件,但需要对excel 文件的内容进行解析,然后展示出来 1. 安装依赖 首先,确保安装了 xlsx 库: bash复制 npm install xlsx 2. 创建 Vue 组件 创建一个 Vue 组件(如 ExcelUpload.v…...
计算机视觉:经典数据格式(VOC、YOLO、COCO)解析与转换(附代码)
第一章:计算机视觉中图像的基础认知 第二章:计算机视觉:卷积神经网络(CNN)基本概念(一) 第三章:计算机视觉:卷积神经网络(CNN)基本概念(二) 第四章:搭建一个经典的LeNet5神经网络(附代码) 第五章࿱…...
FPGA DSP:Vivado 中带有 DDS 的 FIR 滤波器
本文使用 DDS 生成三个信号,并在 Vivado 中实现低通滤波器。低通滤波器将滤除相关信号。 介绍 用DDS生成三个信号,并在Vivado中实现低通滤波器。低通滤波器将滤除较快的信号。 本文分为几个主要部分: 信号生成:展示如何使用DDS&am…...
记录此刻:历时两月,初步实现基于FPGA的NVMe SSD固态硬盘存储控制器设计!
背景 为满足实验室横向项目需求,在2024年12月中下旬导师提出基于FPGA的NVMe SSD控制器研发项目。项目核心目标为:通过PCIe 3.0 x4接口实现单盘3000MB/s的持续读取速率。 实现过程 调研 花了半个月的时间查阅了一些使用FPGA实现NVME SSD控制器的论文、…...
【计算机网络】OSI模型、TCP/IP模型、路由器、集线器、交换机
一、计算机网络分层结构 计算机网络分层结构 指将计算机网络的功能划分为多个层次,每个层次都有其特定的功能和协议,并且层次之间通过接口进行通信。 分层设计的优势: 模块化:各层独立发展(如IPv4→IPv6,…...
正点原子[第三期]Arm(iMX6U)Linux系统移植和根文件系统构建-5.3 xxx_defconfig过程
前言: 本文是根据哔哩哔哩网站上“arm(iMX6U)Linux系统移植和根文件系统构键篇”视频的学习笔记,在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。 引用: …...
250223-Linux/MacOS如何跳过Miniconda的条款阅读,直接安装Miniconda
你可以通过将 -b 参数传递给 Miniconda 的安装脚本,来跳过条款阅读并自动同意许可条款。这样安装会自动进行到下一步的选择项。下面是具体的安装命令: bash Miniconda3-latest-Linux-x86_64.sh -b这里的 -b 代表“批量模式”(batch mode&…...
点云的几何特征
点云的几何特征是基于一个点周围的邻域对该点周围几何形状的描述。例如,位于墙面上的一个点将具有较高的平面度planarity。 基于局部点云的特征值 λ1、λ2 和 λ3 以及特征向量 e1、e2 和e3计算得到的一系列几何特征,这些特征用于描述点云中点的局部几…...
月之暗面新发布: MUON 在 LLM 训练中的可扩展性
MUON 在 LLM 训练中的可扩展性 摘要 最近,基于矩阵正交化的 Muon 优化器(K. Jordan 等人,2024 年)在训练小型语言模型方面表现出色,但其在更大规模模型上的可扩展性尚未得到验证。我们确定了 Muon 放大的两个关键技术…...
10.Docker 仓库管理
Docker 仓库管理 Docker 仓库管理 Docker 仓库管理 Docker 仓库,类似于 yum 仓库,是用来保存镜像的仓库。为了方便的管理和使用 docker 镜像,可以将镜像集中保存至 Docker 仓库中,将制作好的镜像 push 到仓库集中保存,在需要镜像…...
Deepseek存算分离安全部署手册
Deepseek大火后,很多文章教大家部署Dfiy和ollamadeepseek,但是大部分都忽略了数据安全问题,本文重点介绍Deepseek存算分裂安全架设,GPU云主机只负责计算、CPU本地主机负责数据存储,确保数据不上云,保证私有…...
【Redis原理】底层数据结构 五种数据类型
文章目录 动态字符串SDS(simple dynamic string )SDS结构定义SDS动态扩容 IntSetIntSet 结构定义IntSet的升级 DictDict结构定义Dict的扩容Dict的收缩Dict 的rehash ZipListZipListEntryencoding 编码字符串整数 ZipList的连锁更新问题 QuickListQuickList源码 SkipListRedisOb…...
Java——抽象类
在Java中,抽象类(Abstract Class) 是一种特殊的类,用于定义部分实现的类结构,同时允许子类提供具体的实现。抽象类通常用于定义通用的行为或属性,而将具体的实现细节留给子类。 1. 抽象类的定义 语法&…...
DeepSeek在初创企业、教育和数字营销领域应用思考
如今,像 DeepSeek 这样的人工智能工具正在改变企业的运营方式,优化流程并显著提高生产力。通过重复任务的自动化、大量数据的分析以及内容创建效率的提高,组织正在寻找新的竞争和卓越方式。本文介绍了 DeepSeek 如何用于提高三个关键领域的生…...
java开发——为什么要使用动态代理?
举个例子:假如有一个杀手专杀男的,不杀女的。代码如下: public interface Killer {void kill(String name, String sex);void watch(String name); }public class ManKiller implements Killer {Overridepublic void kill(String name, Stri…...
c++中,什么时候应该使用mutable关键字?
在 C 中,mutable 关键字用于修饰类的成员变量,允许在 const 成员函数中修改这些变量。它的核心作用是区分 物理常量性(对象内存不可修改)和 逻辑常量性(对象对外表现的状态不变)。以下是详细解析࿱…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议(EPSFD 2025)将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会,EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业,其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进,需提前预防假检、错检、漏检,推动智慧生产运维系统数据的流动和现场赋能应用。同时,…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
Go 语言并发编程基础:无缓冲与有缓冲通道
在上一章节中,我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道,它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
