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、运行项目
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
2、redux react-redux安装:
记录一下版本号:redux: v4.0.5 ------- react-redux: v7.2.2
npm install redux -S
npm install react-redux -S
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-----------------------------------------------删除组件