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)实现了消息推送

·

相关推荐
东风破_12 分钟前
LLM 为什么记不住你?无状态、messages 和上下文管理
javascript·人工智能
梨子同志21 分钟前
qiankun
前端
梨子同志30 分钟前
Nginx
前端
梨子同志31 分钟前
NestJS
前端
梨子同志1 小时前
Next.js
前端
谭光志1 小时前
工具塞满上下文窗口怎么办?深度拆解 AI Agent Tool Search 按需加载实现原理
前端·后端·ai编程
Hilaku1 小时前
前端架构师的克制:什么时候该坚决对新技术说不?
前端·javascript·程序员
陈随易1 小时前
前端项目部署只要30秒
前端·后端·程序员
本末倒置1831 小时前
从 Vue CLI 迁移到 Rsbuild 后,JSX 突然全挂了?一次排查记录
前端
古夕1 小时前
多应用同域部署下 Favicon 异常问题排查与治理
前端·javascript