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

·

相关推荐
Eric_见嘉30 分钟前
打开这个 VSC 设置「组件引用位置」和数量就都清楚了
前端·typescript·visual studio code
李高钢34 分钟前
Python Tornado 框架入门:从零搭建你的第一个异步 Web 应用
前端·python·tornado
宁风1 小时前
JavaScript:函数体系-1
前端·javascript
mmsx1 小时前
Android 手簿 ADB 无线调试全攻略:USB 转 WiFi 一键连接
android·前端
guwentian1 小时前
Rolldown vs esbuild vs Webpack:Rust 打包器大战我们该怎么选
前端·webpack·rust·esbuild
特立独行的猫A1 小时前
用纯 Rust 重写 Podcastfy:把网页、PDF 和一段文字,变成一档双人对话播客
前端
oooo_z1 小时前
美股历史K线数据API接口选型指南:iTick覆盖1分钟到月线全周期
服务器·前端·javascript
今日无bug1 小时前
从 0 到 1 搭建端侧 AI 项目:DeepSeek-R1 + WebGPU + React + TS + Tailwind 全栈笔记
前端·react.js·typescript
mmsx2 小时前
MapLibre 实战 08|GPS 点漂了几百米才被发现:GCJ-02 纠偏原理与"转两次"陷阱
android·前端
李高钢2 小时前
Python Flask 框架入门:从零搭建你的第一个 Web 应用
前端·python·flask