React 项目搭建及目录结构

首先,关于React的配置可以先参考之前的博客。(React代码规范建议阅读 Airbnb React代码规范,提高代码质量。)

React 项目搭建及目录结构_第1张图片

上面就是前端项目的目录结构。static是静态资源目录。component是经过react编写的组件。css是整体布局的样式。util是写模块化的函数或工具函数。下面这张图是component的组成。

React 项目搭建及目录结构_第2张图片

每一个文件夹都是内部具体的组件。router是用来管理路由文件。 utilIndex 用于引入外部的util文件夹内的工具函数、模块化代码。这样在组件内就可以方便引用。

React 项目搭建及目录结构_第3张图片

util文件夹内主要是对于一些常用函数的封装以及请求接口和其他功能函数。例如Ajax.js就是所有网络请求封装。API.js就储存着所有后台接口路由。
(除此之外,推荐使用React-dev-tools插件来方便开发和debug)

你可能感兴趣的:(FE,node)