{"id":15479669,"url":"https://github.com/nealyang/react-fullstack-dianping-demo","last_synced_at":"2025-04-05T12:09:05.335Z","repository":{"id":48249277,"uuid":"101745182","full_name":"Nealyang/React-Fullstack-Dianping-Demo","owner":"Nealyang","description":":fire: react+redux+react-router4.0+webpack2.x重构Dianping App :octocat:","archived":false,"fork":false,"pushed_at":"2022-12-07T04:21:41.000Z","size":18976,"stargazers_count":488,"open_issues_count":15,"forks_count":110,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-10-19T04:11:24.826Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/Nealyang.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}},"created_at":"2017-08-29T09:40:40.000Z","updated_at":"2024-08-06T13:35:15.000Z","dependencies_parsed_at":"2022-08-26T02:20:47.261Z","dependency_job_id":null,"html_url":"https://github.com/Nealyang/React-Fullstack-Dianping-Demo","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/Nealyang%2FReact-Fullstack-Dianping-Demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nealyang%2FReact-Fullstack-Dianping-Demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nealyang%2FReact-Fullstack-Dianping-Demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nealyang%2FReact-Fullstack-Dianping-Demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nealyang","download_url":"https://codeload.github.com/Nealyang/React-Fullstack-Dianping-Demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332612,"owners_count":20921853,"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-10-02T04:22:30.089Z","updated_at":"2025-04-05T12:09:05.294Z","avatar_url":"https://github.com/Nealyang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React技术栈实现XXX电商App-Demo\n\n\u003e 项目地址：https://github.com/Nealyang/React-Fullstack-Dianping-Demo\n\n\u003e 技术栈：react、react-router4.x 、 react-redux 、 webpack3.x、 redux-saga 、 css-module 、 ES6 、babel...\n\n\u003e在慕课网看到相关视频，但是我等屌丝码农真心买不起这个价位的视频。有幸看到源代码，但是看到代码的我。。。也不是很苟同上面代码中react技术栈这一套使用方式。遂自己写了一个demo。\n\n---\n\n一同学习react、node的同学欢迎加入：\n\nNode.js技术交流群：209530601 \n\nReact技术栈：398240621\n\n---\n\n### 微信公众号\n\n![img](https://github.com/Nealyang/PersonalBlog/blob/master/img/wx.jpg)\n\n\u003e 扫码关注微信公众号，获取第一手文章推送\n\n## 项目截图\n\n* 加载\n\n\n![loading](./record/loading.jpg)\n\n* 首页\n\n![首页](./record/home_1.jpg)\n\n\n\n![首页](./record/home_2.jpg)\n\n* 详情页\n\n\n![detail](./record/detail_1.jpg)\n\n\n![detail](./record/detail_2.jpg)\n\n* 城市选择\n\n![city](./record/city.jpg)\n\n## 项目运行展示(gif)\n\u003e 流量党慎入\n\n![app运行展示](https://github.com/Nealyang/React-Fullstack-Dianping-Demo/blob/master/record/play.gif)\n\n![state树变化](https://github.com/Nealyang/React-Fullstack-Dianping-Demo/blob/master/record/state_tree.gif)\n\n***项目内容不多，就涉及到三个页面，主要是为了学习新的知识。项目中用的redux-saga也是前天才学习的。项目的架构也是最近在各种探讨研究。还求大神多指点~***\n\n## 项目技术总结\n\n- [x] [react技术栈项目结构探究](./docs/react技术栈项目结构探究.md)\n- [x] [redux-saga初体验](./docs/redux-saga初体验.md)\n- [x] [关于项目中webpack的配置说明](./docs/关于项目中的webpack使用.md)\n\n## 项目简单说明\n\n* 开发react-redux这一套，我个人的理解是 ***Redux体现的是代码分层、职责分离的编程思想,逻辑与视图严格区分。*** 而某网上的这一套代码，逻辑都写到了view组件层，组件需要关心如何获取数据，如何处理数据，这样的组件层是不容易复用的，Redux的使用也是残缺的。甚至这种情况，你不用Redux，直接定义一个全局的state变量，所有组件都来直接操作它好了。\n\n* 项目还有许多需要完善的地方，redux-saga的使用方式、项目结构、包括webpack3.x配合react的代码优化以及react的Universal渲染甚至后端Node的代码编写。欢迎各路大神前来指教~\n\n## 项目实现\n\n- [x] react热更新 \n- [x] css-module使用 \n- [x] react-redux异步处理 \n- [x] react-router 浏览器传参、获取 \n- [x] redux-saga辅助\n- [x] 上拉加载更多\n- [x] 全局监控Loading\n- [x] ......\n\n- [ ] Universal渲染 [可参考我另一个项目webpack1.x](https://github.com/Nealyang/neal-teach-website/blob/master/record/framework.md)\n\n## 安装步骤\n    \n    # clone this demo \n    git clone ...\n    \n    # install dependencies\n    npm i (or yarn)\n    \n    # serve with hot reload at localhost:8000\n    npm start\n\n\n\n## more\n\n后续会继续改进技术，如果有时间会写一个[全栈的demo](https://github.com/Nealyang/React-Express-Blog-Demo)，着重后端Node和mongo的使用。前端依旧使用react技术栈完成。\n\n (^_^)/~~ \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnealyang%2Freact-fullstack-dianping-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnealyang%2Freact-fullstack-dianping-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnealyang%2Freact-fullstack-dianping-demo/lists"}