react + antd + json-server 后台管理项目创建
创建项目详细步骤
一、 创建项目并上传到github：
1. npm i create-react-app -g 全局安装react脚手架
2. create-react-app react-demo 创建一个名为react-demo的项目
3. cd react-demo 进入该项目
4. npm start 启动项目
5. github创建一个仓库 repositories
6. 在项目路径下初始化一个仓库git init
7. git add .
8. gc -m 'xxx'
9. git remote add origin https://github.com/xxx.git #建立远程仓库
10. git push -u origin master #将本地仓库push到远程仓库
11. src下创建文件夹分类
eg：api(ajax请求的模块), assets, components(非路由组件), utils, views(路由组件)
二、引入UI库：
npm i antd -S
引入到项目中：
(1) 全局引入(打包后比较大，建议按需引入):
在项目入口引入所有样式:import antd/dist/antd.css
在项目中引入antd组件:import { Button } from 'antd'
(2) 按需加载（3种方法）：
1、引入独立的组件和样式（基本不采用）：
import Button from 'antd/lib/button';
import 'antd/lib/button/style';
2、暴露配置 + babel-plugin-import：
npm run eject(暴露webpack的配置，不可逆)
npm i babel-plugin-import -S
修改package.json：
"babel": {
"presets": [
"react-app"
],
"plugins": [
+ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
}
项目中直接引入antd组件，不需另外引入css：import { Button } from 'antd'
参考：https://www.xiaoweihuang.me/2018/11/14/two-ways-to-import-antd-into-react-app/
https://juejin.im/post/5b20a3546fb9a01e312833d5
3、react-app-rewire + babel-plugin-import(官网推荐)：
自定义主题：项目根目录下新建一个config-overrides.js文件，更改配置
参考：https://ant.design/docs/react/use-with-create-react-app-cn
三、路由:
1. 安装路由器：yarn add react-router-dom -S
2. app.js中引入：
import { BrowserRouter, Route, Switch } from 'react-router-dom'
3. 使用：
{/* 只匹配其中一个 */}
4. ps：
react路由的两种模式：HashRouter(hash模式),BrowserRouter(history模式)
四、重置样式
1. github上搜索reset.css，复制到public/css/reset.css中
2. 在index.html中:
(引入时如果用相对路径'./xxx'打包之后会报错，所以要用绝对路径)
3. reset.css中加入
html, body{
width: 100%;
height: 100%;
}
#root{
width: 100%;
height: 100%;
}
4. app.css中：
.app{
height: 100%;
}
五、高阶函数
定义：高阶函数是一类特别的函数。
类型：接收函数类型的参数，或返回值是函数。
常见的高阶函数：
1、定时器
2、Promise的then()
3、数组遍历相关的方法：forEach()/filter()/map()/reduce()/find()/findIndex()
4、函数对象的bind()
5、Form.create()() / getFieldDecorator()()
高阶函数更新动态，更加具有扩展性
六、高阶组件
1. 本质是一个函数，接收一个组件(被包装组件)，返回一个新的组件(包装组件)。
新组件内部渲染，包装组件会向被包装组件传入特定属性。
2. 作用：扩展某个组件的功能。
3. 高阶组件也是高阶函数：接收一个组件函数，返回一个新的组件函数。
4. withRouter:向非路由组件传递history，location，match三个属性。
七、模拟前端需要的数据
1. yarn add json-server mockjs nodemon (json-server 支持跨域)
2. cd 自定义的存储假数据的文件夹（mock），新建一个db.js文件.
db.js 中：
let Mock = require('mockjs')
let Random = Mock.Random
module.exports = function() {
return data
}
3. 启动服务的命令: json-server db.js -p 3001 -c ./config.js
4. 也可以根目录的package.json，写入
{
"scripts": {
"mock": "json-server db.js --port 3001"
}
}
再次启动用npm run mock 即可
5. 项目根目录下的package.json中可以配置代理："proxy": "http://localhost:3001"
参考：
https://www.jianshu.com/p/20a681a9c645
https://www.cnblogs.com/fly_dragon/p/9150732.html
八、封装请求接口的模块
1. 封装常用的几种接口请求方式的方法，并暴露出来。
2. 使用async和await可以简化promise的then和catch，以同步编码方式实现异步流程。
3. await不能单独使用，在返回promise的表达式左侧写await，await所在的最内层函数的左侧写async。
4. 优化：
统一处理请求异常：
在外层包一个自己创建的promise对象，在请求成功时resolve(res)，
在请求失败时不reject(err)，而是显示错误提示。
ps：
1. render中第一行写debugger，即可在source中断点调试；
2. return必须返回一个节点,紧随其后的第一个标签名不能换行,否则即返回空白,会报错;
3. 单标签必须闭合;
4. create-react-app有丢包的缺陷，手动安装包后，需要重新npm install一下，
这样node_modules/.bin/目录下才会重新出现react-scripts的文件，npm start命令才能正常执行。
5. 书写 JSX 的时候一般都会带上换行和缩进，这样可以增强代码的可读性。与此同时，我们同样推荐在 JSX 代码的外面扩上一个小括号，这样可以防止 分号自动插入 的 bug。
发表评论 (审核通过后显示评论)：