一. React脚手架
1. 前端工程的复杂化
-
如果我们开发的仅仅只是几个小的demo, 那么永远不需要考虑一些复杂的问题
复杂化.png - 模块化开发, 被组成在成百上千个文件中, 相互依赖, 三方库的依赖管理
- 为了解决上面这些问题, 我们需要再去学习一些工具
- 比如babel(ES6 -> ES5)、webpack、gulp. 配置它们转换规则、打包依赖、热更新等等一些的内容;
- 脚手架的出现, 就是帮助我们解决这一系列问题的;
2. 脚手架是什么呢?
-
传统的脚手架指的是建筑学的一种结构: 在搭建楼房、建筑物时, 临时搭建出来的一个框架;
真实的脚手架.png -
编程中提到的脚手架(Scaffold), 其实是一种工具, 帮我们可以快速生成项目的工程化结构;
编程中的脚手架.png
3. 前端脚手架
- 对于现在比较流行的三大框架都有属于自己的脚手架;
- Vue的脚手架: vue-cli
- Angular的脚手架: angular-cli
- React的脚手架: create-react-app
- 他们的作用都是帮助我们生成一个通用的目录结构, 并且已经将我们所需的工程环境配置好.
- 使用这些脚手架需要依赖什么呢?
- 目前这些脚手架都是使用node编写的, 并且都是基于webpack的;
- 所以我们必须在自己的电脑上安装node环境;
- 这里我们主要学习React, 所以我们还是以React的脚手架工具: create-react-app作为讲解;
4. 安装node
- React脚手架本身需要依赖node, 所以我们需要安装node环境;
LTS(长期支持维护的版本)官网 -
无论是windows还是Mac OS, 都可以通过直接下载;
node官网
-
验证命令.png
- Node -npm 包管理工具
npm: node packages managet - 已经帮助安装好npm工具
5. 包管理工具
什么是npm?
- 全称Node Package Manager, 即"node包管理器";
- 作用肯定是帮助我们管理一下依赖的工具包(比如react、react-deom、axios、babel、webpack等等);
- 作者开发的目的就是为了解决"模块管理很糟糕"的问题
-
另外, 还有一个大名鼎鼎的node包管理工具yarn:
Yarn.png yarn --version
6. Yarn和npm命令对比
命令对比.png
7. 安装脚手架
- 再介绍一个工具 cnpm, 国内用, 特殊的环境, 镜像设置成taobao
npm install -g cnpm --registry=https://registry.npm.taobao.org- 最后一个需要安装的是创建React项目的脚手架:
npm install -g create-react-app
create-react-app --version
- 安装nodejs
- npm yarn cnpm
- create-react-app
8. 创建React项目
- 现在, 我们就可以通过脚手架来创建React项目了.
- 创建React项目的命令如下:
- 注意: 项目名称不能包含大写字母
- 另外还有更多创建项目的方式, 可以参考GitHub的readme
create-react-app 项目名称
- 另外还有更多创建项目的方式, 可以参考GitHub的readme
- 创建完成后, 进入对应的目录, 就可以将项目跑起来:
cd 01-test-react
yarn start
自动打开浏览器进入网页
localhost:3000
初始样子.png
9. 目录结构分析
目录结构.png
- node_modules里面有很多东西
-
yarn add axios把库的依赖下载到本地node_modules, 不会手动管理它
目录.png - .gitignore 源代码管理工具, git, 当前代码共享push到代码仓库, 有些东西不需要共享, 如node_modules, 配置信息不需要共享, 在gitignore里面做一个配置
-
package.json, 非常重要的文件, 关于整个项目管理的配置文件, yarn start 本质上是执行 scripts中的脚本
package.json.png - README.md 项目的描述, markdown的格式
- yarn.lock 记录着真实的版本依赖, 解决一些版本混乱的问题, ^表示当前依赖的版本可以进行小版本的迭代, 小版本更新可以更新, 这样做会产生一个弊端, 早期没有lock文件, npm5开始有的, 一般很少手动修改
另外两个文件夹
- public文件夹
- favicon.icon, React图标
- index.html 每一个项目的入口
- log192.png log512.png 图片
- mianifest.json文件
- robots.txt 设置爬虫规则, 哪些可以哪些不可以爬
- scr文件夹
- 之后写源代码的文件, 以后写的react代码都是在里面的
- App.css, App.js 函数式组件, 热更新
- App.test.js 测试用例, index.css 全局样式, index.js React入口, log.svg 旋转的图片 svg画出来的, setupTests.js 初始化操作
- mianifest.json
10. 了解PWA
- 整个目录结构都非常好理解, 只是有一个PWA相关的概念:
- PWA全称Progressive Web App, 即渐进式WEB应用;
- 一个PWA应用首先是一个网页, 可以通过Web技术编写出一个网页应用;
- 随后添加上App Manifest和Service Worker来实现PWA的安装和离线等功能;
- 这种Web存在的形式, 我们也称之为是Web App;
- PWA解决了哪些问题呢?
- 可以添加至主屏幕, 点击主屏幕图标可以实现启动动画以及隐藏地址栏;
- 实现离线缓存功能, 即使用户手机没有网络, 依然可以使用一些离线功能;
- 实现了消息推送;
- 等等一系列类似于Native App的功能;
- index.js中调用Service Worker里面的东西
-
不需要的话, 可以删掉
image.png - 路径里最好不要有中文
11. webpack是什么?
- 我们说过React的脚手架是基于Webpack来配置的:
- webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler);
-
当webpack处理应用程序时, 他会递归地构建一个依赖关系图(dependency graph), 其中包含应用程序需要的每个模块, 然后将所有这些模块打包成一个或多个bundle;
webpack.png
-
12. 脚手架中的webpack
- 目录结构里面没有看到webpack的配置
- 原因是React脚手架将webpack相关的配置隐藏起来了(其实从Vue CLI3开始, 也是进行了隐藏);
-
yarn eject这个操作是不可逆的, 默认不希望暴露或者修改
webpack显示.png
-
- 脚手架创建的项目, 让文件夹变得非常的大, 课件文件缩小, 为什么变大? node_modules里面有特别多的文件146M, 以后给的课件, 没有node_modules文件夹, yarn start直接跑是跑不起来的, 要先执行
yarn install, 把需要安装的依赖进行安装, 生成一个node_modules文件夹
二. 开始用脚手架写一个项目
- src中的文件夹中所有的文件全部删除
-
public中的不用的文件删除
删除操作.png -
这是yarn start, 报错, 脚本管理webpack, webpack找入口, src下面的index.js, 必须包含这个文件.
报错.png - 界面上一片空白, React代码, 在界面上渲染内容.
- common js的语法, module.exports = require
- 想用必须做一个导入
import React from "react";
import ReactDOM from "react-dom";
//是否加default
import {sum} from './utils';
import {sum, mul} from './utils';
ReactDOM.render(<h2>Hello React</h2>, document.getElementById("root"));
-
每一个小功能放到一个单独的模块里面
结构.png
推荐书籍: 你不知道的JavaScript - 人民邮电出版社
- 开源的书
链接：https://pan.baidu.com/s/1pfviFDVDg7EpF35HQWEc6Q 密码：vaft
你不知道的JavaScript.png
coderwhy的React核心技术与开发实战课程链接
少年~来做同学呀~.png
