【React】脚手架创建项目

文章目录


创建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

相关推荐
r0ad3 分钟前
从痛点到解决方案:为什么我开发了Chrome元素截图插件
前端·chrome
OEC小胖胖10 分钟前
连接世界:网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台
jingling55523 分钟前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
en-route24 分钟前
使用 Flask 构建 Web 应用:静态页面与动态 API 访问
前端·python·flask
IT_陈寒26 分钟前
Vite 5年迭代揭秘:3个核心优化让你的项目构建速度提升200%
前端·人工智能·后端
怎么吃不饱捏41 分钟前
vue3+vite,引入阿里巴巴svg图标,自定义大小颜色
前端·javascript·vue.js
无敌最俊朗@43 分钟前
MQTT 关键特性详解
java·前端·物联网
JAVA学习通43 分钟前
微服务项目->在线oj系统(Java-Spring)----[前端]
java·开发语言·前端
excel1 小时前
Vue3 响应式系统核心执行器:Reactive Effect 与依赖调度机制
前端
南玖i3 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js