【React】脚手架创建项目
文章目录
- 创建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…...
力扣70. 爬楼梯（动态规划 Java，C++解法）
Problem: 70. 爬楼梯 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 由于本题目中第i层台阶只能由于第i- 1层台阶和第i-2层台阶走来，所以可以联想到动态规划，具体如下： 1.定义多阶段决策模型：对于每一上台阶看作一种状…...
Wpf 使用 Prism 实战开发Day13
配置 AutoMapper 关系映射 在上一节 ToDoController 控制器，或 IToDoService 服务接口中，方法的传参都是直接传的实体类。但在实际开发过程中，这样是不允许的。标准且规范的做法是，定义一个数据传输层，即Dto层。 一.在…...
62 C++ 多线程 -- mutex互斥量只能使用一次的问题分析-----以及解决方案递归mutex：recursive_mutex。
一 前提 以及问题 我们注意到，如果mutex.lock()两次，就会有问题 如下的代码有runtime exception mutex mymutex;mymutex.lock();mymutex.lock();//共享数据访问处理代码mymutex.unlock();mymutex.unlock(); 但是有这样的case存在 class Teacher183 …...
Chrome Devtools 调试指南
Chrome DevTools 是一套内置于 Google Chrome 浏览器的开发者工具，可以帮助开发者进行网页和应用的调试、优化和测试。以下是一些基本的调试指南： 打开 Chrome DevTools： 你可以通过以下方式之一打开 DevTools： 右键点击页面上的任…...
【Qt5】QString的成员函数chop
2024年1月19日，周五下午 QString 的 chop 方法用于从字符串的末尾移除指定数量的字符。这个方法会修改原始字符串，并返回 void。 下面是一个简单的示例： #include <QString> #include <QDebug>int main() {QString originalStr…...
Spring中的注解
Spring的配置 spring 2.5前xml spring 2.5后xmlannotation spring 3.0后annotationJavaConfig配置类 注解： 1.注入类 替换：<bean id"" class""></bean> 位置：类 语法:Component(value"注入容器中的…...
JavaScript 中的事件
1、鼠标事件： 鼠标单击事件（click）： 方法一 （onclick） <button id"btn" onclick"alert(88888)">点击弹框</button> 方法二（利用addEventListener）…...
hasattr、getattr、setattr
在Python中，hasattr()、getattr()和setattr()是一组内置函数，用于对对象的属性进行操作和查询。这些函数提供了一种方便的方式来检查对象是否具有特定属性，获取属性的值，以及设置属性的值。 1. hasattr hasattr()函数是一种重要…...
构建高可用消息队列系统 01
构建高可用消息队列系统 01 引言1. RabbitMQ简介介绍1.1 什么是RabbitMQ1.2 RabbitMQ的核心特性1.3 RabbitMQ与AMQP 2.安装RabbitMQ3.消息队列实践总结 引言 在当今互联网时代，消息队列系统扮演着至关重要的角色，它们被广泛应用于分布式系统、微服务架构…...
十本你不容错过的Docker入门到精通书籍推荐
前言： 最近有许多小伙伴私信让我推荐几本关于Docker学习的书籍，今天花了一下午的时间在网上查阅了一些资料和结合自己平时工作中的一些学习参考资料书籍写下了这篇文章。注意以下书籍都是十分优秀的Docker学习书籍（因此排名不分先后ÿ…...
【AI接口】语音版、文心一言大模型和AI绘图、图片检测API
文章目录 一、语音版大模型AI1、接口2、请求参数3、请求参数示例4、接口返回示例 二、AI图片鉴黄合规检测API1、接口2、请求参数3、请求参数示例4、接口返回示例5、报错说明6、代码开源 三、人工智能AI绘画API1、接口2、请求参数3、请求参数示例4、接口返回示例5、AI绘画成果展…...
VUE 中的 v-for 和 v-if 是否可以共存
VUE 中的 v-for 和 v-if 是否可以共存 前言1、面试经2、正确回答3、总结总结： 前言 要成功，先发疯，头脑简单往前冲！ 三金四银，金九银十，多学知识，也不能埋头苦干，要成功，…...
kubernetes 权限控制
RBAC引入了4个顶级资源对象：Role、ClusterRole：角色，用于指定一组权限；RoleBinding、ClusterRoleBinding：角色绑定，用于将角色（权限）赋予给对象 咱们通过Role可以配置命名空间下资源…...
vue中父组件异步传值，渲染问题
vue中父组件异步传值，渲染问题 父组件异步传值，子组件渲染不出来。有如下两种解决方法： 1、用v-if解决，当父组件有数据才渲染 <Child v-if"dataList && dataList.length > 0" :data-list"dataLis…...
09前后端分离+SSM整合的小案例
前端的Node 后端的Tomcat，是前端程序的容器。前端的npm 后端的maven 1. 导入前端项目 node版本：16.16.0 配置阿里镜像 npm config set registry https://registry.npmjs.org/ 更新npm版本 npm install -g npm9.6.6 用vscode打开解压后的项目 , 右上角…...
模仿ProTable创建ProTable组件
不多说废话直接上代码 父组件 // index.jsx/*** description 此ProTable是根据ProComponents里的ProTable模仿封装的简易版本* */ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from react import { Card, Table } from antd import…...
新品发布 | 多通道总线记录仪TLog1004，是你期待的吗？
新品发布 2024年1月12日，同星智能又发布一款多通道 CAN （FD）总线、LIN 总线接口logger设备，此款产品在TLog1002基础上进行了升级，同时内置 3 路数字输入和 2 路数字输出，便于多种信号测量和系统集成。可以满…...
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…...
08- OpenCV：形态学操作（膨胀与腐蚀 、提取水平与垂直线）
目录 前言 一、膨胀（Dilation）与 腐蚀（Erosion） 二、形态学操作 1、开操作（Opening） 2、闭操作（Closing） 3、形态学梯度（Morphological Gradient） 4、…...
QEMU理解与分析系列（16）：QEMU启动方式分析
QEMU启动方式分析启动流程RISC-V specific│┌──────────────────┼──────────────────┐▼ ▼ ▼┌──────────────┐ ┌──────────────┐ ┌───────────…...
美股api的WebSocket偶尔断连，心跳间隔设多少秒最合适？
做美股相关的数据服务时，我碰到一个小烦恼：WebSocket连接偶尔断开。尤其是实时tick数据，程序明明还在跑，提示“断开”，有时候还挺突然的。我自己测试了不少方法，发现心跳设置是最容易影响稳定性的一个点。 …...
权限管理测试
在 RuoYi（若依）系统中，要实现一个自定义接口的权限验证，通常需要遵循 “后端定义 -> 前端配置 -> 角色分配 -> 测试验证” 的流程。以下是具体的实施步骤及详细解析：第一步：后端定义接口并添加注解…...
长沙自动变速箱维修哪家强？这些公司口碑好
好的，遵照您的指示，我将以资深变速箱维修领域分析者的身份，围绕“长沙自动变速箱维修哪家强”这一核心问题，撰写一篇客观、实用、合规的深度分析文章。车主选维修店，最怕被“宰”与被“拖”在长沙，如果你的…...
避坑指南：ESP32-C3蓝牙开发中GATT读写事件的常见误解与正确姿势
ESP32-C3蓝牙GATT开发实战：破解读写事件的核心逻辑与高效数据流设计 当你在ESP32-C3上实现蓝牙温度传感器时，是否遇到过这样的困境：手机APP读取到的温度值总是比实际值延迟了2秒？或者明明在代码里更新了数据，客户端却始…...
利用Taotoken多模型能力为内容生成平台提供弹性AI服务
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 利用Taotoken多模型能力为内容生成平台提供弹性AI服务 应用场景类，设想一个内容生成平台需要根据任务复杂度选择不同能…...
告别手动描图！用AutoCAD Civil 3D 2024快速搞定两期土方横断面对比（附模板）
告别手动描图！用AutoCAD Civil 3D 2024快速搞定两期土方横断面对比（附模板） 在土木工程领域，土方量计算是项目成本控制与进度管理的关键环节。传统CAD手动绘制横断面的方式不仅耗时费力，更难以应对设计变更带来的反复修…...
【计算机组成原理】无符号整数乘法原理（基于移位累加，零基础看懂CPU乘法）
前言在数字电路与计算机组成原理中，加法是最基础的运算，而乘法是高频常用运算。很多初学者疑惑：计算机没有专门的乘法口诀，到底怎么实现二进制乘法？而在数字运算中，乘法是比加法更复杂、但底层逻辑完全依托…...
2026年六大GEO公司排名竞争力横评及企业选型实操指南针
根据易观发布的《中国 GEO 行业发展报告 2026》显示，2026年国内 GEO 市场规模已达 30 亿元，在短短 3 年内实现了 35 倍的爆发式增长，超过 68% 的中大型企业已将生成式引擎优化正式纳入年度预算。在当前由大模型驱动的信息分发范式下ÿ…...
【Windows版Redis安装本地使用】
本地安装运行 一、Redis官网 二、下载 三、配置redis服务 一、Redis官网 官网: redis 二、下载 下载版本:版本下载 下载完后，解压文件到文件夹 三、配置redis服务 打开目录对应的终端 安装redis服务 redis-server.exe --service-install redis.windows.conf --loglevel verbos…...