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

SymPyBotics实战:如何为你的Scara或Delta机器人快速生成最小惯性参数集?

SymPyBotics实战&#xff1a;Scara与Delta机器人最小惯性参数集生成指南 在机器人动力学参数辨识领域&#xff0c;工程师们常常面临一个核心挑战&#xff1a;如何从复杂的全参数模型中提取出真正影响系统行为的核心参数集&#xff1f;这个问题对于Scara和Delta这类高速精密机器…...

Qianfan-OCR办公提效:替代Adobe Acrobat的本地化智能文档解析方案

Qianfan-OCR办公提效&#xff1a;替代Adobe Acrobat的本地化智能文档解析方案 1. 为什么需要新一代文档解析工具 在日常办公和学术研究中&#xff0c;我们经常需要处理各种文档格式转换和内容提取任务。传统工具如Adobe Acrobat虽然功能强大&#xff0c;但存在几个明显痛点&a…...

Postman便携版终极指南:3分钟掌握免安装API测试神器

Postman便携版终极指南&#xff1a;3分钟掌握免安装API测试神器 【免费下载链接】postman-portable &#x1f680; Postman portable for Windows 项目地址: https://gitcode.com/gh_mirrors/po/postman-portable 你是不是经常需要在不同电脑上测试API接口&#xff1f;每…...

3分钟掌握WindowResizer:彻底解决Windows窗口尺寸调整难题

3分钟掌握WindowResizer&#xff1a;彻底解决Windows窗口尺寸调整难题 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer 还在为Windows系统中那些顽固的、无法调整大小的应用程序窗口…...

八大网盘直链解析工具:告别下载限速的完整解决方案

八大网盘直链解析工具&#xff1a;告别下载限速的完整解决方案 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘…...

如何在Windows电脑上畅游酷安社区:Coolapk-UWP桌面客户端完全指南

如何在Windows电脑上畅游酷安社区&#xff1a;Coolapk-UWP桌面客户端完全指南 【免费下载链接】Coolapk-UWP 一个基于 UWP 平台的第三方酷安客户端 项目地址: https://gitcode.com/gh_mirrors/co/Coolapk-UWP 你是否曾想过在电脑大屏幕上也能像在手机上一样浏览酷安社区…...

从CMake到Autotools:一份给嵌入式开发者的ARM交叉编译‘生存手册’(附真实项目踩坑记录)

从CMake到Autotools&#xff1a;嵌入式开发者的ARM交叉编译实战指南 第一次接手嵌入式Linux项目时&#xff0c;面对代码仓库里混杂的CMakeLists.txt和configure.ac文件&#xff0c;我盯着屏幕发了半小时呆。作为一个刚从单片机开发转来的工程师&#xff0c;那些在x86平台上轻车…...

MiniCPM-V-2_6新手避坑指南:从下载到对话,常见问题一站式解决

MiniCPM-V-2_6新手避坑指南&#xff1a;从下载到对话&#xff0c;常见问题一站式解决 1. 准备工作与环境搭建 1.1 系统要求检查 在开始使用MiniCPM-V-2_6之前&#xff0c;请确保您的设备满足以下最低要求&#xff1a; 操作系统&#xff1a;支持Windows 10/11、macOS 12或主…...

深入nbviewer架构:理解多Provider和Format渲染机制

深入nbviewer架构&#xff1a;理解多Provider和Format渲染机制 【免费下载链接】nbviewer nbconvert as a web service: Render Jupyter Notebooks as static web pages 项目地址: https://gitcode.com/gh_mirrors/nb/nbviewer nbviewer作为Jupyter Notebook的静态网页渲…...

别再只调包了!深入理解Acoular库背后:麦克风阵列定位的波束形成与CLEAN-SC算法

从调包到造轮子&#xff1a;Acoular库中的波束形成算法深度解析与工程实践 当你第一次在Python中导入Acoular库&#xff0c;运行demo示例并看到声源定位结果时&#xff0c;那种成就感可能让你误以为已经掌握了麦克风阵列技术的精髓。但当你试图修改参数或更换算法时&#xff0c…...