{"id":16385252,"url":"https://github.com/hua1995116/react-shopping","last_synced_at":"2025-03-16T16:30:53.791Z","repository":{"id":98521845,"uuid":"91524526","full_name":"hua1995116/react-shopping","owner":"hua1995116","description":":shoe:基于react的购物车实战项目","archived":false,"fork":false,"pushed_at":"2017-12-28T03:09:16.000Z","size":3636,"stargazers_count":171,"open_issues_count":6,"forks_count":48,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-16T03:51:08.709Z","etag":null,"topics":["react"],"latest_commit_sha":null,"homepage":"http://www.huayifeng.top:9090","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/hua1995116.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":"2017-05-17T02:23:12.000Z","updated_at":"2025-02-24T01:44:15.000Z","dependencies_parsed_at":"2023-04-16T12:35:25.646Z","dependency_job_id":null,"html_url":"https://github.com/hua1995116/react-shopping","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/hua1995116%2Freact-shopping","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hua1995116%2Freact-shopping/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hua1995116%2Freact-shopping/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hua1995116%2Freact-shopping/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hua1995116","download_url":"https://codeload.github.com/hua1995116/react-shopping/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243896322,"owners_count":20365355,"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":["react"],"created_at":"2024-10-11T04:14:04.418Z","updated_at":"2025-03-16T16:30:53.751Z","avatar_url":"https://github.com/hua1995116.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 前言\n\n前些日子抽空学习了下react，因为近期忙着找工作，没时间写博客，今天我们就来看看用react全家桶，构建一个项目把，可能我学的也不是特别好，但是经过各种查资料，总算是能够构建出一个像模像样的栗子了。\n\ngithub地址：https://github.com/hua1995116/react-shopping\n\n## 脚手架\n\n[generator-react-webpack](https://www.npmjs.com/package/generator-react-webpack)\n\n**Installation**\n\n```\nnpm install -g yo\nnpm install -g generator-react-webpack\n```\n\n**Setting up projects**\n\n```\n# Create a new directory, and `cd` into it:\nmkdir my-new-project \u0026\u0026 cd my-new-project\n \n# Run the generator\nyo react-webpack\n```\n\n## 技术栈\n\nreact+react-router+redux+ webpack + ES6 + fetch+antd\n\n## 项目结构\n\n```\n│  .babelrc\n│  .editorconfig\n│  .eslintrc\n│  .gitignore\n│  .yo-rc.json\n│  karma.conf.js\n│  package.json\n│  prod.server.js\n│  server.js\n│  shop.json\n│  tree.txt\n│  webpack.config.js\n│  \n├─cfg\n│      base.js\n│      defaults.js\n│      dev.js\n│      dist.js\n│      test.js\n│      \n├─dist\n│          \n├─src\n│  │  favicon.ico\n│  │  index.html\n│  │  index.js\n│  │  routes.js\n│  │  \n│  ├─actions\n│  │      index.js\n│  │      README.md\n│  │      \n│  ├─api\n│  │      shop.json\n│  │      \n│  ├─components\n│  │      Destination.js\n│  │      Detail.js\n│  │      Index.js\n│  │      Main.js\n│  │      Plan.js\n│  │      \n│  ├─config\n│  │      base.js\n│  │      dev.js\n│  │      dist.js\n│  │      README.md\n│  │      test.js\n│  │      \n│  ├─constants\n│  │      ActionTypes.js\n│  │      \n│  ├─images\n│  │      \n│  ├─reducers\n│  │      cart.js\n│  │      count.js\n│  │      history.js\n│  │      index.js\n│  │      \n│  ├─sources\n│  │      \n│  ├─stores\n│  │      \n│  └─styles\n│          App.css\n│          \n└─test\n            \n```\n\n## 目标功能\n\n- [x] 商品浏览页面 -- 完成\n- [x] 商品详细页面-- 完成\n- [x] 购物车页面-- 完成\n- [x] 历史记录页面 -- 完成\n\n## 项目运行\n**注意：由于涉及大量的 ES6 等新属性，nodejs 必须是 6.0 以上版本 。**\n```\ngit clone https://github.com/hua1995116/react-shopping.git \n\ncd react-shopping\n\nnpm install\n\nnpm run start //运行\n\nnpm run dist //打包\n```\n## 说明\n\u003e如果本项目对于你有帮助，请顺手进github点个star\n\n\u003e该项目已经在windows 7和mac进行测试。\n\n\u003e 推荐一个vue2 的实战项目（仿网易云音乐） [http://blog.csdn.net/blueblueskyhua/article/details/68156734](http://blog.csdn.net/blueblueskyhua/article/details/68156734)\n\n\u003e 另外推荐一个 vue2 + vuex 的实战项目（实时聊天系统，有后台代码）。[http://blog.csdn.net/blueblueskyhua/article/details/70807847](http://blog.csdn.net/blueblueskyhua/article/details/70807847)\n\n\u003e如果有什么更好的建议或者问题，请及时再下方评论留言。\n\n\n## 效果演示\n\n[http://www.huayifeng.top:8080](http://www.huayifeng.top:8080)\n\n## 核心代码说明\n\n\u003e **\"react\": \"^15.0.0\"**\n原本的 react package 被拆分为 react 及 react-dom 两个 package\n详细看官方api： [https://facebook.github.io/react/](https://facebook.github.io/react/)\n\n\u003e**\"react-router\": \"^4.1.1\"**\nReact Router V4 基于 Lerna 管理多个 Repository。在此代码库包括：\n - react-router React Router 核心\n - react-router-dom 用于 DOM 绑定的 React Router\n - react-router-native 用于 React Native 的 React Router\n - react-router-redux React Router 和 Redux 的集成\n - react-router-config 静态路由配置帮助助手\napi ：[https://reacttraining.com/react-router/web/guides/quick-start](https://reacttraining.com/react-router/web/guides/quick-start)\n\nsrc/index.js\n```\nimport 'core-js/fn/object/assign'\nimport React from 'react'\nimport ReactDOM from 'react-dom' // 14.0版本后拆分成react和react-demo\nimport { createStore ,applyMiddleware } from 'redux'\nimport { Provider } from 'react-redux'\nimport Main from './components/Main'\nimport { createLogger } from 'redux-logger'\nimport thunk from 'redux-thunk'\nimport reducer from './reducers'\nimport 'antd/dist/antd.css'\n\nimport './styles/App.css'\nimport { getAllProducts } from './actions'\n\nconst middleware = [ thunk ] // redux-thunk解决异步回调\nif (process.env.NODE_ENV !== 'production') {\n  middleware.push(createLogger())\n}\n\nconst store = createStore(reducer,\n  applyMiddleware(...middleware) // 中间件\n)\n\nstore.dispatch(getAllProducts()) //获取全部商品\n// Render the main component into the dom\nReactDOM.render(\n   \u003cProvider store={ store } \u003e\n     \u003cMain /\u003e\n   \u003c/Provider\u003e\n  ,document.getElementById('app')\n)\n```\n\n主要定义了一些依赖。以及主入口模版文件Main.js\n\nsrc/components/Main.js\n```\nimport React from 'react'\nimport {\n  BrowserRouter as Router,\n  Route,\n  Link\n} from 'react-router-dom'\nimport {connect} from 'react-redux'\nimport Index from './index'\nimport Destination from './Destination'\nimport Plan from './Plan'\nimport Detail from './Detail'\nimport {Menu, Icon} from 'antd'\nconst SubMenu = Menu.SubMenu\n\nconst Basic = () =\u003e (\n\n  \u003cRouter \u003e\n    \u003cdiv className=\"clear container-main\"\u003e\n      \u003cdiv className=\"fl\"\u003e\n        \u003cMenu\n          style={{width: 240}}\n          defaultSelectedKeys={['1']}\n          defaultOpenKeys={['sub1']}\n          mode=\"inline\"\n        \u003e\n          \u003cSubMenu key=\"sub1\" title={\u003cspan\u003e\u003cIcon type=\"mail\"/\u003e\u003cspan\u003e操作\u003c/span\u003e\u003c/span\u003e}\u003e\n            \u003cMenu.Item key=\"1\"\u003e\u003cLink to=\"/\"\u003e主页\u003c/Link\u003e\u003c/Menu.Item\u003e\n            \u003cMenu.Item key=\"2\"\u003e\u003cLink to=\"/about\"\u003e购物车\u003c/Link\u003e\u003c/Menu.Item\u003e\n            \u003cMenu.Item key=\"3\"\u003e\u003cLink to=\"/topics\"\u003e购买记录\u003c/Link\u003e\u003c/Menu.Item\u003e\n          \u003c/SubMenu\u003e\n        \u003c/Menu\u003e\n      \u003c/div\u003e\n\n      \u003cRoute exact path=\"/\" component={Index}/\u003e\n      \u003cRoute path=\"/about\" component={Destination}/\u003e\n      \u003cRoute path=\"/topics\" component={Plan}/\u003e\n      \u003cRoute path=\"/detail/:topicId\" component={Detail} /\u003e\n    \u003c/div\u003e\n  \u003c/Router\u003e\n)\n\nexport default connect()(Basic)\n```\n运用了函数式编程方式：\n我们可以看看普通继承和函数式编程的差异，函数编程简洁了不少。也可以看到react-router在4.0版本后发生了一些变化。\n![这里写图片描述](http://img.blog.csdn.net/20170525130009551?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmx1ZWJsdWVza3lodWE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)\n\n## 效果图\n![这里写图片描述](http://img.blog.csdn.net/20170525133053530?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmx1ZWJsdWVza3lodWE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)\n\n![这里写图片描述](http://img.blog.csdn.net/20170525133118375?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmx1ZWJsdWVza3lodWE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)\n\n![这里写图片描述](http://img.blog.csdn.net/20170525133131593?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmx1ZWJsdWVza3lodWE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)\n\n![这里写图片描述](http://img.blog.csdn.net/20170525133144187?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmx1ZWJsdWVza3lodWE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)\n\n![这里写图片描述](http://img.blog.csdn.net/20170525133157422?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmx1ZWJsdWVza3lodWE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhua1995116%2Freact-shopping","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhua1995116%2Freact-shopping","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhua1995116%2Freact-shopping/lists"}