React + React-router + Redux 的前端代码框架

React + React-router + Redux 的前端代码框架

此前的教程中,分别在介绍 React-router 和 Redux 的时候,都介绍了各自的代码文件结构特点。现在将两者结合起来,就是我们即将进行实际项目开发的代码框架了。

这两的代码结合其实没有太多冲突,只有./app/index.jsx一个文件中有看似重叠的部分,其实原理还是 React 组件。

render(
    <Provider store={store}>
        <RouteMap history={hashHistory}/>
    </Provider>,
    document.getElementById('root')
)

在此,我们再将./app目录下的各个文件夹的用处重新总结一遍,权当复习此前学过的知识。

./app/actions

Redux 中使用的 actions,前面刚刚讲过。

./app/components

组件(木偶组件)目录。注意,此前强调过,一个组件一般用一个文件夹表示,里面一般有index.jsxstyle.lessimg/目录

./app/constants

Redux 的 actions 和 reducers 都会用到的常量,统一放在这里,前面刚刚讲过。

./app/containers

页面(智能组件)目录。注意,一个页面一般用一个文件夹表示,里面有index.jsx,如果页面复杂,可能需要subpage/目录来拆分页面。

./app/reducers

Redux 用到的 reducers,前面刚讲过。

./app/router

React-router 配置文件

./app/static

系统全局使用的静态资源

./app/store

Redux 创建 store

./app/util

系统工具函数,处理时间格式,处理字符串格式等

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容