当前位置: 首页 > news >正文

创建React项目的三个方式

创建React项目

创建一个React项目非常简单,通常有几种方法可以进行,下面是最常见的几种方法:

1. 使用 create-react-app (已经不被推荐了)

image-20250223234836815

create-react-app 是一个官方的脚手架工具,用于快速创建 React 项目。它会为你配置好很多常用的开发工具和预设。

步骤:
  1. 安装 Node.js 和 npm(如果你还没有安装的话):
    React 需要 Node.js 和 npm,安装方式请参考 Node.js 官方网站,安装完毕后可以在终端运行 node -vnpm -v 来检查是否安装成功。

  2. 使用 create-react-app 创建项目: 打开终端或命令提示符,执行以下命令:

    npx create-react-app my-app
    

    这会创建一个名为 my-app 的 React 项目。npx 是一个工具,可以自动下载并运行 create-react-app,无需全局安装。

  3. 进入项目文件夹

    cd my-app
    
  4. 启动开发服务器

    npm start
    

    此时,浏览器会自动打开 http://localhost:3000,你就可以看到一个默认的 React 应用。

2. 使用 Vite(现代化快速开发工具)

Vite 是一个现代化的构建工具,启动速度快,适合用来开发 React 应用。

步骤:
  1. 安装 Vite: 首先,确保你已经安装了 Node.js,然后在终端中运行:

    npm create vite@latest my-vite-app --template react
    
  2. 进入项目文件夹

    cd my-vite-app
    
  3. 安装依赖

    npm install
    
  4. 启动开发服务器

    npm run dev
    

    访问 http://localhost:5173,就能看到你的 React 项目了。

如果用WebStorm创建的话,可以按照如下所示操作:

image-20250223235047606

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

image-20250223235148398

点击进入下面这个链接

image-20250223235247330

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

image-20250223235231681

3. 使用 Next.js(适用于需要服务端渲染或静态生成的项目)

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

image-20250223235424676

步骤:
  1. 创建 Next.js 项目

    npx create-next-app@latest my-next-app
    
  2. 进入项目文件夹

    cd my-next-app
    
  3. 启动开发服务器

    npm run dev
    

    访问 http://localhost:3000,你就能看到 Next.js 默认页面。

image-20250223235437508

总结

  • 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&#xff0c;就可以认为这是一组 好数对 。 返回好数对的数目。 数据约束 1 ≤ n …...

vue3 采用xlsx库实现本地上传excel文件,前端解析为Json数据

需求&#xff1a;本地上传excel 文件&#xff0c;但需要对excel 文件的内容进行解析&#xff0c;然后展示出来 1. 安装依赖 首先&#xff0c;确保安装了 xlsx 库&#xff1a; bash复制 npm install xlsx 2. 创建 Vue 组件 创建一个 Vue 组件&#xff08;如 ExcelUpload.v…...

计算机视觉:经典数据格式(VOC、YOLO、COCO)解析与转换(附代码)

第一章&#xff1a;计算机视觉中图像的基础认知 第二章&#xff1a;计算机视觉&#xff1a;卷积神经网络(CNN)基本概念(一) 第三章&#xff1a;计算机视觉&#xff1a;卷积神经网络(CNN)基本概念(二) 第四章&#xff1a;搭建一个经典的LeNet5神经网络(附代码) 第五章&#xff1…...

FPGA DSP:Vivado 中带有 DDS 的 FIR 滤波器

本文使用 DDS 生成三个信号&#xff0c;并在 Vivado 中实现低通滤波器。低通滤波器将滤除相关信号。 介绍 用DDS生成三个信号&#xff0c;并在Vivado中实现低通滤波器。低通滤波器将滤除较快的信号。 本文分为几个主要部分&#xff1a; 信号生成&#xff1a;展示如何使用DDS&am…...

记录此刻:历时两月,初步实现基于FPGA的NVMe SSD固态硬盘存储控制器设计!

背景 为满足实验室横向项目需求&#xff0c;在2024年12月中下旬导师提出基于FPGA的NVMe SSD控制器研发项目。项目核心目标为&#xff1a;通过PCIe 3.0 x4接口实现单盘3000MB/s的持续读取速率。 实现过程 调研 花了半个月的时间查阅了一些使用FPGA实现NVME SSD控制器的论文、…...

【计算机网络】OSI模型、TCP/IP模型、路由器、集线器、交换机

一、计算机网络分层结构 计算机网络分层结构 指将计算机网络的功能划分为多个层次&#xff0c;每个层次都有其特定的功能和协议&#xff0c;并且层次之间通过接口进行通信。 分层设计的优势&#xff1a; 模块化&#xff1a;各层独立发展&#xff08;如IPv4→IPv6&#xff0c…...

正点原子[第三期]Arm(iMX6U)Linux系统移植和根文件系统构建-5.3 xxx_defconfig过程

前言&#xff1a; 本文是根据哔哩哔哩网站上“arm(iMX6U)Linux系统移植和根文件系统构键篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。 引用&#xff1a; …...

250223-Linux/MacOS如何跳过Miniconda的条款阅读,直接安装Miniconda

你可以通过将 -b 参数传递给 Miniconda 的安装脚本&#xff0c;来跳过条款阅读并自动同意许可条款。这样安装会自动进行到下一步的选择项。下面是具体的安装命令&#xff1a; bash Miniconda3-latest-Linux-x86_64.sh -b这里的 -b 代表“批量模式”&#xff08;batch mode&…...

点云的几何特征

点云的几何特征是基于一个点周围的邻域对该点周围几何形状的描述。例如&#xff0c;位于墙面上的一个点将具有较高的平面度planarity。 基于局部点云的特征值 λ1、λ2 和 λ3 以及特征向量 e1、e2 和e3计算得到的一系列几何特征&#xff0c;这些特征用于描述点云中点的局部几…...

月之暗面新发布: MUON 在 LLM 训练中的可扩展性

MUON 在 LLM 训练中的可扩展性 摘要 最近&#xff0c;基于矩阵正交化的 Muon 优化器&#xff08;K. Jordan 等人&#xff0c;2024 年&#xff09;在训练小型语言模型方面表现出色&#xff0c;但其在更大规模模型上的可扩展性尚未得到验证。我们确定了 Muon 放大的两个关键技术…...

10.Docker 仓库管理

Docker 仓库管理 Docker 仓库管理 Docker 仓库管理 Docker 仓库&#xff0c;类似于 yum 仓库&#xff0c;是用来保存镜像的仓库。为了方便的管理和使用 docker 镜像,可以将镜像集中保存至 Docker 仓库中&#xff0c;将制作好的镜像 push 到仓库集中保存&#xff0c;在需要镜像…...

Deepseek存算分离安全部署手册

Deepseek大火后&#xff0c;很多文章教大家部署Dfiy和ollamadeepseek&#xff0c;但是大部分都忽略了数据安全问题&#xff0c;本文重点介绍Deepseek存算分裂安全架设&#xff0c;GPU云主机只负责计算、CPU本地主机负责数据存储&#xff0c;确保数据不上云&#xff0c;保证私有…...

【Redis原理】底层数据结构 五种数据类型

文章目录 动态字符串SDS(simple dynamic string )SDS结构定义SDS动态扩容 IntSetIntSet 结构定义IntSet的升级 DictDict结构定义Dict的扩容Dict的收缩Dict 的rehash ZipListZipListEntryencoding 编码字符串整数 ZipList的连锁更新问题 QuickListQuickList源码 SkipListRedisOb…...

Java——抽象类

在Java中&#xff0c;抽象类&#xff08;Abstract Class&#xff09; 是一种特殊的类&#xff0c;用于定义部分实现的类结构&#xff0c;同时允许子类提供具体的实现。抽象类通常用于定义通用的行为或属性&#xff0c;而将具体的实现细节留给子类。 1. 抽象类的定义 语法&…...

DeepSeek在初创企业、教育和数字营销领域应用思考

如今&#xff0c;像 DeepSeek 这样的人工智能工具正在改变企业的运营方式&#xff0c;优化流程并显著提高生产力。通过重复任务的自动化、大量数据的分析以及内容创建效率的提高&#xff0c;组织正在寻找新的竞争和卓越方式。本文介绍了 DeepSeek 如何用于提高三个关键领域的生…...

java开发——为什么要使用动态代理?

举个例子&#xff1a;假如有一个杀手专杀男的&#xff0c;不杀女的。代码如下&#xff1a; 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 中&#xff0c;mutable 关键字用于修饰类的成员变量&#xff0c;允许在 const 成员函数中修改这些变量。它的核心作用是区分 物理常量性&#xff08;对象内存不可修改&#xff09;和 逻辑常量性&#xff08;对象对外表现的状态不变&#xff09;。以下是详细解析&#xff1…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...