巴士为您推荐： ReactJS学习 系列课程 React react 常用架构分析 完整版

ReactJS学习系列课程是一款关于IT、编程行业的小伙伴们准备。对于网络工程师们来说，ReactJS学习系列课程真的是很不错，不管是菜鸟还是大神都有待提高，通过这个ReactJS学习系列课程进行学习吧！

我们看下面这张架构图:

下面我们逐一进行分析：

package.json

这个文件在常用不过了，任何一个项目都会看到，基本我们所有的依赖库都是通过package.json, 也就是npm进行安装的，这样也方便多人合作， 如果有需要我们也可以同样引进bower.json. 对于这个文件中 主要有三个模块：

dependencies: 产品环境依赖库

devDependencies： 开发环境依赖库

scripts: 执行脚本, 比如通过npm 启动代理服务器。

webpack.config.js

这个文件在webpack章节已经讲到了，在此不做过多分析。

index.js

这是整个程序的入口文件， 定义了最上层的导入库，我们用webpack大包，也是从这个入口开始的哦，当然也包括css导入。

containers文件夹

从定义上讲，这是一个容器，我们大可以定义为App.js, 这个容易包含了所有的组件。可以称之为组件和路由的组合体。

constants文件夹

对于任何一个项目而言，都会用到公众常量的问题，Facebook的架构中通常会将这个常量提取出来，向下面代码：

export const ADD_TODO = 'ADD_TODO';export const DELETE_TODO = 'DELETE_TODO';export const EDIT_TODO = 'EDIT_TODO';export const COMPLETE_TODO = 'COMPLETE_TODO';export const COMPLETE_ALL = 'COMPLETE_ALL';export const CLEAR_COMPLETED = 'CLEAR_COMPLETED';1234567

components文件夹

这个顾名思义，就是所有组件应该存放的地方，比如button, header, footer等等，还有一些组合组件都要放在这里。

actions 文件夹

如果我们要用redux来处理数据，管理react的state, 用户交互过程中必然会触发很多的action， 比如增删改查等等，所以我们需要对这些action做相应的管理。

像下面的代码：

import * as types from '../constants/ActionTypes'; export function addTodo(text) { return { type: types.ADD_TODO, text }; } export function deleteTodo(id) { return { type: types.DELETE_TODO, id }; } export function editTodo(id, text) { return {type: types.EDIT_TODO, id, text }; } export function completeTodo(id) { return { type: types.COMPLETE_TODO, id }; } export function completeAll() { return { type: types.COMPLETE_ALL }; } export function clearCompleted() { return {type: types.CLEAR_COMPLETED}; }1234567891011121314151617181920212223242526

reducers 文件夹

个人理解，如果想通过react-redux 来管理react状态，我们需要通过创建reducer， 在reducer我们可以结合action对数据做过滤删除，添加的工作。

store 文件夹

这是一个数据仓库的位置，我们创建的reducer ， 需要通过createStore存储在一个仓库中，createStore这个function来自redux库，也就说在项目中，我们既需要引入react-redux，也需要引入原有的redux库。

以上就是常用的react架构，这也是官方推荐的一个方式，当然还有其他的架构，原理上比较相似，大家只做参考，毕竟架构师的思想的独立的。