React 脚手架

1、创建脚手架

全局安装 npm i -g create-react-app

create-react-app 项目名

npm start 运行项目

2、目录结构分析

README.md 说明文档

package.json 对应用程序的描述:包括应用名称、版本号、依赖包、项目的启动、打包等

public

favicon.ico 应用程序顶部的icon图标

index.html 入口文件

logo192.png 被在 mianfest.json 中使用

logo512.png 被在 mianfest.json 中使用

mianfest.json 和 web app 配置相关

robots.txt 指定搜索引擎可以或者无法爬取哪些文件

src

App.css App组件相关的样式

App.js App组件的代码文件

App.test.js App组件的测试代码文件

index.css 全局的样式文件

index.js 整个应用程序的入口文件

log.svg 启动初始项目,看到的React图标

serviceworker.js 默认帮助我们写好的注册PWA相关的代码

setupTests.js 测试初始化文件
PWA:全称 Progressive Web App,即渐进式 web 应用 。一个PWA应用首页显示一个网页,可以通过web技术编写出一个网页应用。随后添加上 App Mainfest 和 Service Worker 来实现 PWA 的安装和离线功能。这种Web存在的形式,我们也称之为是 Web App。
PWA 解决了哪些问题?

(1)可以添加至主屏幕,点击主屏幕图标可以实现启动动画以及隐藏地址栏

(2)实现离线缓存功能,即使用户手机没有网络,依然可以使用一些离线功能

(3)实现了消息推送

·

相关推荐
我叫蒙奇13 小时前
JS中的隐式类型转换
前端
他们叫我秃子13 小时前
前端开发转 Go 全栈(四):代码写在前面,却要最后执行?我终于搞懂了 defer
前端·后端·go
生戎马 平安京策13 小时前
只学一点点:我的技术学习策略
前端·javascript·react.js
大鹏说大话14 小时前
HTML5 地理定位 Geolocation:获取用户位置的“红线”与最佳实践
前端·html·html5
Csvn14 小时前
content-visibility: auto —— 让浏览器跳过离屏渲染的性能黑科技
前端
小鹰信息技术服务部14 小时前
Edge安装包MicrosoftEdgeSetup.exe无法运行,点击没反应
前端·edge
webkubor15 小时前
一次前端生产白屏复盘:旧 HTML、Hash 资源和 MIME type text/html
前端·前端工程化
咩咩啃树皮15 小时前
第63篇【终极整合巨作】从零手写原生中后台管理系统|整合62篇全部前端知识点|从头到尾完整架构+全功能逻辑
前端·架构
得物技术16 小时前
实战从零开始构建一个Coding Agent:Violin |得物技术
javascript·架构·llm
Highcharts16 小时前
用Highcharts如何动态向一个序列添加点-示列讲解
前端