使用React，实际开发中常用框架
UI框架antd.design
路由管理（SPA）react-router-dom
状态管理redux，mobx，dva
UI框架antd.design
npminstallantd//(不带版本，安装最新版本)
npminstallreact-app-rewiredcustomize-cra//默认配置进行自定义/*package.json*/"scripts":{-"start":"react-scriptsstart",+"start":"react-app-rewiredstart",-"build":"react-scriptsbuild",+"build":"react-app-rewiredbuild",-"test":"react-scriptstest",+"test":"react-app-rewiredtest",}
项目根目录创建一个config-overrides.js用于修改默认配置。
npminstallbabel-plugin-import//按需加载antd组件样式
替换moment.js使用day.js
npminstallantd-dayjs-webpack-plugindayjs
使用到的完整配置const{override,fixBabelImports,addLessLoader,addWebpackPlugin,}=require("customize-cra");constAntdDayjsWebpackPlugin=require("antd-dayjs-webpack-plugin");module.exports=override(//antd组件库按需加载fixBabelImports("import",{libraryName:"antd",libraryDirectory:"es",style:"true",}),//antd时间组件替换moment.js使用day.jsaddWebpackPlugin(newAntdDayjsWebpackPlugin()),//使用less样式预处理，自定义主题样式addLessLoader({javascriptEnabled:true,modifyVars:{"
primary-color":"#1DA57A"},}));npmstart查看效果
单页面应用SPA（singlepageapplication）
集成react-router-dom
npminstallreact-router-dom
集成react-router-dom
react-router-dom常用组件、API
HashRouter路径上添加/#/
BrowserRouter构建于H5HistoryAPI，更方便操作路由跳转
BrowserRouter、HashRouter包裹所有路由
Switch区分BrowserRouter、HashRouter包裹路由跳转
Route挂载不同的路由显示界面
Link用于跳转，类似a标签
代码方式跳转import{useHistory}from"react-router-dom";history.push("/home");
调整目录结构
创建