【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

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/632785.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NRF52832跟NRF52840性能区别 高端蓝牙智能手环穿戴应用

nRF52840可以说是nRF52832的超强升级版,虽然同样是蓝牙5.0,但是整体稳定性和性能上的提升却相差甚远,下面为大家简单讲解下NRF52832和NRF52840的性能上的区别! 先说说共同点:这两款芯片都支持蓝牙5.0,MCU也…

Vue3前端h5移动端页面预览PDF使用pdfjs-dist,添加自定义文本水印

pdfjs-dist版本 pnpm i pdfjs-dist2.5.207 <script setup> import {ref, onMounted, watch} from vue import { useRoute } from "vue-router"; import * as pdfjsLib from pdfjs-distconst route useRoute() // &#xff01; pdfjsLib.GlobalWorkerOptions.w…

谷粒商城篇章8 ---- P236-P247 ---- 购物车【分布式高级篇五】

目录 1 环境搭建 1.1 新建购物车服务模块gulimall-cart 1.2 购物车服务相关配置 1.2.1 pom.xml 1.2.2 yml配置 1.2.2.1 application.yml配置 1.2.2.2 bootstrap.yml配置 1.2.3 主类 1.3 SwitchHosts增加配置 1.4 网关配置 1.5 整合SpringSession 1.5.1 session数据…

定义一个求圆面积的方法,并将计算结果保留5位小数

.尝试开发一个程序&#xff0c;定义一个求圆面积的方法&#xff0c;其中以圆半径作为参数&#xff0c;并将计算结果保留5位小数。 首先&#xff0c;在Java中&#xff0c;可以使用Math类中的常量Math.PI来表示圆周率。要使用Math.PI&#xff0c;你可以将其赋值给一个变量&#x…

禅道下载安装及基本使用(项目周期管理)实施必会!!!

文章目录 前言&#xff1a;一、为什么要使用禅道&#xff1f;二、禅道的下载与安装 前言&#xff1a; 禅道的使用能使公司提高项目管理效率、促进团队协作、支持敏捷开发&#xff0c;并可根据具体需求进行个性化配置。 本文章博主将以一个项目周期来带你们了解禅道。 一、为什…

SCSI/UFS储存架构/协议/电源管理/命令处理流程

UFS子系统架构 1.UFS协议 无论是ufs host controller部分还是ufs device部分&#xff0c;他们都将遵循统一的UFS规范 UFS Application Layer(UAP)应用层 1.UFS command set (UCS) UCS处理命令集&#xff0c;如读、写命令等&#xff0c;.使用的命令是简化的SCSI命令&#xff08;…

鸿蒙harmony--HTTP数据请求的简单使用

不得不承认&#xff0c;年龄越大性格就越简单&#xff0c;更喜欢安静&#xff0c;不喜欢去了解别人&#xff0c;也不想被了解&#xff0c;只想静静的做自己喜欢的事…… 目录 一&#xff0c;场景介绍 二&#xff0c;接口说明 三&#xff0c;http请求使用 一&#xff0c;场景介绍…

Python for循环练习-输入一个非负整数N,计算N的阶乘N!

题目&#xff1a;输入一个非负整数N&#xff0c;计算N的阶乘N&#xff01; 要计算非负整数N的阶乘&#xff08;N!&#xff09;&#xff0c;可以使用for循环来累乘从1到N的所有整数。 实现&#xff1a; # 读取用户输入的非负整数 n int(input("请输入一个非负整数&…

ora-12154无法解析指定的连接标识符

用户反映查询的时候报错ora-12154 这个系统只做历史数据查询使用&#xff0c;使用并不平凡&#xff0c;该数据库曾做过一次服务器间的迁移。 用户描述&#xff0c;所有oracle客户端查询该视图都报tns错误&#xff0c;一般ora-12154会发生在连接数据库时&#xff0c;因为tns配…

[文件IO]文件操作的几个笔试题

目录 1.扫描指定目录&#xff0c;找到要查询的文件名&#xff0c;并询问用户是否要删除 2. 文件的复制 3.扫描指定目录&#xff0c;并找到名称或者内容中包含指定字符的所有普通文件&#xff08;不包含目录&#xff09; 1.扫描指定目录&#xff0c;找到要查询的文件名&#x…

Hardware-Aware-Transformers开源项目笔记

文章目录 Hardware-Aware-Transformers开源项目笔记开源项目背景知识nas进化算法进化算法代码示例 开源项目Evolutionary Search1 生成延迟的数据集2 训练延迟预测器3 使延时约束运行搜索算法4. 训练搜索得到的subTransformer5. 根据重训练后的submodel 得到BLEU精度值 代码结构…

医学图像的图像处理、分割、分类和定位-1

一、说明 本报告全面探讨了应用于医学图像的图像处理和分类技术。开展了四项不同的任务来展示这些方法的多功能性和有效性。任务 1 涉及读取、写入和显示 PNG、JPG 和 DICOM 图像。任务 2 涉及基于定向变化的多类图像分类。此外&#xff0c;我们在任务 3 中包括了胸部 X 光图像…

java数据结构与算法刷题-----LeetCode977. 有序数组的平方

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 时间复杂度 空间复杂度 O(n * l o g 2 n log_2{n} log2​…

PyTorch 中的距离函数深度解析:掌握向量间的距离和相似度计算

目录 Pytorch中Distance functions详解 pairwise_distance 用途 用法 参数 数学理论公式 示例代码 cosine_similarity 用途 用法 参数 数学理论 示例代码 输出结果 pdist 用途 用法 参数 数学理论 示例代码 总结 Pytorch中Distance functions详解 pair…

Js面试之防抖与节流

Js面试之防抖与节流 防抖节流二者区别触发方式不同执行时间点不同 适用场景不同 最近在整理一些前端面试中经常被问到的问题&#xff0c;分为vue相关、react相关、js相关、react相关等等专题&#xff0c;可持续关注后续内容&#xff0c;会不断进行整理~ 防抖&#xff08;Deboun…

JVM工作原理与实战(十九):运行时数据区-方法区

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、运行时数据区 二、方法区 1.方法区介绍 2.方法区在Java虚拟机的实现 3.类的元信息 4.运行时常量池 5.字符串常量池 6.静态变量的存储 总结 前言 JVM作为Java程序的运行环境…

App分发测试平台:改变应用开发的游戏规则

App分发测试平台是一个提供应用开发者上传、测试、分享和发布应用的在线服务平台。它为开发者提供了一个高效的测试环境&#xff0c;并为用户提供了一个方便的应用获取渠道。其中&#xff0c;测试环节尤为关键&#xff0c;因为它能够确保应用在上线之前达到预期的功能和性能。 …

问题:Feem无法发送信息OR无法连接(手机端无法发给电脑端)

目录 前言 问题分析 资源、链接 其他问题 前言 需要在小米手机、华为平板、Dell电脑之间传输文件&#xff0c;试过安装破解的华为电脑管家、小米的MIUI文件传输等&#xff0c;均无果。&#xff08;小米“远程管理”ftp传输倒是可以&#xff0c;但速度太慢了&#xff0c;且…

Java JVM 堆、栈、方法区详解

目录 1. 栈 2. 堆 3. 方法区 4. 本地方法栈 5. 程序计数器 首先来看一下JVM运行时数据区有哪些。 1. 栈 在介绍JVM栈之前&#xff0c;先了解一下 栈帧 概念。 栈帧&#xff1a;一个栈帧随着一个方法的调用开始而创建&#xff0c;这个方法调用完成而销毁。栈帧内存放者方…

SpringBoot 集成 Canal 基于 MySQL 做数据同步

一、canal 组件关系 下载地址&#xff1a;https://github.com/alibaba/canal/releases/download/canal-1.1.7/ 这里面主要的有两个 canal.deployer-1.1.7.tar.gz 和 canal.adapter-1.1.7.tar.gz&#xff0c;canal.admin-1.1.7.tar.gz 是一个监控服务&#xff0c;可选&#xf…