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.js
   alias: {
       '@': 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来绑定

     import injectSheet from 'react-jss';
     import styles from './style';
     
     @injectSheet(styles)
     class Mainbox extends Component {
     render() {
         const { classes } = this.props;
         return <div className={classes.mainContainer}>
         <Router />
         </div>
     }
     }

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

     yarn add mobx mobx-react

   • 全局挂载store

     import { Provider } from 'mobx-react'
     function App() {
         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笔记