React Project

基于React、Ant-Design、Mobx和JSS的React应用

项目由Create React App启动

Github地址

项目运行

生产环境部署，服务器根目录指向build/下

# 安装依赖包
npm install 或 yarn(推荐)
# 本地运行
npm run dev 或 yarn start
# 生产环境
npm run build 或 yarn build

开发步骤

1. 新建项目react-study

   create-react-app react-study

2. 配置使用装饰器(路由、mobx、jss都需要)
   • 暴露项目的配置项(保证已经git commit)

     npm run eject

   • 安装babel插件

     yarn add @babel/plugin-proposal-decorators @babel/plugin-transform-react-jsx @babel/plugin-transform-react-jsx-self @babel/plugin-transform-react-jsx-source --dev

   • 修改package.json文件的babel配置项

     "babel": {
     "plugins": [
     ["@babel/plugin-proposal-decorators", { "legacy": true }]
     ],
     "presets": [
     "react-app"
     ]
     }

3. 配置webpack，使用@来import模块

   // webpack.config.jsalias: {'@': path.resolve(__dirname, '../src'),...}

4. CSS Reset

   src/index.css: 标签重置 src/App.css: 自定义样式、覆盖antd样式

5. React路由: react-router-dom
   • 安装react-router-dom

     yarn add react-router-dom

   • router/config.js: 路由配置表
   • router/index.js：路由处理
   • 路由重定向(404，默认路由)、路由渲染、菜单高亮展开
   • React(Suspense/Lazy)实现路由懒加载
6. UI组件库：ant-design
   • 安装

     yarn add antd

   • 按需加载，只需从antd引入模块,不用单独引入样式

     yarn add babel-plugin-import

     package.json添加配置

     "babel": {
     "plugins": [
     [
     "import",
     {
     "libraryName": "antd",
     "libraryDirectory": "es",
     "style": "css"
     }
     ]
     ]
     }

7. CSS-in-JS: JSS
   • 安装jss

     yarn add react-jss

   • 公共部分提取到文件夹styles/下，组件内部通过object spread操作符或者Object.assign获取

     subRoutes: {
     ...style.ul,paddingLeft: 10}

   • 组件内部通过injectSheet来绑定

     importinjectSheetfrom'react-jss';importstylesfrom'./style';
     @injectSheet(styles)classMainboxextendsComponent{render(){const{ classes }=this.props;return<divclassName={classes.mainContainer}><Router/></div>}}

8. react的状态存储(store): Mobx
   • 安装

     yarn add mobx mobx-react

   • 全局挂载store

     import{Provider}from'mobx-react'functionApp(){return(<Provider{...store}><BrowserRouter><Router/></BrowserRouter></Provider>)}

9. 图表库：bizcharts
   • 安装

     yarn add bizcharts

文件目录

1. config: 存放webpack的配置参数
2. api: 根据模块来存放api的接口地址
3. assets: 存储静态文件，如图片、字体、svg图标等
4. components: 公共组件
5. router: 路由的配置和挂载渲染
6. store: 数据状态存储
7. styles: 公共样式
8. utils: 工具类函数
   • token.js: 对token的读写操作
   • math.js: 数学类的工具函数
   • request.js：异步请求fetch的封装
9. views: 页面级别的组件

文档输出

1. React心得
2. Mobx笔记