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

【React】项目的搭建

article 2026/1/12 13:39:49

  • create-react-app 搭建
  • vite 搭建
  • 相关下载

在Vue中搭建项目的步骤：1.首先安装脚手架的环境，2.通过脚手架的指令创建项目

在React中有两种方式去搭建项目：1.和Vue一样，先安装脚手架然后通过脚手架指令搭建；2.npx create-react-app my-app （项目名称小写的英文字母）

npm和npx的区别：npm搭建的命令环境，( 脚手架版本 )不会再发生变化。npx创建的项目永远是最新的( 脚手架版本 )，它不用下载环境，直接创建项目

create-react-app 搭建

脚手架搭建：

npx create-react-app myapp

如果不想安装最新的react版本怎么办需要版本升级或降级：

npm i react-dom@18.3.1 --legacy-peer-deps
npm i react@18.3.1 --legacy-peer-deps执行以上命令会自动更新package.json中react-dom和react的版本号以及node_modules中的依赖包，无需手动修改删除

项目目录：

publicindex.html：单页面应用的入口，唯一的htmlmanifest.json：移动端app配置文件（等同于uniApp中的manifest.json）robots.txt：爬虫协议，给搜索引擎看的，这个协议没有强制性，它是用于pc端的（小程序中的爬虫协议是sitemap.json）
srcApp.css：根组件的css文件App.js：根组件的js文件App.test.js：根组件的测试文件（可以不要）index.css：全局css文件index.js：主入口js文件（类似于vue的main.js）reportWebVitals.js：配置测试用的（可以不要）setupTests.js：在它里面配置引入了测试文件/模块（可以不要）.gitignore：git文件，哪些文件不需要上传package.json：项目对npm各种包的依赖，但是它锁定的是大版本，也就是版本号第一位如："react": "^18.3.1"，锁定的是18如果有向上的标号"^"，是根据情况下载最新的包，所以实际上可能项目中的包版本是"react": "^18.3.3"package-lock.json：锁定安装时的包的版本号，需要上传到git，保证大家的依赖包一致

在这里插入图片描述

vite 搭建

npm create vite@latest

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

npm create vite@latest myapp -- --template react npm create vite@latest myapp -- --template react-ts

在这里插入图片描述

相关下载

AntD：npm install antd --save

官网：https://ant.design/docs/spec/introduce-cn  （蚂蚁金服的UI框架Ant Design）Ant Design它提供组件库：React基于移动端的组件库：Ant Design Mobile  <!-- https://mobile.ant.design/zh/ -->Vue各个版本： Ant Design of Vue  <!-- https://antdv.com/docs/vue/introduce -->Angular：Ant Design of Angular  <!-- https://ng.ant.design/docs/introduce/zh -->(1) 使用的时候，在组件内引入，按需加载import {Button} from 'antd';<Button type="primary">Primary Button</Button>(2) 引入主文件，src > App.css中引入（重置默认样式表，或者其它的如：Normalize.css）@import '~antd/dist/reset.css';

路由：npm i react-router-dom

ReactRouter包含三个内容：(1) react-router：核心库
(2) react-router-dom：正常PC用的
(3) react-router-native：移动native用的

Sass：npm i sass
不建议直接暴露文件的不可逆操作，建议使用 craco （create-react-app config）在 React 脚手架的基础上进行 Webpack 配置。具体内容在Webpack\Vite栏中查看

如何在React中使用Less | Sasssass(1) npm i sass(2) src > App.scss（sass文件的后缀有两种：.scss 或 .sass，前者更符合我们的代码编写习惯）less(1) npm i less less-loader（less-loader可以把less转成css）(2) 改react的配置项目create-react-app的配置文件被作者隐藏起来了，需要暴露配置文件首先需要将项目提交到本地仓：git add .git commit -m 'init'(3) npm run eject （暴露配置，弹出配置操作是不可逆的）(4) config文件夹下 => webpack.config.js文件 （具体修改内容查看文件中，修改了配置文件后重启一下项目）快捷键：ctrl + f，查找输入：scss，修改后即可在React中使用Less

清理项目，将多余的文件不要的内容删除

相关文章：

【React】项目的搭建

create-react-app 搭建vite 搭建相关下载 在Vue中搭建项目的步骤&#xff1a;1.首先安装脚手架的环境&#xff0c;2.通过脚手架的指令创建项目 在React中有两种方式去搭建项目&#xff1a;1.和Vue一样&#xff0c;先安装脚手架然后通过脚手架指令搭建&#xff1b;2.npx create-…...

编程日记 2026/1/8 18:09:59

如何提高单元测试的覆盖率

一、定位未覆盖的代码 ​利用 IDEA 的覆盖率工具​&#xff1a; 右键测试类 → ​Run with Coverage&#xff0c;或使用 AltShiftF10&#xff08;Windows&#xff09;打开运行菜单选择覆盖率。​查看高亮标记​&#xff1a; ​绿色​&#xff1a;已覆盖代码行。​红色​&#x…...

编程日记 2025/12/9 16:12:00

【SAP ME 43】RESRCE表操作导致HANA中表锁定解决方案

症状 SAP ME 通过执行以下 SQL 查询导致 RESRCE 表上的 HANA 数据库锁： 从 RESRCE WHERE HANDLE =? 选择站点待更新 或者 SELECT HANDLE FROM RESRCE WHERE HANDLE =... 用于更新 其他条款 HANA、锁、RESRCE 原因和前提条件 该问题是由运行 SQL FOR UPDATE 查询时的 …...

编程日记 2025/12/30 22:15:18

使用C#和FFmpeg开发RTSP视频播放器的完整指南

RTSP(Real Time Streaming Protocol)是流媒体技术中广泛使用的协议&#xff0c;广泛应用于视频监控、视频会议和在线直播等领域。本文将详细介绍如何使用C#和FFmpeg开发一个功能完整的RTSP视频播放器&#xff0c;涵盖从环境搭建到核心功能实现的全部过程。 一、开发环境准备 …...

编程日记 2025/12/31 23:52:22

CSS例子 ＞ 图片瀑布流布局(vue2)

<template><div class"container"><!-- 临时容器用于计算高度 --><div v-if"!isLayoutReady" class"temp-container"><divv-for"(item, index) in list":key"temp- index":ref"(el) > …...

编程日记 2026/1/12 8:28:42

1.2软考系统架构设计师：系统架构的定义与作用 - 练习题附答案及超详细解析

系统架构定义与作用综合知识单选题 题目覆盖核心概念、发展历程、设计原则、评估标准及易混淆点&#xff0c;附答案解析&#xff1a; 1. 系统架构的标准定义源自于以下哪个标准&#xff1f; A. ISO/IEC 9126 B. IEEE 1471-2000 C. TOGAF 9.2 D. ITIL v4 答案&#xff1a;B 简…...

编程日记 2026/1/8 18:09:54

关于springmvc的404问题的一种猜测解决方案

本文是记录关于在学习动力结点老杜的springmvc时候遇到的404报错的一种解决方式&#xff1b; 由于本人之前学过老杜的springmvc&#xff0c;且运行成功&#xff0c;当时使用的是tomcat10.1.19版本。 idea使用2023.3.2版本。 而这次进行回顾的时候&#xff0c;使用tomcat10.0.1…...

编程日记 2026/1/4 5:30:07

PGSql常用操作命令

1 连接数据库&#xff1a; psql -U postgres &#xff08;psql -U username -d databse_name -h host -W&#xff09; -U 指定用户 -d 指定数据库 -h 要链接的主机 -W 提示输入密码 psql -h 主机名/服务器IP -p 端口号 -U 用户名 -d 数据库名 注意&#xff1a;&#xff08;…...

编程日记 2025/12/8 8:06:23

使用Postman调测“获取IAM用户Token”接口实际操作

概述 Postman是网页调试与辅助接口调用的工具&#xff0c;具有界面简洁清晰、操作方便快捷的特性&#xff0c;可以处理用户发送的HTTP请求&#xff0c;例如&#xff1a;GET&#xff0c;PUT、POST&#xff0c;DELETE等&#xff0c;支持用户修改HTTP请求中的参数并返回响应数据。…...

编程日记 2026/1/4 18:04:58

Java面试（2025）—— Spring MVC

什么是Spring MVC Spring MVC 是 Spring 框架的一个 基于 Java 的 Web 开发模块&#xff0c;它实现了 MVC&#xff08;Model-View-Controller&#xff09;架构模式&#xff0c;用于构建灵活、松耦合的 Web 应用程序。 它是 Spring 生态的核心组件之一&#xff0c;通过简化 HTT…...

编程日记 2025/12/30 17:00:17

如何测试雷达与相机是否时间同步？

在多传感器融合系统中&#xff0c;相机与雷达的协同感知已成为环境理解的关键。相机通过捕捉纹理信息识别物体类别&#xff0c;而雷达利用激光或毫米波实现全天候精确测距。两者的数据融合既能避免单一传感器缺陷&#xff08;如相机受光照影响、雷达缺乏语义信息&#xff09;&a…...

编程日记 2026/1/1 1:28:16

Redis基本安装和部署

环境&#xff1a; linux docker 安装: sudo apt install -y redis-server运行&#xff1a; 后台模式&#xff1a;redis-server & &#xff0c; 前台模式&#xff1a;redis-server , 用配置文件运行redis: sudo redis-server /etc/redis/redis.conf , /etc/redis/redis.co…...

编程日记 2025/12/29 18:24:56

数据分析与产品、运营、市场之间如何有效对齐

数据分析的重要性在于它能够将海量的原始信息转化为可操作的洞察。以产品开发为例，通过用户行为数据的分析，产品经理可以清晰了解哪些功能被频繁使用，哪些设计导致用户流失，从而优化迭代方向。运营团队则依靠数据分析来监控供应链效率、预测需求波动，甚至通过实时数据调整…...

编程日记 2025/12/9 7:27:05

Pytorch分布式训练(DDP)（记录）

为什么要分布式训练&#xff1f; 随着深度学习模型参数量和数据量不断增大&#xff0c;单卡显存和计算能力有限&#xff0c;单机单卡训练难以满足大模型/大数据集训练需求&#xff0c;因此我们需要&#xff1a; 单机多卡并行&#xff1a;利用一台机器上多张 GPU 加速训练。 …...

编程日记 2026/1/4 22:30:03

爆肝整理！Stable Diffusion的完全使用手册（二）

继续介绍Stable Diffusion的文生图界面功能。 往期文章详见: 爆肝整理&#xff01;Stable Diffusion的完全使用手册&#xff08;一&#xff09; 下面接着对SD的文生图界面的进行详细的介绍。本期介绍文生图界面的截图2&#xff0c;主要包含生成模块下的采用方法、调度类型、迭…...

编程日记 2026/1/10 0:22:28

Redis 键管理

Redis 键管理 以下从键重命名、随机返回键、键过期机制和键迁移四个维度展开详细说明&#xff0c;结合 Redis 核心命令与底层逻辑进行深入分析&#xff1a; 一、键重命名 1. ​RENAME​​ 与 ​RENAMENX​​ **RENAME key newkey​**&#xff1a; 功能&#xff1a;强制重命名…...

编程日记 2025/12/8 2:46:07

OpenCV day5

函数内容接上文&#xff1a;OpenCV day4-CSDN博客 目录 9.cv2.adaptiveThreshold(): 10.cv2.split()&#xff1a; 11.cv2.merge()&#xff1a; 12.cv2.add()&#xff1a; 13.cv2.subtract()&#xff1a; 14.cv2.multiply()&#xff1a; 15.cv2.divide()&#xff1a; 1…...

编程日记 2025/12/30 17:19:22

基于Spring Boot+微信小程序的智慧农蔬微团购平台-项目分享

基于Spring Boot微信小程序的智慧农蔬微团购平台-项目分享 项目介绍项目摘要目录系统功能图管理员E-R图用户E-R图项目预览登录页面商品管理统计分析用户地址添加 最后 项目介绍 使用者&#xff1a;管理员、用户 开发技术&#xff1a;MySQLSpringBoot微信小程序 项目摘要 随着…...

编程日记 2025/12/30 21:14:50

WPF的发展历程

文章目录 WPF的发展历程引言起源与背景&#xff08;2001-2006&#xff09;从Avalon到WPF设计目标与创新理念 WPF核心技术特点与架构基础架构与渲染模型关键技术特点MVVM架构模式 WPF在现代Windows开发中的地位与前景当前市场定位与其他微软UI技术的关系未来发展前景 社区贡献与…...

编程日记 2025/12/30 0:32:50

Franka机器人ROS 2来袭：解锁机器人多元应用新可能

前言&#xff1a; 在机器人技术蓬勃发展的当下&#xff0c;每一次创新都可能为行业带来新的变革。2025年3月12日&#xff0c;Franka Robotics发布的Franka ROS 2软件包首次版本0.1.0&#xff0c;将著名的franka_ros软件包引入当前的ROS 2 LTS Humble Hawksbill&#xff0c;这一…...

编程日记 2026/1/7 7:58:42

树莓派5+Vosk+python实现语音识别

简介 Vosk是语音识别开源框架&#xff0c;支持二十种语言 - 中文&#xff0c;英语&#xff0c;印度英语&#xff0c;德语&#xff0c;法语&#xff0c;西班牙语&#xff0c;葡萄牙语&#xff0c;俄语&#xff0c;土耳其语&#xff0c;越南语&#xff0c;意大利语&#xff0c;荷…...

编程日记 2026/1/8 2:37:01

系统分析师知识点：访问控制模型OBAC、RBAC、TBAC与ABAC的对比与应用

在信息安全领域&#xff0c;访问控制是确保数据和资源安全的关键技术。随着信息系统复杂度的提高&#xff0c;访问控制技术也在不断演进&#xff0c;从早期简单的访问控制列表(ACL)发展到如今多种精细化的控制模型。本文将深入剖析四种主流的访问控制模型&#xff1a;基于对象的…...

编程日记 2026/1/1 13:22:44

Golang errors 包快速上手

文章目录 1.变量2.类型3.函数3.1 New3.2 Is简介函数签名核心功能示例代码使用场景注意事项小结 3.3 As简介函数签名核心功能示例代码使用场景注意事项小结 3.4 Unwrap简介函数签名核心功能使用示例使用场景注意事项小结 3.5 Join简介函数签名核心功能使用场景注意事项小结 4.小…...

编程日记 2026/1/7 18:17:17

数据结构——顺序表(C语言实现)

1.顺序表的概述 1.1 顺序表的概念及结构 在了解顺序表之前&#xff0c;我们要先知道线性表的概念&#xff0c;线性表&#xff0c;顾名思义&#xff0c;就是一个线性的且具有n个相同类型的数据元素的有限序列&#xff0c;常见的线性表有顺序表、链表、栈、队列、字符串等等。线…...

编程日记 2026/1/5 18:35:36

Qt Multimedia 库总结

Qt Multimedia 库总结 Qt Multimedia 库是 Qt 框架中用于处理多媒体内容的模块&#xff0c;支持音频、视频、摄像头和录音功能。它为开发者提供了跨平台的 API&#xff0c;适用于桌面、移动和嵌入式设备。本文将从入门到精通&#xff0c;逐步解析 Qt Multimedia 的核心功能、使…...

编程日记 2025/12/30 10:12:23

STP原理与配置以及广播风暴实验STP实验

学习目标 环路引起的问题 掌握STP的工作原理 掌握STP的基本配置 STP的配置 环路引起的问题 一、广播风暴&#xff08;Broadcast Storm&#xff09; 问题原理&#xff1a; 交换机对广播帧&#xff08;如 ARP 请求、DHCP 发现报文&#xff09;的处理方式是洪泛&#xff0…...

编程日记 2026/1/4 8:18:31

网络不可达network unreachable问题解决过程

问题&#xff1a;访问一个环境中的路由器172.16.1.1&#xff0c;发现ssh无法访问&#xff0c;ping发现回网络不可达 C:\Windows\System32>ping 172.16.1.1 正在 Ping 172.16.1.1 具有 32 字节的数据: 来自 172.16.81.1 的回复: 无法访问目标网。 来自 172.16.81.1 的回复:…...

编程日记 2026/1/1 1:28:16

力扣经典拓扑排序

207. 课程表&#xff08;Course Schedule&#xff09; 你这个学期必须选修 numCourses 门课程&#xff0c;记为 0 到 numCourses - 1 。 在选修某些课程之前需要一些先修课程。先修课程按数组 prerequisites 给出&#xff0c;其中 prerequisites[i] [ai, bi] &#xff0c;表…...

编程日记 2026/1/3 21:29:16

Session与Cookie的核心机制、用法及区别

Python中Session与Cookie的核心机制、用法及区别 在Web开发中&#xff0c;Session和Cookie是两种常用的用于跟踪用户状态的技术。它们在实现机制、用途和安全性方面都有显著区别。本文将详细介绍它们的核心机制、用法以及它们之间的主要区别。 一、Cookie的核心机制与用法 1…...

编程日记 2025/12/8 17:23:43

【第16届蓝桥杯C++C组】--- 2025

hello呀&#xff0c;小伙伴们&#xff0c;这是第16届蓝桥杯第二道填空题&#xff0c;和第一道填空题一样也是十分基础的题目&#xff0c;有C语言基础基本都可以解&#xff0c;下面我讲讲我当时自己的思路和想法&#xff0c;如果你们有更优化的代码和思路&#xff0c;也可以分享…...

编程日记 2026/1/12 4:27:37