React脚手架
前端工程的复杂化
如果只是开发小的demo 不需要考虑这些复杂的问题：
- 目录结构如何组织划分
- 如何管理文件之间的相互依赖
- 如何管理第三方模块的依赖
- 项目发布前如何压缩、打包项目
- 。。。
前端项目越来越复杂化：
- css可能是使用less、sass等预处理器进行编写，我们需要将它们转成普通的css才能被浏览器解析
- JavaScript代码不再只是编写在几个文件中，而是通过模块化的方式，被组成在成百上千个文件中，我们需要通过模块化的技术来管理它们之间的相互依赖
- 项目需要依赖很多的第三方库，如何更好的管理它们（比如管理它们的依赖、版本升级等）
脚手架的出现，就是帮助我们解决这一系列问题的
脚手架让项目从搭建到开发，再到部署，整个流程变得快速和便捷
包管理工具
npm
- Node Package Manager
yarn
- Yarn 是为了弥补 npm 的一些缺陷而出现的.
- npm install -g yarn
npm和yarn命令对比
创建React项目
create-react-app
- 注意： 项目名称不包含大写
项目结构
- package.json 配置文件
- 比如 yarn start 就是执行了配置文件中的
- gitignore git忽略
- yarn.lock 记录版本
了解PWA
PWA概念
- PWA全程 Progressive Web App 渐进式WEB应用
- 一个PWA应用首先是一个页面 通过Web技术编写出一个网页应用
- 之后添加上App Manifest 和Service Worker 实现PWA的安装和离线等功能
- 又称之为Web App
PWA解决的问题
- 可以将网页添加到主屏幕；
- 实现离线缓存功能 即使用户手机没有网络依然可以使用一些离线功能
- 实现了消息推送
- 以及一系列类似Native App 功能
Webpack
- webpack是一个现代的JS应用程序的静态模块打包器
- 当webpack处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有模块打包成一个或者多个bundle
- 在开发阶段用任意方式来编写代码 最终webpack会处理打包
脚手架中的Webpack
暴露配置：yarn eject 该操作不可逆
在模块化开发中，我们需要手动的来导入React、ReactDOM，因为它们都是在我们安装的模块中；
import
export
