{"id":17640900,"url":"https://github.com/beace/react-custom-boilerplate","last_synced_at":"2025-08-11T07:11:05.285Z","repository":{"id":98536378,"uuid":"153245120","full_name":"Beace/react-custom-boilerplate","owner":"Beace","description":"react-custom-boilerplate based on https://github.com/react-boilerplate/react-boilerplate","archived":false,"fork":false,"pushed_at":"2018-10-23T02:33:46.000Z","size":220,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-13T15:49:18.040Z","etag":null,"topics":["https","immer","react","react-boilerplate","redux-actions-immer","redux-saga"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Beace.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-16T07:54:17.000Z","updated_at":"2018-10-23T02:34:22.000Z","dependencies_parsed_at":"2023-05-29T09:15:15.977Z","dependency_job_id":null,"html_url":"https://github.com/Beace/react-custom-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Beace/react-custom-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Beace%2Freact-custom-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Beace%2Freact-custom-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Beace%2Freact-custom-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Beace%2Freact-custom-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Beace","download_url":"https://codeload.github.com/Beace/react-custom-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Beace%2Freact-custom-boilerplate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269844107,"owners_count":24484134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["https","immer","react","react-boilerplate","redux-actions-immer","redux-saga"],"created_at":"2024-10-23T06:24:37.921Z","updated_at":"2025-08-11T07:11:05.199Z","avatar_url":"https://github.com/Beace.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-boilerplate\n\n本项目继承自 [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate)\n\n## 场景\n\n为了固定开发场景和习惯，快速理解 react 周边技术栈的应用场景和概念原理，建立此项目。\n\n本项目基本上可以囊括80%以上的 react 相关技术（栈），你可以通过书写相对底层的代码来建立整个开发流程，并且兼顾性能。\n\n## 特性\n\n- 包含了 [react-boilerplate#features](https://github.com/react-boilerplate/react-boilerplate#features) 所有优点\n- 支持 HTTPS `npm run start:https` **需要在项目根目录下配置名为 localhost.pem 和 localhost-key.pem 的公私钥**\n- 强制 `eslint` 检查\n- 去除了 `i18n`\n- 去除了`immutable`，采用了[immer](https://github.com/mweststrate/immer)\n- 自定义的 [react-loadable](https://github.com/jamiebuilds/react-loadable)\n- 采用 [css in js](https://github.com/styled-components/styled-components) 写法\n- 默认包含 antd 样式，默认进行了引用优化 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)\n- [redux-actions](https://github.com/redux-utilities/redux-actions) 将 `switch case` 转化为 `hash map`\n\n## 使用\n\n1. npm install\n2. npm start\n\n### 如何新建 container\n\n[![asciicast](https://asciinema.org/a/194047.png)](https://asciinema.org/a/194047)\n\n仿照上面的命令行的方式新建一个`container`，会发现再 `app/container` 目录下增加了 Y 目录，最终再 `containers/App` 下修改增加路由，即可。\n\n```jsx\n\u003cRoute exact path=\"/test\" component={TestPage} /\u003e\n```\n\n### 开发套路\n\n可以通过浏览 `app/containers/HomePage` 中的内容查看套路\n\n### 重点阐述\n\n#### 关于reducer actions constants saga selectors immutable 之间的关系\n\n- `reducer` 中建立 `initialState` 初始化数据\n- `constants` 这里定义了一些 `actions` 的类型\n- `actions` 直接暴露给外界的方法，通过 `dispatch` 直接调用\n- `reducer` 通过 `action` 返回的类型，修改相应的数据，是最底层触发数据修改的人员\n- `selectors` 本质上是通过闭包来缓存数据，主要是选择数据，从相应的 `reducer` 中选取你想要的数据\n- `sagas` 主要是用来控制异步事件，不只是API层面的异步请求，包括用户交互页面逻辑等\n\n#### 举个例子\n\n假如，用户输入一个name，查询name的列表\n\n1. 从 `reducer` 中初始化 `name` -\u003e\n2. `constants` 定义触发获取列表的类型 `GET_LIST` -\u003e\n3. `actions` 中定义 `getList` 方法，并且接受用户输入的参数 `name`, 并返回给 `saga` -\u003e\n4. `saga` 接收到 `name` 参数后开始 `ajax` 请求获取数据 调用 `call` 方法 -\u003e\n5. 数据传递给 `reducer` 进行修改，因此 `saga` 进行 `watch` 了请求方法，调用 `takelatest` 方法，当 `ajax` 请求结束后告诉 `reducer` ，同时将相应的 `type` 传递给 `reducer` -\u003e\n6. `reducer` 通过类型和新的数据重新 `set/update` 数据 -\u003e\n7. `selectors` 进行数据对比，获取数据 -\u003e\n8. `react` 重新渲染页面\n\n\n## TODO\n\n- [ ] redux-auth-wrapper\n- [ ] webpack progress\n- [ ] webpack notify\n- [ ] immer handleActions 重写","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeace%2Freact-custom-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeace%2Freact-custom-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeace%2Freact-custom-boilerplate/lists"}