Skip to content

sorrycc/react-redux-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-redux-boilerplate

A boilerplate with react, redux, redux-saga, react-router, webpack, babel, css-modules ...

环境准备

先安装依赖

$ npm install

想要更好的开发体验,还需安装两个 Chrome 插件:Redux DevToolsLiveReload

启动调试

$ npm start
$ open http://localhost:8989/

构建代码

$ npm run build

// 构建但不压缩
$ npm run build -- --no-compress

目录结构

.
├── /dist/               # 构建输出的文件会在这里
├── /node_modules/       # 第三方类库和工具
├── /src/                # 应用源码
│ ├── /components/       # React components
│ ├── /constants/        # 常量 (比如 action types 等)
│ ├── /containers/       # React containers
│ ├── /entries/          # 应用入口
│ ├── /reducers/         # reducers
│ ├── /routes/           # 路由信息
│ ├── /sagas/            # redux-sagas
│ └── /services/         # 处理和服务器的交互
├── proxy.config.js      # 配置 dora-plugin-proxy,用于 mock 和在线调试
├── webpack.config.js    # 扩展 webpack 配置
└── package.json         # 配置入口文件、依赖和 scripts

系统组织

详见:React + Redux 最佳实践

内置类库

工具特性

热替换和 LiveReload

基于 Webpack Vanilla HMR,支持 components, containers, reducers, routers 目录的模块热替换,其余目录的修改则会自动刷新页面。

CSS 的自动刷新需通过 LiveReload Chrome 插件配合使用。

支持 css-modules

后缀为 .module.less.module.css 的会被解析为 css-modules

内置支持 jsx-control-statements

jsx 里可以通过 If, Else 和 For 标签来实现控制语句

运行错误和语法错误的提醒

通过 redbox-react 和 webpack hmr overlay 提示运行错误和语法错误

自动引入 reducersaga

通过 webpack 的 require.context 黑魔法批量引入 reducersaga,新增、删除和重命名时会更方便

自动安装 npm 依赖

数据 mock 和线上调试

通过 dora-plugin-proxy 实现,详见:https://github.com/dora-js/dora-plugin-proxy#规则定义

...

License

MIT

About

A boilerplate with react, redux, redux-saga ...

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published