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

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...