从create-react-app 项目搭建开始

1、全局安装(4.0.1)

npm i -g create-react-app
查看版本号：create-react-app -V

2、创建新项目

create-react-app my-app

项目结构：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── yarn.lock
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── logo192.png
│   └── logo512.png
│   └── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── reportWebVitals.js
    └── setupTests.js

3、运行项目

自动打开 http://localhost:3000/

npm start 或者 yarn start

4、安装依赖

1、React Router安装：

react-router-dom ( 应用于浏览器端的路由库 )
react-router-native ( 应用于native端的路由 )

npm install --save react-router-dom
npm install --save react-router-native

react-router-dom基本使用>>>

2、redux react-redux安装：
记录一下版本号：redux: v4.0.5 ------- react-redux: v7.2.2

npm install redux -S
npm install react-redux -S

react-redux 的基本使用>>>

5、vscode相关插件

ES7 React/Redux/GraphQL/React-Native snippets
用于快速生成模板（部分常用快捷键）

rcc 快速创建一个组件（使用extends方式）
rconst 快速创建一个 constuctor
rcredux 快速创建一个 redux格式的类模板
clg 是 console.log()的快捷键

6、组件生命周期 1.7版本

componentWillReceiveProps ------------子组件props变化就会调用（已废弃）

创建到完成阶段
constructor -------------------------------------------------------实例化对象
componentWillMount ------------------------------------------------即将进入DOM(已废弃)
getDerivedStateFromProps(props,state){ return state }-------------即将进入Dom
render ------------------------------------------------------------组件渲染
componentDidmount--------------------------------------------------已经进入DOM，渲染完成
组件更新阶段
shouldcomponentUpdate ---------------------------------------------判断是否需要重新渲染组件
render ------------------------------------------------------------组件渲染
componentWillUpdate------------------------------------------------组件即将重新渲染(已废弃)
getSnapshotBeforeUpdate(newProps, newState){ return newState } ----组件更新前
componentDidUpdate ------------------------------------------------组件重新渲染完成
组件销毁
componentWillUnmount-----------------------------------------------删除组件