项目作者: hua1995116

项目描述 :
:shoe:基于react的购物车实战项目
高级语言: JavaScript
项目地址: git://github.com/hua1995116/react-shopping.git
创建时间: 2017-05-17T02:23:12Z
项目社区:https://github.com/hua1995116/react-shopping

开源协议:

下载


前言

前些日子抽空学习了下react,因为近期忙着找工作,没时间写博客,今天我们就来看看用react全家桶,构建一个项目把,可能我学的也不是特别好,但是经过各种查资料,总算是能够构建出一个像模像样的栗子了。

github地址:https://github.com/hua1995116/react-shopping

脚手架

generator-react-webpack

Installation

  1. npm install -g yo
  2. npm install -g generator-react-webpack

Setting up projects

  1. # Create a new directory, and `cd` into it:
  2. mkdir my-new-project && cd my-new-project
  3. # Run the generator
  4. yo react-webpack

技术栈

react+react-router+redux+ webpack + ES6 + fetch+antd

项目结构

  1. .babelrc
  2. .editorconfig
  3. .eslintrc
  4. .gitignore
  5. .yo-rc.json
  6. karma.conf.js
  7. package.json
  8. prod.server.js
  9. server.js
  10. shop.json
  11. tree.txt
  12. webpack.config.js
  13. ├─cfg
  14. base.js
  15. defaults.js
  16. dev.js
  17. dist.js
  18. test.js
  19. ├─dist
  20. ├─src
  21. favicon.ico
  22. index.html
  23. index.js
  24. routes.js
  25. ├─actions
  26. index.js
  27. README.md
  28. ├─api
  29. shop.json
  30. ├─components
  31. Destination.js
  32. Detail.js
  33. Index.js
  34. Main.js
  35. Plan.js
  36. ├─config
  37. base.js
  38. dev.js
  39. dist.js
  40. README.md
  41. test.js
  42. ├─constants
  43. ActionTypes.js
  44. ├─images
  45. ├─reducers
  46. cart.js
  47. count.js
  48. history.js
  49. index.js
  50. ├─sources
  51. ├─stores
  52. └─styles
  53. App.css
  54. └─test

目标功能

  • 商品浏览页面 — 完成
  • 商品详细页面— 完成
  • 购物车页面— 完成
  • 历史记录页面 — 完成

项目运行

注意:由于涉及大量的 ES6 等新属性,nodejs 必须是 6.0 以上版本 。

  1. git clone https://github.com/hua1995116/react-shopping.git
  2. cd react-shopping
  3. npm install
  4. npm run start //运行
  5. npm run dist //打包

说明

如果本项目对于你有帮助,请顺手进github点个star

该项目已经在windows 7和mac进行测试。

推荐一个vue2 的实战项目(仿网易云音乐) http://blog.csdn.net/blueblueskyhua/article/details/68156734

另外推荐一个 vue2 + vuex 的实战项目(实时聊天系统,有后台代码)。http://blog.csdn.net/blueblueskyhua/article/details/70807847

如果有什么更好的建议或者问题,请及时再下方评论留言。

效果演示

http://www.huayifeng.top:8080

核心代码说明

“react”: “^15.0.0”
原本的 react package 被拆分为 react 及 react-dom 两个 package
详细看官方api: https://facebook.github.io/react/

“react-router”: “^4.1.1”
React Router V4 基于 Lerna 管理多个 Repository。在此代码库包括:

  • react-router React Router 核心
  • react-router-dom 用于 DOM 绑定的 React Router
  • react-router-native 用于 React Native 的 React Router
  • react-router-redux React Router 和 Redux 的集成
  • react-router-config 静态路由配置帮助助手
    api :https://reacttraining.com/react-router/web/guides/quick-start

src/index.js

  1. import 'core-js/fn/object/assign'
  2. import React from 'react'
  3. import ReactDOM from 'react-dom' // 14.0版本后拆分成react和react-demo
  4. import { createStore ,applyMiddleware } from 'redux'
  5. import { Provider } from 'react-redux'
  6. import Main from './components/Main'
  7. import { createLogger } from 'redux-logger'
  8. import thunk from 'redux-thunk'
  9. import reducer from './reducers'
  10. import 'antd/dist/antd.css'
  11. import './styles/App.css'
  12. import { getAllProducts } from './actions'
  13. const middleware = [ thunk ] // redux-thunk解决异步回调
  14. if (process.env.NODE_ENV !== 'production') {
  15. middleware.push(createLogger())
  16. }
  17. const store = createStore(reducer,
  18. applyMiddleware(...middleware) // 中间件
  19. )
  20. store.dispatch(getAllProducts()) //获取全部商品
  21. // Render the main component into the dom
  22. ReactDOM.render(
  23. <Provider store={ store } >
  24. <Main ></Main>
  25. </Provider>
  26. ,document.getElementById('app')
  27. )

主要定义了一些依赖。以及主入口模版文件Main.js

src/components/Main.js

  1. import React from 'react'
  2. import {
  3. BrowserRouter as Router,
  4. Route,
  5. Link
  6. } from 'react-router-dom'
  7. import {connect} from 'react-redux'
  8. import Index from './index'
  9. import Destination from './Destination'
  10. import Plan from './Plan'
  11. import Detail from './Detail'
  12. import {Menu, Icon} from 'antd'
  13. const SubMenu = Menu.SubMenu
  14. const Basic = () => (
  15. <Router >
  16. <div className="clear container-main">
  17. <div className="fl">
  18. <Menu
  19. style={{width: 240}}
  20. defaultSelectedKeys={['1']}
  21. defaultOpenKeys={['sub1']}
  22. mode="inline"
  23. >
  24. <SubMenu key="sub1" title={<span><Icon type="mail"></Icon><span>操作</span></span>}>
  25. <Menu.Item key="1"><Link to="/">主页</Link></Menu.Item>
  26. <Menu.Item key="2"><Link to="/about">购物车</Link></Menu.Item>
  27. <Menu.Item key="3"><Link to="/topics">购买记录</Link></Menu.Item>
  28. </SubMenu>
  29. </Menu>
  30. </div>
  31. <Route exact path="/" component={Index}></Route>
  32. <Route path="/about" component={Destination}></Route>
  33. <Route path="/topics" component={Plan}></Route>
  34. <Route path="/detail/:topicId" component={Detail} ></Route>
  35. </div>
  36. </Router>
  37. )
  38. export default connect()(Basic)

运用了函数式编程方式:
我们可以看看普通继承和函数式编程的差异,函数编程简洁了不少。也可以看到react-router在4.0版本后发生了一些变化。
这里写图片描述

效果图

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述