react demo代码解析

• webstorm快捷键
  代码格式化：command+option+l
• tslint 代码检查配置
  tslint代码格式见：tslint.json
• 布局
  使用的是顶部--侧边布局--通栏的布局

src/apps/def-proj/index.tsx

1. 顶部导航栏
   效果截图
   代码截图

2. 左侧导航栏/中部内容/底部foot
   代码截图
   
   
   效果截图

• 代码结构
  1.项目整体默认路由
  src/apps/index.config.tsx
  
  image.png
  
  2.路由规则配置
  结合文件src/CONFIG.ts 和src/apps/flowManage/routerConfig.tsx
  
  image.png
  
  
  image.png
  
  3.整体布局见src/apps/flowManage/index.tsx
  4.IconFont https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.17&helptype=code
  的使用
  
  image.png

如在src/apps/flowManage/pages/iconFont.js中将第一步地址中的代码拷贝到该文件中；src/apps/flowManage/pages/iconFont.less中写样式；在要使用图标的文件中引入样式文件和js文件即可如第三步那样使用了。

import iconFont from '@apps/flowManage/pages/iconFont.less';
require('@apps/flowManage/pages/iconFont.js');

5.代码规范检查
package.json 规范规则在对应dev/prod文件中

image.png