前言

这篇文章的笔记是在2018年学习React时整理的内容，虽然那时候没有hooks，但是还是决定整理出来，因为React class也是很经典的，后面可以再写几篇react hooks相关的react文章。

技术点

js
ES6
webpack
npm

---

create-react-app 脚手架工具
组件化思维
JSX
开发调试工具
虚拟 DOM
生命周期
React-transition-group
Redux
Antd
UI,容器组件
无状态组件
redux-thunk
redux-saga
Styled-components
immutabel.js
redux-immutable
axios

React 介绍

Facebook 推出
2013 年开源
函数式编程
使用人数最多的前端框架
健全的文档与完善的社区
React Fiber

React原来是php项目，后来改了编译器，换成js来编译，然后加入虚拟dom。所以React只做两件事，一件事是渲染ui，一件事是响应事件。
mvc和mvvm都是早些年angular的设计理念。react并不是什么mvvm和mvc，它只是一个很小的东西，只做那两件事儿。它只是个工具。backbone才是真正的mvc，它是模仿java的spring，挪到前端来了。

React.js 与 Vue.js 对比

React.js 灵活性更大一些
React.js 处理一些复杂的方案时有更多一点的选择
Vue.js 提供了更加丰富的 API 实现功能更简单
Vue.js 的灵活性就有了一定的限制
复杂度大的项目时倾向使用 React.js
复杂度不是特别高的项目时用 vue.js 开发更爽一些

React 组件

一个页面很难写，但是如果把他们拆分成一个个小组件就简单多了。
import React, {Component} from 'react'中的Component 等价于 React.Component
之所以要引入 React，因为 将 html 标签或者自定组件生成虚拟dom时要用到React.createElemnt()这个方法，所以你不引入就会报错。

React JSX

在 react 中 JSX 语法可以直接写 html 标签，不需要你在 html 标签外面加单、双引号
jsx 中自定义组件无论是函数式还是类语法糖式，都要首字母大写，如果是小写就会不支持，因为避免和 html原本的标签起冲突。

环境搭建

简单介绍

引入.js来使用 React，这种方式性能很低，不好维护。
通过脚手架工具来编码，一般通过grunt、gulp、webpack这样的工具来编译脚手架。
官方脚手架工具：Create-react-app
使用 npm 命令：npm install -g create-react-app 安装这个脚手架工具
使用命令create-react-app my-app 创建一个项目
cd 进入 my-app目录 使用 yarn start 开一个服务后自动打开浏览器查看默认页面

工程介绍

npm run start 和 yarn start 一样
yarn.lock 文件：项目文件的安装包以及一些限制（不要去动）。
README.md 文件：这是这个项目的说明文件。
package.json文件：这是项目的依赖包以及指令定义说明文件。
.gitignore文件：如果你进行代码管理的时候，不想把一些文件上传到仓库时，可以将那些文件及文件夹写到里面去。
node_modules 文件夹：存放一些第三方的包文件、一些第三方的模块儿。

public 文件夹

favicon.ico : 网站图标文件
index.html: 简单的模板文件，<noscript>当前网页禁用脚本</noscript>标签标识页面如果禁用了脚本，就会显示脚本标签中的内容。
manifest.json: 配置 PWA 渐进式 web 应用的 清单内容，如定义 当在手机桌面时作为一个 app 快捷名称。如定义 当在手机桌面时作为一个 app 快捷图标的规格大小。如定义 当在手机桌面时作为一个 app 快捷图标的网址，定义主题颜色、背景颜色等等。
首页会去引入这个文件 <link rel = "manifest" href = "%PUBLIC_URL%/manifest.json">

src 文件夹

当前项目所有的源代码，整个程序的入口在 index.js 中。

import React from 'react' 表示引入 react 模块儿
import './index.css' 表示引入这个 css 文件嵌入到 js 中
import App from './App' 表示引入当前目录下的 App.js 文件
import logo from './logo.svg' 表示引入一个图片格式的文件
import registerServiceWorker from './registerServiceWorker' 表示注册一个ServiceWorker

import registerServiceWorker from './registerServiceWorker'，表示引入一个registerServiceWorker.js文件，这是一个 PWA 文件 表示写网页就像写一个手机 app 一样。
是渐进式web 应用的标准，把这个网页放到一台 https 协议的服务器上，用户首次访问这个网页需要联网，如果突然间这个网页断网了，第二次也依然可以访问这个网页，因为registerServiceWorker将网页存储到本地了。

App.test.js 文件：这是一个自动化的测试文件。