从零架构react create-react-app 基于antd (3)

在最基本的create-react-app中我们还是没有办法很好的完成开发，因为没有嵌入redux，在这一章节我们将重构create-react-app的目录结构。

首先这是前两章后我们创建的目录结构

image.png

接下来我们重构目录

• layouts/: 存放布局级别的组件
• views/: 存放页面级别的组件
• components/: 存放业务级别的 UI 组件
• app/: 存放应用级别的配置信息，如菜单、路由等，以及应用初始化的相关代码，如初始化 redux store 等
• utils/: 存放通用的功能性函数，如数据聚合、处理等
• styles/: 存放全局的 CSS 样式、变量、mixins 等
• assets/: 存放静态资源，如图标、图片等

├── config-overrides.js
├── package.json
├── public
|  ├── favicon.ico
|  ├── index.html
|  └── manifest.json
├── README.md
├── src
|  ├── app
|  ├── assets
|  ├── index.js
|  ├── index.scss
|  ├── layouts
|  ├── logo.svg
|  ├── serviceWorker.js
|  ├── styles
|  ├── utils
|  └── views
|     └── home
|        ├── index.js
|        ├── index.scss
|        └── index.test.js
└── yarn.lock

接下来我们结合redux 可以直接参考我们redux的教程 redux也是使用create-react-app

Link

这里直接放出完成代码后的目录结构

├── config-overrides.js
├── package.json
├── public
|  ├── favicon.ico
|  ├── index.html
|  └── manifest.json
├── README.md
├── src
|  ├── app
|  |  ├── action.js
|  |  ├── config
|  |  ├── init
|  |  |  ├── createApp.js
|  |  |  ├── createStore.js
|  |  |  ├── reducers.js
|  |  |  └── router.js
|  |  └── reducer.js
|  ├── assets
|  |  └── logo.svg
|  ├── index.js
|  ├── layouts
|  ├── serviceWorker.js
|  ├── styles
|  ├── utils
|  └── views
|     └── home
|        ├── index.js
|        ├── index.scss
|        └── index.test.js
└── yarn.lock

github地址 (持续更新)

Link