【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

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码3 小时前
1.
react.js·node.js·angular.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app