![大纲](https://camo.githubusercontent.com/465a78efb3269ee8af72fc2f436f179e5a8547bb8cc8ce0a08c06bf7aed24fc4/68747470733a2f2f692e6c6f6c692e6e65742f323031392f30352f31322f356364373862623364376431632e706e67)
npm install -g create-react-app
create-react-app projectName
npm install redux --save
npm start
<!-- 弹出配置文件,自定义配置webpack -->
npm run eject
- server/server-1.js
- express + mongodb, develop web back-end interface
npm install express --save
<!-- auto refresh node -->
npm install -g nodemon
nodemon server.js
brew install mongodb
<!-- 通过mongodb操作mongodb,存储json -->
npm install mongoose --save
sudo mongod
<!-- another iTerm tab -->
mongo
<!-- get in server.js path and run -->
nodemon server.js
npm install react --save
npm run start
3-2 React 基础知识回顾 2-组件之间传递数据
3-3 React 基础知识回顾 3-组件内部 state
3-5 React 基础知识回顾 5-React 生命周期
3-6 React 基础知识回顾 6-安装 CHROME 扩展
npm install antd-mobile@next --save
npm install antd-mobile --save
<!-- load components and styles as needed -->
npm install babel-plugin-import --save
- package.json, config, auto import antd-mobile
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd-mobile",
"style": "css"
}
]
]
},
4-1 Redux 状态管理 1-结合小例子看 Redux 是什么?
- 1 safe box(store), record(state)
- 2 commit(dispatch), doing(action)
- 3 handle(reducer), get state(store.getState) and action(store.dispatch) change status, return new state, listen(store.subscribe)
4-2 Redux 状态管理 2-Redux 如何和 React 一起用
<!-- redux handle async -->
npm install redux-thunk --save
4-7 Redux 状态管理 7-使用 React-redux(Connect 可以用装饰器的方法来书写)
<!-- redux handle async -->
npm install redux-thunk --save
npm install redux-devtools-extension --save
<!-- async -->
npm install react-redux --save
<!-- 装饰器 -->
npm install babel-plugin-transform-decorators-legacy --save-dev
"plugins": [
"transform-decorators-legacy"
]
4-8 react-router4 路由 01-初识 React-router4
<!-- React-router4 -->
npm install react-router-dom --save
4-10 react-router4 路由 03-和 Redux 配合-复杂 Redux 应用1
- index-5-router4-2
- run server/server-1.js
- 端口不一致时,使用 proxy 配置转发
- axios 拦截器,统一 loading 处理 config.jsx
- redux 里使用异步数据,渲染界面
"proxy": "http://localhost:9093"
sudo mongod
<!-- open aother iTerm tab -->
mongo
<!-- cd server, run server -->
nodemon server.js
<!-- open aother iTerm tab -->
npm run start