react 项目架构设计

前言

一般一个项目从零开始大家的时候都需要完善一些公共机制，基础插件的安装，目录结构的设计，页面组件的拆分等等........

最开始接触前端的时候，是从简单的html、css、js开始的，当时盛行的WEB理念是结构样式行为相分离，即html、css、js分离，独立开发，互相之间通过link和script来互相调用。

最开始我说接触到的小项目，都是直接将html、css、js等静态资源直接部署到服务器上，然后根据请求路由响应不同的html文件即可。

现在已经有很多脚手架工具，如create-react-app（https://github.com/facebookincubator/create-react-app），支持一键创建一个React应用项目结构，很方便，但是享受方便的同时，也失去了对项目架构及技术栈完整学习的机会，而且通常脚手架创建的应用技术架构并不能完全满足我们的业务需求，需要我们自己修改，完善，所以如果希望对项目架构有更深掌控，最好还是从0到1理解一个项目。

 

 

项目结构与技术栈

第一步：选择使用的技术栈

这里我们当然是选择React框架来做开发，这里说的选择技术栈大概有如下几点（每个项目不一样根据实际情况来决定）：

• 样式（LESS，SCSS，Styuls）；
• UI组件库：有可能需要使用到一些UI组件库PC端（ElementUI，Andt）移动端的MinUI....

第二步：使用脚手架创建并初始化项目

create-react-app myapp

第三步：基础插件的安装，大概有如下几点（每个项目不一样根据实际情况来决定）：

• react-router-dom
• axios或者是Fetch
• less less-loader（如果选择LESS的话，选择其他就安装其他的插件）
• AntD（UI组件库）
• 随着项目的开发，后面可能还会安装其他的插件......

第四步：搭建设计目录结构

项目架构搭建很大部分依赖于脚手架生成，主要就是丰富src目录，比如：router的设计，Redux的设计，本地MOCK请求的API，函数工具库，中间件.......(自己根据需要来添加)

第五步：样式文件的加载配置（我这里使用LESS）

详情查看这篇文章：React16.8 搭建支持Less文件的开发环境

第六步：AntD的基本使用和配置

如果有使用到第三方的UI组件库，则安装完后也需要进行一些配置，我这里使用的是支付宝蚂蚁金服的AntD，详情查看这篇文章：react16.8 antd按需加载配置(已经弹出和未弹出分别的配置)以及主题配置

 

项目开发过程中可能还会有很多的插件需要安装和配置，这里就不多说了....

 

 

项目中组件与页面的划分

 

项目中使用Router

 

项目中使用Redux