{"id":13671757,"url":"https://github.com/JasonBai007/reactSPA","last_synced_at":"2025-04-27T18:31:39.015Z","repository":{"id":78373478,"uuid":"59460294","full_name":"JasonBai007/reactSPA","owner":"JasonBai007","description":"A Demo SPA developed with React, ES6, Webpack (2.x), and Antd (1.0.1) 【move to react-seed】","archived":false,"fork":false,"pushed_at":"2017-06-27T02:10:01.000Z","size":520,"stargazers_count":514,"open_issues_count":2,"forks_count":147,"subscribers_count":35,"default_branch":"master","last_synced_at":"2024-11-11T09:44:06.889Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://jasonbai007.github.io/reactSPA/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JasonBai007.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}},"created_at":"2016-05-23T07:12:13.000Z","updated_at":"2024-10-22T10:00:30.000Z","dependencies_parsed_at":"2023-04-23T13:05:18.429Z","dependency_job_id":null,"html_url":"https://github.com/JasonBai007/reactSPA","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JasonBai007%2FreactSPA","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JasonBai007%2FreactSPA/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JasonBai007%2FreactSPA/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JasonBai007%2FreactSPA/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JasonBai007","download_url":"https://codeload.github.com/JasonBai007/reactSPA/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251187267,"owners_count":21549612,"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":[],"created_at":"2024-08-02T09:01:17.904Z","updated_at":"2025-04-27T18:31:38.172Z","avatar_url":"https://github.com/JasonBai007.png","language":"JavaScript","readme":"### Target\n\u003e 使用React技术栈开发SPA.\n\n### Tech Stack\n* UI库：React \u0026 React-Dom\n* UI组件：Antd\n* 路由：React-Router \u0026 History\n* 框架：Reflux\n* JS：ES6 \n* 样式：Less\n* 图标：Antd自带/FontAwesome\n* 动画：Animate.css\n* 与后台通信：Fetch/Ajax\n* 日期处理：Moment\n* 假数据模拟：MockJS\n* 打包构建：Babel Webpack\n* 包管理：Npm \u0026 Yarn\n\n### Features\n* 自主配置开发环境\n* 支持ES6\n* React-Router配置路由\n* Less代替Css\n* Fetch代替Ajax\n* MockJs模拟数据\n* AnimateCSS提供动画效果\n* 支持jQuery\n* 支持浏览器自动刷新\n\n### Usage\n\u003e 1、安装依赖：$ yarn install  \n\u003e 2、启动服务：$ npm start  \n\u003e 3、生成文件：$ npm run build  \n\n### Articles\n* [React 的ES5、ES6写法对照表](http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8)\n* [React 组件之间如何交流](http://www.tuicool.com/articles/AzQzEbq)\n* [react-router 中的history](https://zhuanlan.zhihu.com/p/20799258?refer=jscss)\n* [react-router 按需加载](https://segmentfault.com/a/1190000007141049)\n* [ECMAScript 6入门](http://es6.ruanyifeng.com/)\n* [Webpack 实例和文章](https://github.com/JasonBai007/webpack-starter-kit)\n* [React Reflux](https://segmentfault.com/a/1190000002793786)\n* [React+reflux应用 IE8/9/10/11兼容实践](https://segmentfault.com/a/1190000005794242#articleHeader9)\n* [Reflux系列01：异步操作经验小结](https://segmentfault.com/a/1190000004250062)\n* [传统 Ajax 已死，Fetch 永生](http://www.jianshu.com/p/THLARe#)\n* [Fetch API](https://github.github.io/fetch/)\n* [使用Mock.js进行独立于后端的前端开发](https://segmentfault.com/a/1190000003087224)\n\n### Diary(填坑日志)\n\u003e 1、如果引入FontAwesome,会严重增加编译后的CSS文件体积  \n\u003e 2、通过定义Vendors，可以抽取出第三方库文件，避免所有js文件打包在一起  \n\u003e 3、通过安装babel-plugin-import插件，可以自动抽离用到的ant组件  \n\u003e 4、路由的history配置，如果配置成browserHistory,服务器端也需要做相应的配置  \n\u003e 5、路由的history配置，如果配置成hashHistory,则url地址里会有难看的后缀  \n\u003e 6、编译静态文件的webpack配置中，插件项目需要设置成生产环境NODE_ENV:JSON.stringify(\"production\")  \n\u003e 7、实现路由的跳转，页面内的导航，请使用history（自行Github之），这绝壁是个大坑！  \n\u003e 8、本项目使用的是antd 1.x版本，想升级到最新版本（2.x），结果需要改动的地方实在太多，于是放弃  \n\u003e 9、本项目由于很久以前开发的，导致服务启动后控制台会有大量Warnnings  \n\u003e 10、现在使用yarn管理版本，避免了版本冲突，请使用yarn命令安装卸载依赖包：yarn add|remove packages  \n \nLicense\n----\n\nMIT\n","funding_links":[],"categories":["Boilerplates","JavaScript"],"sub_categories":["Themes"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJasonBai007%2FreactSPA","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJasonBai007%2FreactSPA","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJasonBai007%2FreactSPA/lists"}