React操作流程
1、安装react脚手架
npm install create-react-app -g
create-react-app my-app
就完成了简单的脚手架安装
需求 npm 要在5.2.0版本及以上
npm install [email protected] -g
现在可以用 npx create-react-app my-app实现
cd my-app
npm start启动项目
2、根据自己的需求 安装对应的依赖
"dependencies": {
"@babel/core": "7.1.0",
"@svgr/webpack": "2.4.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.4",
"babel-plugin-named-asset-import": "^0.2.3",
"babel-preset-react-app": "^6.1.0",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.1",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"eslint": "5.6.0",
"eslint-config-react-app": "^3.0.5",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.11.1",
"file-loader": "2.0.0",
"fork-ts-checker-webpack-plugin-alt": "0.4.14",
"fs-extra": "7.0.0",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.1",
"jest-resolve": "23.6.0",
"mini-css-extract-plugin": "0.4.3",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.1.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.0.6",
"postcss-safe-parser": "4.0.1",
"react": "^16.6.3",
"react-app-polyfill": "^0.1.3",
"react-dev-utils": "^6.1.1",
"react-dom": "^16.6.3",
"redux-logger": "^3.0.6",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0",
"resolve": "1.8.1",
"sass-loader": "7.1.0",
"style-loader": "0.23.0",
"terser-webpack-plugin": "1.1.0",
"url-loader": "1.1.1",
"webpack": "4.19.1",
"webpack-dev-server": "3.1.9",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3"
},
"devDependencies": {
"antd": "^3.11.0",
"axios": "^0.18.0",
"blueimp-md5": "^2.10.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"qs": "^6.6.0",
"react-redux": "^5.1.1",
"react-router-dom": "^4.3.1",
"redux": "^4.0.1",
"redux-actions": "^2.6.4"
}
3、模块化开发 单一职责性
以所做的一个小demo为例
先搭建好整体的结构，再在对应的文件中处理对应的逻辑
项目目录结构
├src
│ index.js
│
├─components 公共组件
│ Nav.js
│ Tab.js
│
├─containers 容器组件(放各个模块的组件)
│ ├─cart
│ │ Cart.js 购物车组件
│ │
│ ├─course
│ │ Course.js 课程组件
│ │
│ └─personal
│ Personal.js 个人中心组件
│
└─store
│ action-types.js 派发的指令类型
│ index.js 引入reducer, 中间件, 导出store
│
├─action
│ cart.js 购物车派发行为
│ course.js 课程派发行为
│ personal.js 个人中心派发行为
│
└─reducer
cart.js 处理购物车的数据
course.js 处理课程的数据
personal.js 处理个人中心的数据
以api文件夹为例
在api文件夹中 新建一个index,js，处理公共逻辑
import axios from 'axios';
import qs from 'qs';
axios.defaults.baseURL = "http://localhost:8000";
//请求接口的公共的路径
axios.defaults.withCredentials = true;
//允许请求数据时携带cookie的信息
axios.interceptors.response.use((res)=>{
return res.data
});
axios.defaults.transformRequest=(data)=>{
return qs.stringify(data)
};
export default axios;
这样在api里其他的子文件中，想要发送请求，只需要从index.js文件引入axios即可
以course.js为例
import axios from './index';
export const getBanner = ()=>{
return axios.get("/course/banner")
};
let initParams = {limit:10,page:1,type:"all"};
export const getCourseList = (params=initParams)=>{
return axios.get("/course/list",{params});
};
export const getCourseInfo = (courseID)=>{
return axios.get("/course/info",{params:{courseID}})
};
- 我的习惯性思维是
- 1、先处理api接口问题
- 2、处理store中的action和reducer
- 3、处理组件
PS：引入外部文件时注意
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
要加这个%PUBLIC_URL%
什么是react？
- react是一个javascript库
- react专注于用户界面，使用组件化开发
- 一个页面拆分成若干个组件，再有大大小小的组件合并成一个页面
- 可组合 灵活组合各个组件应对不同需求
- 可复用 低耦合、高内聚 减少代码量
- 可维护 有利于代码的维护
- react是由元素和组件组成的
- react元素是由jsx声明，jsx是由javascript和xml(html)组成
- jsx是react组成的最小单元