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

React创建项目实用教程

news 来源：原创 2025/9/21 10:58:07

✍请将整篇文章阅读完再开始使用create-react-app react-project创建项目

检查node版本

 node -v  // node版本：v22.10.0

使用nvm降版本修改到了node V20.11.1之后再进行一系列操作的

react脚手架安装：

npm install -g create-react-app// node版本：v22.10.0

使用create-react-app react-project创建项目， 报错@testing-library/dom要求react v18.0.0但我的为react v19.0.0版本。

在package.json配置如下：

"react": "^18.0.0",
"react-dom": "^18.0.0",

执行指令 npm i ，重新node_module下载依赖
下载react-router-dom:

 npm add react-router-dom

使用 npm run start 运行项目， 提示找不到not found web-vitals报错。
下载依赖web-vitals：

 npm install web-vitals

再次 npm run start，项目成功运行起来

【图片】

不知道为什么react项目第一次运行起来很慢

【图片】

在原有cmd窗口不关闭的情况下，使用Ctrl+c，两次结束本次运行，再次npm run start，第二次速度明显提示

刚好放假了，过了几天，星期一再创建，使用create-react-app创建项目时，此时提示版本过低v5.0.1

然后就是卸载create-react-app(windows用法):

npm uninstall -g create-react-app

突然发现无法卸载，只好手动删除相关目录

【图片】

安装最新版本脚手架create-react-app升级到v5.1.0：

npm install -g create-react-app@latest

再次创建项目create-react-app react-project02

在这里插入图片描述

使用npx创建：

npx create-react-app react-project03

npx 是 npm 5.2.0 及以上版本自带的一个工具，用于临时安装并运行 npm 包。
它的作用是：
不需要全局安装包（如 create-react-app），直接运行最新版本的包。
避免全局安装包的版本冲突问题。
简化开发流程。

react-project项目：*

react-project/
├── node_modules/       # 项目依赖
├── public/            # 静态资源（如 index.html）
├── src/               # 项目源代码
│   ├── App.js         # 主组件
│   ├── index.js       # 项目入口文件
│   └── ...
├── package.json       # 项目配置和依赖信息
└── README.md          # 项目说明文档

React创建项目实用教程

✍请将整篇文章阅读完再开始使用create-react-app react-project创建项目检查node版本 node -v // node版本：v22.10.0使用nvm降版本修改到了node V20.11.1之后再进行一系列操作的 react脚手架安装： npm install -g create-react-app// node版本&…...

编程日记 2025/9/21 10:58:07

STM32 外部中断和NVIC嵌套中断向量控制器

目录背景外部中断/事件控制器(EXTI) 主要特性功能说明外部中断线嵌套向量中断控制器特性 ‌中断线（Interrupt Line） 中断线的定义和作用 STM32中断线的分类和数量优先级分组抢占优先级（Preemption Priority） …...

编程日记 2025/9/21 10:56:20

讯飞唤醒+VOSK语音识别+DEEPSEEK大模型+讯飞离线合成实现纯离线大模型智能语音问答。

在信息爆炸的时代，智能语音问答系统正以前所未有的速度融入我们的日常生活。然而，随着数据泄露事件的频发，用户对于隐私保护的需求日益增强。想象一下，一个无需联网、即可响应你所有问题的智能助手——这就是纯离线大模型智能语音…...

编程日记 2025/9/15 16:50:52

【MediaTek】 T750 openwrt-23.05编 cannot find dependency libexpat for libmesode

MediaTek T750 T750 采用先进的 7nm 制程，高度集成 5G 调制解调器和四核 Arm CPU，提供较强的功能和配置，设备制造商得以打造精巧的高性能 CPE 产品，如固定无线接入（FWA）路由器和移动热点。 MediaTek T750 平台是一款综合的芯片组，集成了 5G SoC MT6890、12nm 制程…...

编程日记 2025/9/20 1:52:50

如何通过 prometheus-operator 实现服务发现

在之前的章节中，我们讲解了如何编写一个自定义的 Exporter，以便将指标暴露给 Prometheus 进行抓取。现在，我们将进一步扩展这个内容，介绍如何使用 prometheus-operator 在 Kubernetes 集群中自动发现并监控这些暴露的指标。部署应用在 Kubernetes 集群中部署我们的自定…...

编程日记 2025/9/21 5:23:42

VBA学习：将文本中的\n替换为换行符

目录一、问题描述二、解决方法三、代码四、注意事项五、总结一、问题描述一个字符串，包含多个\n，现在利用VBA写一段程序，把\n替换为换行符。二、解决方法 1、Replace函数：直接替换换行符在Word 中使用vbCrLf或者…...

编程日记 2025/9/19 17:55:51

（8/100）每日小游戏平台系列

项目地址位于：小游戏导航新增一个打地鼠游戏！ 打地鼠（Whack-a-Mole）是一款经典的休闲游戏，玩家需要点击随机出现的地鼠，以获取分数。游戏时间有限，玩家需要在规定时间内尽可能多地击中地鼠&am…...

编程日记 2025/9/19 7:27:23

【设计模式】建造者模式和原型模式

建造者模式（Builder Pattern） 概述建造者模式是一种创建型设计模式，它允许逐步构建复杂对象。通过将构造过程与表示分离，使得同样的构建过程可以创建不同的表示。这种模式非常适合用于创建那些具有很多属性的对象，尤…...

编程日记 2025/9/19 11:07:31

【Python 学习 / 4】基本数据结构之字符串与集合

文章目录 1. 字符串概念1.1 字符串的创建1.2 字符串的访问和操作1.2.1 下标访问1.2.2 切片操作1.2.3 字符串的拼接和重复1.2.4 字符串的长度 1.3 字符串的方法1.4 字符串的查找和替换1.5 字符串格式化1.5.1 使用 % 运算符1.5.2 使用 str.format()1.5.3 使用 f-string&#xff0…...

编程日记 2025/9/19 20:07:05

Spring框架中都用到了哪些设计模式？

大家好，我是锋哥。今天分享关于【Spring框架中都用到了哪些设计模式？】面试题。希望对大家有帮助； Spring框架中都用到了哪些设计模式？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网 Spring框架中使用了大量的设计模…...

编程日记 2025/9/13 10:12:15

HBuilderX中uni-app打开页面时，如何用URL传递参数,Query参数传递

HBuilderX中uni-app打开页面时，如何用URL传递参数,Query参数传递？ URL是一种描述文件在计算机网络中位置的方式。在web开发中，可以通过query string来传递参数。使用uniapp进行开发，打开不同的页面时，本文介绍给所要打…...

编程日记 2025/9/13 10:12:13

【开源向量数据库】Milvus简介

Milvus 是一个开源、高性能、可扩展的向量数据库，专门用于存储和检索高维向量数据。它支持近似最近邻搜索（ANN），适用于图像检索、自然语言处理（NLP）、推荐系统、异常检测等 AI 应用场景。官网&#xff1a…...

编程日记 2025/9/21 7:04:59

c/c++蓝桥杯经典编程题100道（19）汉诺塔问题

汉诺塔问题 ->返回c/c蓝桥杯经典编程题100道-目录目录汉诺塔问题一、题型解释二、例题问题描述三、C语言实现解法1：递归法（难度★） 解法2：迭代法（难度★★★） 四、C实现解法1&#xff1…...

编程日记 2025/9/18 15:14:07

CSS盒模

CSS盒模型就像一个快递包裹，网页上的每个元素都可以看成是这样一个包裹，它主要由以下几个部分组成： 内容（content）：就像包裹里真正装的东西，比如文字、图片等。在CSS里，可用width&a…...

编程日记 2025/9/20 14:07:51

【go语言规范】关于接口设计

抽象应该被发现，而不是被创造。为了避免不必要的复杂性，需要时才创建接口，而不是预见到需要它，或者至少可以证明这种抽象是有价值的。 “The bigger the interface, the weaker the abstraction. 不要用接口进行设计，要…...

编程日记 2025/9/13 10:12:06

计算机视觉+Numpy和OpenCV入门

Day 1：Python基础Numpy和OpenCV入门 Python基础变量与数据类型、函数与类的定义、列表与字典操作文件读写操作（读写图像和数据文件） 练习任务：写一个Python脚本，读取一个图像并保存灰度图像。 import cv2 img cv2.im…...

编程日记 2025/9/12 22:52:16

计算机网络之网络层（网络层的功能，异构网络互联，路由与转发，SDN基本概念，拥塞控制）

计算机网络之网络层网络层（Network Layer）是计算机网络体系结构中至关重要的一层，它位于数据链路层（Data Link Layer）和传输层（Transport Layer）之间，主要负责数据包从源主机到目的…...

编程日记 2025/9/20 18:51:26

利用雪花算法+Redis 自增 ID，生成订单号

在我们的项目中，我们需要定义一些全局唯一的 ID，比如订单号，支付单号等等。这些ID有以下几个基本要求： 1、不能重复 2、不可被预测 3、能适应分库分表为了生成一个这样一个全局的订单号，自定义了一个分布式 ID …...

编程日记 2025/9/13 9:04:00

第35次CCF计算机软件能力认证 python 参考代码

题目列表1. 密码2. 字符串变换3. 补丁应用4. 通讯延迟5. 木板切割题目列表第35次CCF计算机软件能力认证 1. 密码 n = int(input()) for _ in range(n):s =...

编程日记 2025/9/21 4:18:18

【探商宝】：大数据与AI赋能，助力中小企业精准拓客引

引言：在数据洪流中，如何精准锁定商机？ 在竞争激烈的商业环境中，中小企业如何从海量信息中快速筛选出高价值客户？如何避免无效沟通，精准触达目标企业？ 探商宝——一款基于大数据与AI技术的企业信…...

编程日记 2025/9/13 9:03:56

npm 私服使用介绍

一、导读本文主要介绍 npm 私服的使用，至于 npm 私服搭建的过程，可以看本人之前的文章《Docker 部署 verdaccio 搭建 npm 私服》二、前置条件 npm私服地址：http://xxx.xxx.xxx.xxx:port/ 三、本地 npm 源切换使用nrm，可以方…...

编程日记 2025/9/16 7:55:01

【Python 打造高效文件分类工具】

【Python】打造高效文件分类工具一、代码整体结构二、关键代码解析（一）初始化部分（二）界面创建部分（三）核心功能部分（四）其他辅助功能部分三、运行与使用四、示图五、作者有话说 …...

编程日记 2025/9/13 9:03:52

水务+AI应用探索（一）| FastGPT+DeepSeek 本地部署

在当下的科技浪潮中，AI 无疑是最炙手可热的焦点之一，其强大的能力催生出了丰富多样的应用场景，广泛渗透到各个行业领域。对于水务行业而言，AI 的潜力同样不可估量。为了深入探究 AI 在水务领域的实际应用成效，切实掌握…...

编程日记 2025/9/13 9:03:50

基于若依开发的工程项目管理系统开源免费，用于工程项目投标、进度及成本管理的OA 办公开源系统，非常出色！

一、简介今天给大家推荐一个基于 RuoYi-Flowable-Plus 框架二次开发的开源工程项目管理系统，专为工程项目的投标管理、项目进度控制、成本管理以及 OA 办公需求设计。该项目结合了 Spring Boot、Mybatis、Vue 和 ElementUI 等技术栈，提供了丰富的功能…...

编程日记 2025/9/13 9:03:48

设计模式-工厂模式

设计模式 - 工厂模式工厂模式（Factory Pattern）是一种创建型设计模式，它通过定义一个用于创建对象的接口，让子类决定实例化哪一个类，从而使得一个类的实例化延迟到子类。工厂模式通过将对象创建的逻辑抽象化&#xf…...

编程日记 2025/9/20 22:21:43

基于opencv的HOG+角点匹配教程

1. 引言在计算机视觉任务中，特征匹配是目标识别、图像配准和物体跟踪的重要组成部分。本文介绍如何使用 HOG（Histogram of Oriented Gradients，方向梯度直方图） 和角点检测（Corner Detection） 进行特征匹…...

编程日记 2025/9/20 9:37:30

《深度学习》——调整学习率和保存使用最优模型

调整学习率在使用 PyTorch 进行深度学习训练时，调整学习率是一个重要的技巧，合适的学习率调整策略可以帮助模型更好地收敛。 PyTorch 提供了多种调整学习率的方法，下面将详细介绍几种常见的学习率调整策略及实例代码： torch.opt…...

编程日记 2025/9/21 3:12:34

Ubuntu22.04配置cuda/cudnn/pytorch

Ubuntu22.04配置cuda/cudnn/pytorch 安装cuda官网下载.run文件并且安装/etc/profile中配置cuda环境变量 cudnn安装官网找cuda版本对应的cudnn版本下载复制相应文件到系统文件中安装pytorch官网找cuda对应版本的pytorchpython代码测试pytorch-GPU版本安装情况安装cuda 官网下…...

编程日记 2025/9/13 6:31:17

通俗理解-L、-rpath和-rpath-link编译链接动态库

一、参考资料链接选项 rpath 的应用和原理 | BewareMyPower的博客使用 rpath 和 rpath-link 确保 samba-util 库正确链接-CSDN博客编译参数-Wl和rpath的理解_-wl,-rpath-CSDN博客 Using LD, the GNU linker - Options Directory Options (Using the GNU Compiler Colle…...

编程日记 2025/9/19 12:20:15

【Golang】GC探秘/写屏障是什么？

之前写了一篇【Golang】内存管理 ，有了很多的阅读量，那么我就接着分享一下Golang的GC相关的学习。由于Golang的GC机制一直在持续迭代，本文叙述的主要是Go1.9版本及以后的GC机制，该版本中Golang引入了混合写屏障大幅度地优化了S…...

编程日记 2025/9/13 6:31:13

Linux(Centos 7.6)命令详解：head

1.命令作用将每个文件的前10行打印到标准输出(Print the first 10 lines of each FILE to standard output) 2.命令语法 Usage: head [OPTION]... [FILE]... 3.参数详解 OPTION: -c, --bytes[-]K，打印每个文件的前K字节-n, --lines[-]，打印前K行而…...

编程日记 2025/9/18 7:32:39

【工具变量】上市公司网络安全治理数据(2007-2023年）

网络安全是国家安全体系的重要组成部分，是确保金融体系稳定运行、维护市场信心的关键。网络安全治理是指通过一系列手段和措施，维护网络安全，保护网络环境的稳定和安全，旨在确保公司网络系统免受未经授权的访问、攻击和破坏&#…...

编程日记 2025/9/13 6:31:09

watermark解释

在 Apache Flink 中，Watermark 是处理事件时间（Event Time）的核心机制，用于解决流处理中因数据乱序或延迟到达而导致的窗口计算不准确问题。理解 Watermark 的关键在于以下几点： 1. 事件时间 vs. 处理时间事件时间&…...

编程日记 2025/9/18 20:23:20

Transformer 模型介绍（四）——编码器 Encoder 和解码器 Decoder

上篇中讲完了自注意力机制 Self-Attention 和多头注意力机制 Multi-Head Attention，这是 Transformer 核心组成部分之一，在此基础上，进一步展开讲一下编码器-解码器结构（Encoder-Decoder Architecture） Transformer 模…...

编程日记 2025/9/13 6:31:05

Linux安装Minio

1、下载rpm包 2、rpm 安装 rpm -ivh xx.rpm3、通过查看minion状态，查看其配置文件位置 systemctl start minio可以根据情况自定义修改配置文件内容，这里暂时不做修改 4、创建数据文件和日志文件，一般在/usr/local/ 5、编写启动脚本 #!/bi…...

编程日记 2025/9/13 6:31:04

JAVA EE初阶 - 预备知识（三）

一、中间件中间件是一种处于操作系统和应用程序之间的软件，它能够为分布式应用提供交互、资源共享、数据处理等功能，是现代软件架构中不可或缺的一部分。下面从多个方面为你详细介绍中间件： 定义与作用定义：中间件是连接两个或…...

编程日记 2025/9/13 6:31:01

百度热力图数据获取，原理，处理及论文应用6

目录 0、数据简介0、示例数据1、百度热力图数据日期如何选择1.1、其他实验数据的时间1.2、看日历1.3、看天气 2、百度热力图几天够研究？部分文章统计3、数据原理3.1.1 ** 这个比较重要，后面还会再次出现。核密度的值怎么理解？**3.1.2 Csv->…...

编程日记 2025/9/14 20:37:49

tcp连接的11种状态及常见问题。

tcp链接整体流程，如下图所示： TCP协议在连接的建立和终止过程中涉及11种状态，这些状态反映了连接的不同阶段。以下是每种状态的详细说明： 1. CLOSED 初始状态，表示没有活动的连接或连接已完全关闭。当应用程序关闭连…...

编程日记 2025/9/16 2:18:43

宝塔面板开始ssl后,使用域名访问不了后台管理

宝塔面板后台开启ssl访问后，用的证书是其他第三方颁发的证书再使用域名/xxx 的形式：https://域名:xxx/xxx 访问后台，结果出现如下，不管使用 http 还是 https 的路径访问都进不后台管理这个时候可以使用 https://ip/xxx 的方式来…...

编程日记 2025/9/13 0:11:15

5.日常英语笔记

sprouted tater 发芽的土豆 fluid 液体，流体 The doctor recommended drinking plenty of fluids 医生建议多喝流质适应新环境 adapt to the new environment adjust to the new surroundings get used to the new setting accommodate oneself to the new circu…...

编程日记 2025/9/21 1:54:23

利用工业相机及多光谱图像技术助力医疗美容皮肤AI检测方案

随着年轻人对皮肤的管理要求越来越高，“科技护肤”已成为线下医疗美业护肤行业转型升级之趋势。如何利用先进的图像识别技术和AI大数据分析，为医生和消费者提供个性化的皮肤诊断分析和护肤建议，利用工业相机及多光谱成像技术完美实现这一可能…...

编程日记 2025/9/13 0:11:11

qt QOpenGLTexture详解

1. 概述 QOpenGLTexture 是 Qt5 提供的一个类，用于表示和管理 OpenGL 纹理。它封装了 OpenGL 纹理的创建、分配存储、绑定和设置像素数据等操作，简化了 OpenGL 纹理的使用。 2. 重要函数构造函数： QOpenGLTexture(const QImage &image,…...

编程日记 2025/9/13 0:11:09

【Zookeeper如何实现分布式锁？】

Zookeeper如何实现分布式锁？一、ZooKeeper分布式锁的实现原理二、ZooKeeper分布式锁的实现流程三、示例代码四、总结一、ZooKeeper分布式锁的实现原理 ZooKeeper是一个开源的分布式协调服务，它提供了一个分布式文件系统的接口，可以用来存储和管理分布式系统的配置信息。 …...

编程日记 2025/9/17 19:36:15

mysql 学习16 视图，存储过程，存储函数，触发器

视图， 存储过程， 存储函数触发器...

编程日记 2025/9/15 5:39:03

（前端基础）HTML（一）

前提 W3C:World Wide Web Consortium（万维网联盟） Web技术领域最权威和具有影响力的国际中立性技术标准机构其中标准包括：机构化标准语言（HTML、XML） 表现标准语言（CSS） 行为标准&#xf…...

编程日记 2025/9/13 0:11:01

go设置镜像代理

前言在 Go 开发中，如果直接从官方源（https://proxy.golang.org）下载依赖包速度较慢，可以通过设置镜像代理来加速依赖包的下载。以下是增加 Go 镜像代理的详细方法： 一、设置 Go 镜像代理 1. 使用环境变量设置代理…...

编程日记 2025/9/13 0:10:59

matlab数据处理：创建网络数据

% 创建网格数据 [X, Y] meshgrid(x_data, y_data); 如 x_data [1 2 3 4] X 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 XY_data [X(:), Y(:)]; % 将X和Y合并成一个向量 X(:)表示将矩阵排成一列 XY_data 1 …...

编程日记 2025/9/13 0:10:55

在企业内部私有化部署 DeepSeek 或其他 AI 大模型时，基于一般场景的最低硬件配置建议

1. 中央处理器（CPU） 核心数：至少 4 核心，支持多线程任务。频率：至少 2.5 GHz。CPU 型号：Intel Core i5 或更高（如 i7 或 i9），或 AMD Ryzen 5000 系列以上。多核支持&…...

编程日记 2025/9/17 13:22:59

DeepSeek 助力 Vue 开发：打造丝滑的颜色选择器（Color Picker）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…...

编程日记 2025/9/20 4:36:07

相关文章：