{"id":13717115,"url":"https://github.com/bodyno/react-starter-kit","last_synced_at":"2025-05-16T01:05:59.975Z","repository":{"id":73220379,"uuid":"58910553","full_name":"bodyno/react-starter-kit","owner":"bodyno","description":"Start your first React App. By using React, Redux, and React-Router.","archived":false,"fork":false,"pushed_at":"2017-12-06T07:37:48.000Z","size":2058,"stargazers_count":1753,"open_issues_count":27,"forks_count":390,"subscribers_count":92,"default_branch":"master","last_synced_at":"2025-04-08T12:04:15.538Z","etag":null,"topics":["babel","css","react","redux","webpack"],"latest_commit_sha":null,"homepage":"https://github.com/bodyno/react-starter-kit","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bodyno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-05-16T06:56:08.000Z","updated_at":"2024-12-26T05:57:43.000Z","dependencies_parsed_at":"2023-07-13T07:30:13.347Z","dependency_job_id":null,"html_url":"https://github.com/bodyno/react-starter-kit","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bodyno%2Freact-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bodyno%2Freact-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bodyno%2Freact-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bodyno%2Freact-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bodyno","download_url":"https://codeload.github.com/bodyno/react-starter-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254448579,"owners_count":22072764,"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","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":["babel","css","react","redux","webpack"],"created_at":"2024-08-03T00:01:18.102Z","updated_at":"2025-05-16T01:05:54.965Z","avatar_url":"https://github.com/bodyno.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","webpack 优秀 starter kit"],"sub_categories":[":package: webpack \u0026 react"],"readme":"# 废弃警告\n\n这个项目起始于Redux生态的开始，目的是提供一个手脚架让前端们快速上手和开始。之后，工具和最佳实践被不断的革新。为了获得最新的体验，我推荐你使用类似于[create-react-app](https://github.com/facebookincubator/create-react-app)这种可以支持React核心和Redux的脚手架。\n\n当然还是欢迎你继续使用这个项目如果你觉得这个项目更适合你。如果你是个追求新生态的人，我还是强烈推荐你使用其它更新更频繁的项目。\n\n谢谢大家在过去这些年为这个项目的贡献。Thanks everyone.\n\n# React Starter Kit\n\nReact开发中最好用的脚手架。\n\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/5443058/26529189/0d9225d4-43ee-11e7-8187-8b54abe4fbb7.png\" /\u003e\n\n这个启动包的设计是为了让你使用一整套最新最酷的前端技术，所有都是可配置，富特性，基于webpack已经提供代码热加载，使用sass预处理css，单元测试，代码覆盖率报告，代码分割等等更多。\n\n这个项目最主要的目的是尽可能果断的保留。目的不是要你一定按照这个结构去完成你的项目，谐在使前端开发更健壮，更简单还有最重要的是更快乐。你可以获得以下的所有特性！\n\n最后，如果没有大家的贡献，这个项目是不可能如此健壮的。\n\n所有相关库已准备好，随时等待调用。\n\n## 特性\n* [react](https://github.com/facebook/react)\n* [redux](https://github.com/rackt/redux)\n* [react-router](https://github.com/rackt/react-router)\n* [webpack](https://github.com/webpack/webpack)\n* [babel](https://github.com/babel/babel)\n* [express](https://github.com/expressjs/express)\n* [karma](https://github.com/karma-runner/karma)\n* [eslint](http://eslint.org)\n\n## 需求配置\n* node `^4.5.0`\n* npm `^3.0.0`\n\n## 开始\n\n确认好你的环境配置，然后就可以开始以下步骤。\n\n```bash\n$ git clone https://github.com/bodyno/react-starter-kit.git\n$ cd react-starter-kit\n$ npm install                   # Install project dependencies\n$ npm start                     # Compile and launch\n```\n\n如果一切顺利，你会看到如下:\n\n\u003cimg src=\"http://i.imgur.com/zR7VRG6.png?2\" /\u003e\n\n开发过程中，你用得最多的会是`npm start`，但是这里还有很多其它的处理：\n\n\n|`npm run \u003cscript\u003e`|解释|\n|------------------|-----------|\n|`start`|服务启动在3000端口，代码热替换开启。|\n|`compile`|编译程序到dist目录下（默认目录~/dist）。|\n|`dev`|与`npm start`相同, 但是启动nodemon守护进程。|\n|`dev:no-debug`|与`npm run dev` 但是禁用devtool（开发工具）。|\n|`test`|开启Karma测试并生成覆盖率报告。|\n|`test:dev`|开启Karma测试并监听改变随时重新测试，但是生成覆盖率报告。|\n|`deploy`|启动代码检查，测试，如果成功，编译到dist目录下。|\n|`deploy:dev`|与`deploy`相同，但是`NODE_ENV`值为\"development\"。|\n|`deploy:prod`|与`deploy`相同，但是`NODE_ENV`值为\"production\"。|\n|`lint`|检查所有.js文件是否规范。|\n|`lint:fix`|检查所有.js文件是否规范并修复它们。 [更多](http://eslint.org/docs/user-guide/command-line-interface.html#fix)|\n\n## 程序目录\n\n这个项目的结构使用的是 **fractal(不规则碎片形：适合大型项目)***，方法的分组主要是依照特性而不是文件类型。注意，这个目录结构只是一个指引，并不一定要按这个来。这种结构谐在让程序更容易扩展，想了解更多请[点击这里](https://github.com/justingreenberg)。\n\n\n```\n.\n├── bin                      # 启动脚本\n├── blueprints               # redux-cli的蓝图\n├── build                    # 所有打包配置项\n│   └── webpack              # webpack的指定环境配置文件\n├── config                   # 项目配置文件\n├── server                   # Express 程序 (使用 webpack 中间件)\n│   └── main.js              # 服务端程序入口文件\n├── src                      # 程序源文件\n│   ├── main.js              # 程序启动和渲染\n│   ├── components           # 全局可复用的表现组件(Presentational Components)\n│   ├── containers           # 全局可复用的容器组件\n│   ├── layouts              # 主页结构\n│   ├── static               # 静态文件(不要到处imported源文件)\n│   ├── styles               # 程序样式\n│   ├── store                # Redux指定块\n│   │   ├── createStore.js   # 创建和使用redux store\n│   │   └── reducers.js      # Reducer注册和注入\n│   └── routes               # 主路由和异步分割点\n│       ├── index.js         # 用store启动主程序路由\n│       ├── Root.js          # 为上下文providers包住组件\n│       └── Home             # 不规则路由\n│           ├── index.js     # 路由定义和代码异步分割\n│           ├── assets       # 组件引入的静态资源\n│           ├── components   # 直观React组件\n│           ├── container    # 连接actions和store\n│           ├── modules      # reducers/constants/actions的集合\n│           └── routes **    # 不规则子路由(** 可选择的)\n└── tests                    # 单元测试\n```\n\n## 样式\n\n所有的css和sass都支持会被预处理。只要被引入，都会经过[PostCSS](https://github.com/postcss/postcss)压缩，加前缀。在生产环境下会提取到一个css文件下。\n\n## 服务端\n\n这个项目的服务端使用Koa。需要注意的是，只有一个目的那就是提供了`webpack-dev-middleware` 和 `webpack-hot-middleware`（代码热替换）。使用自定义的Koa程序替换[webpack-dev-server](https://github.com/webpack/webpack-dev-server)，让它更容易实现universal 渲染和为了不使这个包过于庞大。\n\n## 打包优化\n\nBabel被配置[babel-plugin-transform-runtime](https://www.npmjs.com/package/babel-plugin-transform-runtime)可以让代码更优化。另外，在生产环境，我们使用[react-optimize](https://github.com/thejameskyle/babel-react-optimize)来优化React代码。\n\n在生产环境下，webpack会导出一个css文件并压缩Javascript，并把js模块优化到最好的性能。\n\n## 静态部署\n\n如果你正在使用nginx处理程序，确保所有的路由都直接指向 `~/dist/index.html` 文件，然后让react-router处理剩下的事。如果你不是很确定应该怎么做，[文档在这里](https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#configuring-your-server)。Express在脚手架中用于扩展服务和代理API，或者其它你想要做的事，这完全取决于你。\n\n## 谢谢大家\n\n如果没有大家的贡献，这个项目是不可能诞生的， 感谢所有为这个项目做出贡献的人。\n\nThis program is inspired by [davezuko](https://github.com/davezuko)\n\n* [Justin Greenberg](https://github.com/justingreenberg) - For all of your PR's, getting us to Babel 6, and constant work improving our patterns.\n* [Roman Pearah](https://github.com/neverfox) - For your bug reports, help in triaging issues, and PR contributions.\n* [Spencer Dixin](https://github.com/SpencerCDixon) - For your creation of [redux-cli](https://github.com/SpencerCDixon/redux-cli).\n* [Jonas Matser](https://github.com/mtsr) - For your help in triaging issues and unending support in our Gitter channel.\n\nThanks you guys all the time.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbodyno%2Freact-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbodyno%2Freact-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbodyno%2Freact-starter-kit/lists"}