当前位置: 首页 > 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…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...