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

【React】脚手架创建项目

news 2026/4/1 1:42:20

文章目录

    • 创建React项目
    • 目录结构分析
    • 了解PWA
    • 脚手架中的webpack

创建React项目

◼ 创建React项目的命令如下：

​  注意：项目名称不能包含大写字母

​  另外还有更多创建项目的方式，可以参考GitHub的readme

命令：

create-react-app 你的项目名称

◼ 创建完成后，进入对应的目录，就可以将项目跑起来：

yarn start

在这里插入图片描述

目录结构分析

◼ 我们可以通过VSCode打开项目：

在这里插入图片描述

test-react
├─ README.md // readme说明文档
├─ package.json // 对整个应用程序的描述：包括应用名称、版本号、一些依赖包、以及项目的启动、打包等等（node管理项目必备文件）
├─ public
│    ├─ favicon.ico // 应用程序顶部的icon图标
│    ├─ index.html // 应用的index.html入口文件
│    ├─ logo192.png // 被在manifest.json中使用
│    ├─ logo512.png // 被在manifest.json中使用
│    ├─ manifest.json // 和Web app配置相关
│    └─ robots.txt // 指定搜索引擎可以或者无法爬取哪些文件
├─ src
│    ├─ App.css // App组件相关的样式
│    ├─ App.js // App组件的代码文件
│    ├─ App.test.js // App组件的测试代码文件
│    ├─ index.css // 全局的样式文件
│    ├─ index.js // 整个应用程序的入口文件
│    ├─ logo.svg // 刚才启动项目，所看到的React图标
│    ├─ serviceWorker.js // 默认帮助我们写好的注册PWA相关的代码
│    └─ setupTests.js // 测试初始化文件
└─ yarn.lock

注意 serviceWorker.js在最新的 “react”: "^18.2.0"版本中，没有配置，需要手动添加！！！！

了解PWA

◼ 整个目录结构都非常好理解，只是有一个PWA相关的概念：

​  PWA全称Progressive Web App，即渐进式WEB应用；

​  一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用；

​  随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能；

​  这种Web存在的形式，我们也称之为是 Web App；

◼ PWA解决了哪些问题呢？

​  可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏；

​  实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能；

​  实现了消息推送；

​  等等一系列类似于Native App相关的功能；

◼ 更多PWA相关的知识，可以自行去学习更多；

​  https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps

脚手架中的webpack

◼ React脚手架默认是基于Webpack来开发的；

◼ 没有在目录结构中看到任何webpack相关的内容？

​  原因是React脚手架将webpack相关的配置隐藏起来了（其实从Vue CLI3开始，也是进行了隐藏）；

◼ 如果我们希望看到webpack的配置信息？

​  我们可以执行一个package.json文件中的一个脚本："eject": "react-scripts eject"

​  这个操作是不可逆的，所以在执行过程中会给与我们提示；

​ yarn eject

在这里插入图片描述

在这里插入图片描述

相关文章：

【React】脚手架创建项目

文章目录 创建React项目目录结构分析了解PWA脚手架中的webpack 创建React项目 ◼ 创建React项目的命令如下： ​  注意：项目名称不能包含大写字母 ​  另外还有更多创建项目的方式，可以参考GitHub的readme 命令： create-rea…...

编程日记 2024/1/21 1:44:54

力扣70. 爬楼梯（动态规划 Java，C++解法）

Problem: 70. 爬楼梯 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 由于本题目中第i层台阶只能由于第i- 1层台阶和第i-2层台阶走来，所以可以联想到动态规划，具体如下： 1.定义多阶段决策模型：对于每一上台阶看作一种状…...

编程日记 2024/1/21 1:42:53

Wpf 使用 Prism 实战开发Day13

配置 AutoMapper 关系映射 在上一节 ToDoController 控制器，或 IToDoService 服务接口中，方法的传参都是直接传的实体类。但在实际开发过程中，这样是不允许的。标准且规范的做法是，定义一个数据传输层，即Dto层。 一.在…...

编程日记 2024/1/21 1:41:52

62 C++ 多线程 -- mutex互斥量只能使用一次的问题分析-----以及解决方案递归mutex：recursive_mutex。

一 前提 以及问题 我们注意到，如果mutex.lock()两次，就会有问题 如下的代码有runtime exception mutex mymutex;mymutex.lock();mymutex.lock();//共享数据访问处理代码mymutex.unlock();mymutex.unlock(); 但是有这样的case存在 class Teacher183 …...

编程日记 2024/1/21 1:38:46

Chrome Devtools 调试指南

Chrome DevTools 是一套内置于 Google Chrome 浏览器的开发者工具，可以帮助开发者进行网页和应用的调试、优化和测试。以下是一些基本的调试指南： 打开 Chrome DevTools： 你可以通过以下方式之一打开 DevTools： 右键点击页面上的任…...

编程日记 2024/1/21 1:37:45

【Qt5】QString的成员函数chop

2024年1月19日&#xff0c;周五下午 QString 的 chop 方法用于从字符串的末尾移除指定数量的字符。这个方法会修改原始字符串&#xff0c;并返回 void。 下面是一个简单的示例&#xff1a; #include <QString> #include <QDebug>int main() {QString originalStr…...

编程日记 2024/1/21 1:34:42

Spring中的注解

Spring的配置 spring 2.5前xml spring 2.5后xmlannotation spring 3.0后annotationJavaConfig配置类 注解&#xff1a; 1.注入类 替换&#xff1a;<bean id"" class""></bean> 位置&#xff1a;类 语法:Component(value"注入容器中的…...

编程日记 2024/1/21 1:32:40

JavaScript 中的事件

1、鼠标事件&#xff1a; 鼠标单击事件&#xff08;click&#xff09;&#xff1a; 方法一 &#xff08;onclick&#xff09; <button id"btn" onclick"alert(88888)">点击弹框</button> 方法二&#xff08;利用addEventListener&#xff09;…...

编程日记 2024/1/21 1:31:39

hasattr、getattr、setattr

在Python中&#xff0c;hasattr()、getattr()和setattr()是一组内置函数&#xff0c;用于对对象的属性进行操作和查询。这些函数提供了一种方便的方式来检查对象是否具有特定属性&#xff0c;获取属性的值&#xff0c;以及设置属性的值。 1. hasattr hasattr()函数是一种重要…...

编程日记 2024/1/21 1:30:38

构建高可用消息队列系统 01

构建高可用消息队列系统 01 引言1. RabbitMQ简介介绍1.1 什么是RabbitMQ1.2 RabbitMQ的核心特性1.3 RabbitMQ与AMQP 2.安装RabbitMQ3.消息队列实践总结 引言 在当今互联网时代&#xff0c;消息队列系统扮演着至关重要的角色&#xff0c;它们被广泛应用于分布式系统、微服务架构…...

编程日记 2024/1/21 1:27:35

十本你不容错过的Docker入门到精通书籍推荐

前言&#xff1a; 最近有许多小伙伴私信让我推荐几本关于Docker学习的书籍&#xff0c;今天花了一下午的时间在网上查阅了一些资料和结合自己平时工作中的一些学习参考资料书籍写下了这篇文章。注意以下书籍都是十分优秀的Docker学习书籍&#xff08;因此排名不分先后&#xff…...

编程日记 2024/1/21 1:26:34

【AI接口】语音版、文心一言大模型和AI绘图、图片检测API

文章目录 一、语音版大模型AI1、接口2、请求参数3、请求参数示例4、接口返回示例 二、AI图片鉴黄合规检测API1、接口2、请求参数3、请求参数示例4、接口返回示例5、报错说明6、代码开源 三、人工智能AI绘画API1、接口2、请求参数3、请求参数示例4、接口返回示例5、AI绘画成果展…...

编程日记 2024/1/21 1:24:33

VUE 中的 v-for 和 v-if 是否可以共存

VUE 中的 v-for 和 v-if 是否可以共存 前言1、面试经2、正确回答3、总结总结&#xff1a; 前言 要成功&#xff0c;先发疯&#xff0c;头脑简单往前冲&#xff01; 三金四银&#xff0c;金九银十&#xff0c;多学知识&#xff0c;也不能埋头苦干&#xff0c;要成功&#xff0c…...

编程日记 2024/1/21 1:23:32

kubernetes 权限控制

RBAC引入了4个顶级资源对象&#xff1a;Role、ClusterRole&#xff1a;角色&#xff0c;用于指定一组权限&#xff1b;RoleBinding、ClusterRoleBinding&#xff1a;角色绑定&#xff0c;用于将角色&#xff08;权限&#xff09;赋予给对象 咱们通过Role可以配置命名空间下资源…...

编程日记 2024/1/21 1:20:29

vue中父组件异步传值，渲染问题

vue中父组件异步传值&#xff0c;渲染问题 父组件异步传值&#xff0c;子组件渲染不出来。有如下两种解决方法&#xff1a; 1、用v-if解决&#xff0c;当父组件有数据才渲染 <Child v-if"dataList && dataList.length > 0" :data-list"dataLis…...

编程日记 2024/1/21 1:19:28

09前后端分离+SSM整合的小案例

前端的Node 后端的Tomcat&#xff0c;是前端程序的容器。前端的npm 后端的maven 1. 导入前端项目 node版本&#xff1a;16.16.0 配置阿里镜像 npm config set registry https://registry.npmjs.org/ 更新npm版本 npm install -g npm9.6.6 用vscode打开解压后的项目 , 右上角…...

编程日记 2024/1/21 1:17:26

模仿ProTable创建ProTable组件

不多说废话直接上代码 父组件 // index.jsx/*** description 此ProTable是根据ProComponents里的ProTable模仿封装的简易版本* */ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from react import { Card, Table } from antd import…...

编程日记 2024/1/21 1:15:25

新品发布 | 多通道总线记录仪TLog1004，是你期待的吗？

新品发布 2024年1月12日&#xff0c;同星智能又发布一款多通道 CAN &#xff08;FD&#xff09;总线、LIN 总线接口logger设备&#xff0c;此款产品在TLog1002基础上进行了升级&#xff0c;同时内置 3 路数字输入和 2 路数字输出&#xff0c;便于多种信号测量和系统集成。可以满…...

编程日记 2024/1/21 1:11:21

Double数据类型保留3位小数

Double scrapGrn scrapQty * Double.parseDouble(lot.getCnvrsnFctr()) / 1000 ; // 保留3位小数 DecimalFormat decimalFormat new DecimalFormat("#.###"); String scrapGrnStr decimalFormat.format(scrapGrn); 345.12344 处理后 为 345.123 34…...

编程日记 2024/1/21 1:07:16

08- OpenCV：形态学操作（膨胀与腐蚀 、提取水平与垂直线）

目录 前言 一、膨胀&#xff08;Dilation&#xff09;与 腐蚀&#xff08;Erosion&#xff09; 二、形态学操作 1、开操作&#xff08;Opening&#xff09; 2、闭操作&#xff08;Closing&#xff09; 3、形态学梯度&#xff08;Morphological Gradient&#xff09; 4、…...

编程日记 2024/1/21 1:05:14

收藏！小白也能看懂的大模型推理能力训练与未来趋势深度解析

文章讨论了大模型的发展历程&#xff0c;从早期的“读很多书”模式到引入“思考”能力的转变。重点介绍了推理式思考与智能体式思考的区别&#xff0c;以及Qwen团队在模型训练中的经验与挑战。文章指出&#xff0c;未来的重心将从单纯训练模型“思考”转向训练智能体“边想边做…...

编程新知 2026/4/1 1:04:32

自适应滤波实战：如何用LMS算法在MATLAB/Simulink中快速搭建一个‘简易版’维纳滤波器？

自适应滤波实战&#xff1a;LMS算法在MATLAB/Simulink中的工程化实现 在信号处理领域&#xff0c;自适应滤波技术因其强大的环境适应能力而备受青睐。想象一下&#xff0c;你正在处理一段被噪声污染的语音信号&#xff0c;或是试图从复杂工业环境中提取有效振动特征——传统固定…...

编程新知 2026/4/1 0:36:06

Wan2.2-I2V-A14B多模态延伸：结合ASR语音识别生成带字幕视频方案

Wan2.2-I2V-A14B多模态延伸&#xff1a;结合ASR语音识别生成带字幕视频方案 1. 方案概述 在当今视频内容创作领域&#xff0c;为视频添加专业字幕一直是个耗时费力的工作。传统流程需要先录制视频&#xff0c;再通过人工听写或专业软件添加字幕&#xff0c;整个过程可能需要花…...

编程新知 2026/4/1 0:15:43

基于STM32F103主控与BMP085气压计、HMC5883L磁力计的九轴DMP解算与卡尔曼...

九轴解算航向角、俯仰角、滚转角输出f103主控&#xff0c;气压计bmp085&#xff0c;磁力计hmc5883l&#xff0c;dmp解算&#xff0c;卡尔曼滤波矩阵运算&#xff0c;多份代码前阵子蹲在宿舍焊飞控的时候&#xff0c;突然发现之前抄的九轴解算代码总飘&#xff0c;哪怕把飞控放在…...

编程新知 2026/3/31 23:57:28

PyTorch 2.8镜像环境配置：CUDA 12.4与cuDNN 8+版本兼容性验证指南

PyTorch 2.8镜像环境配置&#xff1a;CUDA 12.4与cuDNN 8版本兼容性验证指南 1. 镜像环境概述 PyTorch 2.8深度学习镜像是一个经过深度优化的通用计算环境&#xff0c;专为现代AI工作负载设计。这个镜像最显著的特点是完美适配了NVIDIA最新的CUDA 12.4和cuDNN 8版本&#xff…...

编程新知 2026/3/31 22:28:12

大厂笔试面试八股文-算法-数组常考题-final

刷了200道数组题,笔试面试还是不会做?这10道搞懂就够了 刷了200道数组题,面试还是不会做? 问题不是你刷得不够多,而是没抓住核心套路。 我整理了35道大厂真题,发现其实就5个核心技巧。今天把最重要的10道题和背后的套路,全部分享给你。 offer直通车-大厂校招大礼包&#x…...

编程新知 2026/3/31 21:41:08

Guardrails未来版本路线图：10大新功能全面展望与AI安全演进

Guardrails未来版本路线图&#xff1a;10大新功能全面展望与AI安全演进 【免费下载链接】guardrails Adding guardrails to large language models. 项目地址: https://gitcode.com/gh_mirrors/gu/guardrails 在大型语言模型&#xff08;LLM&#xff09;应用日益普及的今…...

编程新知 2026/3/31 20:48:19

基于YOLO的安全帽佩戴检测系统~Python+模型训练+2026原创+YOLO算法

项目简介 基于 YOLO 的智能安全帽佩戴检测平台&#xff0c;面向施工现场图片识别、检测记录管理与安全宣传信息展示等业务场景。系统后端采用 Flask 搭建 RESTful API 服务&#xff0c;结合数据库进行业务数据持久化存储&#xff0c;并通过 JWT 实现用户身份认证与接口访问控制…...

编程新知 2026/3/31 20:46:17

通义千问1.5-1.8B-Chat-GPTQ-Int4在MySQL数据库中的智能应用

通义千问1.5-1.8B-Chat-GPTQ-Int4在MySQL数据库中的智能应用 让数据库听懂人话&#xff0c;让查询像聊天一样简单 你有没有遇到过这样的情况&#xff1a;面对复杂的业务数据&#xff0c;明明知道想要什么结果&#xff0c;却不知道怎么写SQL语句&#xff1f;或者看着慢查询日志头…...

编程新知 2026/3/31 19:47:29

Bidili Generator实操演示：LoRA权重强度与CFG Scale协同调优黄金组合

Bidili Generator实操演示&#xff1a;LoRA权重强度与CFG Scale协同调优黄金组合 1. 引言&#xff1a;当定制化风格遇上精细控制 如果你用过Stable Diffusion XL&#xff08;SDXL&#xff09;来生成图片&#xff0c;可能会遇到这样的困扰&#xff1a;好不容易找到一个喜欢的L…...

编程新知 2026/3/31 19:35:16