從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-----------------------------------------------刪除組件