1.项目介绍
项目github地址：https://github.com/replaceroot/React-manageSystem
项目整体架构：
补充：调用setState之后会并列调用should update，will update，did update生命周期函数
Babel插件的作用：解析E6达到兼容效果
2.项目环境搭建
2.1 安装包
yarn add react-router-dom axios --dev
2.2 安装支付宝UI组件
yarn add antd
2.3 配置antd组件按需加载
yarn add react-app-rewired customize-cra
修改`package.json`配置文件的`scripts`字段
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
使用 babel-plugin-import
babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。
yarn add babel-plugin-import
+ const { override, fixBabelImports } = require('customize-cra');
- module.exports = function override(config, env) {
- // do stuff with the webpack config...
- return config;
- };
+ module.exports = override(
+ fixBabelImports('import', {
+ libraryName: 'antd',
+ libraryDirectory: 'es',
+ style: 'css',
+ }),
+ );
记录一个小坑：
如果遇到错误，将 react-scripts添加到dev依赖中。
yarn add react-scripts --dev
如果遇到找不到babel模块的错误，就将整个 modules删除，然后重新yarn install安装一下就能解决。
重新运行项目，此时就能正常显示Button按钮了。
import React from "react";
import Child from "./Child";
import { Button } from 'antd';
import "./index.less"; export default class Life extends React.Component {
state = {
count:
}; handleAdd = () => {
this.setState({
count: this.state.count +
});
}; render(){
return (
<div className="demo">
<input type="text" placeholder="请输入内容..."/>
<Button onClick={this.handleAdd}>点击一下</Button>
<p>{this.state.count}</p>
{/* 给子组件传参 */}
<Child name={this.state.count}></Child>
</div>
)
}
}
但是有一个问题，就是我们配置的less没有生效，下面解决Less和按钮主题颜色问题。
yarn add less less-loader
按照 配置主题 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式，同时修改 config-overrides.js 文件如下。
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
- style: 'css',
+ style: true,
}),
+ addLessLoader({
+ javascriptEnabled: true,
+ modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);
修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。
到这里， 基本的环境算是搭建好了，坑是真的多，也只能自己摸索，百度、Google查文档，做记录总结。
3.项目主页面编写
3.1 目录结构
具体代码参考我的github的commit代码
布局使用的栅格系统：https://ant.design/components/grid-cn/
左侧菜单渲染：https://ant.design/components/menu-cn/
具体实现可以参考我github上的源码和官网给出的demo的源码进行对比就知道我如何使用的。
3.2左侧菜单动态渲染
重点就是动态渲染的代码
import React from "react";
import { Menu, Icon, Divider } from "antd";
import menuConfig from "../../config/menuConfig";
import "./index.less";
const { SubMenu } = Menu; export default class NavLeft extends React.Component {
// 加载时的生命周期函数
componentWillMount() {
const menuTreeNode = this.renderMenu(menuConfig);
this.setState({
menuTreeNode
});
} // 菜单动态渲染
renderMenu = data => {
return data.map(item=>{
// 如果item中还有子项,那么就把子项递归遍历渲染到页面
if(item.children){
return (
<SubMenu title={item.title} key={item.key}>
{this.renderMenu(item.children)}
</SubMenu>
);
}
return <Menu.Item title={item.title} key={item.key}>{item.title}</Menu.Item>
})
}; render() {
return (
<div>
<div className="logo">
<img src="assets/logo-ant.svg" alt="" />
<h1>木子单车管理系统</h1>
</div>
<Menu theme="dark">{this.state.menuTreeNode}</Menu>
</div>
);
}
}
index.js
3.3 header头部页面实现
这个部分需要发送跨域请求百度天气的API来获取数据渲染，需要安装一个JsonP。
yarn add jsonp
这里部分需要使用jsonp封装一个axios来发送跨域请求，这里涉及了jsonp使用和ES6中promise的使用方法，如果忘记了这些技术，赶紧翻下以前的笔记，百度看下博客吧。
简单的jsonp demo
getjsonp(){
// jsonp能发起跨域请求
this.$http.jsonp('http://127.0.0.1:3003/getlist')
.then((res) => {
console.log(res)
},(err) => {
console.log(err)
})
}
// 封装axios发送跨域请求
import JsonP from 'jsonp'
export default class Axios {
/* 这里使用static关键字声明了一个静态方法，实例不能直接调用，只能通过类来调用 */
static jsonp(options){
// 成功就是resolve，失败就是reject
return new Promise((resolve, reject)=>{
JsonP(options.url, {
params: 'callback'
}, function(err, response){
if(response.status === 'success'){
resolve(response)
}else {
reject(response.message);
}
})
})
}
}
给axios封装jsonp方法
/* 封装一个格式化时间戳的方法 */
export default {
formateDate(time) {
// 如果为空就返回空字符串
if (!time) return "";
let date = new Date(time);
return (
date.getFullYear() +
"-" +
(date.getMonth() + 1) +
"-" +
date.getDate() +
" " +
date.getHours() +
":" +
date.getMinutes() +
":" +
date.getSeconds()
);
}
};
封装格式化日期方法
3.4 Footer页面以及content内容区域实现
增加小箭头样式
/* 实现小箭头 */
&:after{
position: absolute;
content: '';
left: 110px;
top:39px;
border-top: 9px solid @colorM;
border-left: 12px solid transparent;
border-right: 12px solid transparent; }
Header/index.less
到此为止首页就编写完成了，以后会根据课程的目录来更新React路由相关的知识，其他业务功能的实现。
总结一下：很多都是基础知识，稍微难一点的就是Promise、jsonp、还有初期的环境搭建遇到的几个坑，几乎没有太难的知识点，结构和flex布局相关的内容就是一个熟练度的问题，代码量上去了，看到一个效果就知道要怎么实现，多敲多练多思考就完事了。