react+react-router 4.0+redux 構建購物車實戰項目

前言

前些日子抽空學習了下react，由於近期忙着找工做，沒時間寫博客，今天咱們就來看看用react全家桶，構建一個項目把，可能我學的也不是特別好，可是通過各類查資料，總算是可以構建出一個像模像樣的栗子了。

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

腳手架

generator-react-webpack

Installation

npm install -g yo
npm install -g generator-react-webpack

　　

Setting up projects

# Create a new directory, and `cd` into it:
mkdir my-new-project && cd my-new-project

# Run the generator
yo react-webpack

　　

技術棧

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

項目結構

│  .babelrc
│  .editorconfig
│  .eslintrc
│  .gitignore
│  .yo-rc.json
│  karma.conf.js
│  package.json
│  prod.server.js
│  server.js
│  shop.json
│  tree.txt
│  webpack.config.js
│  
├─cfg
│      base.js
│      defaults.js
│      dev.js
│      dist.js
│      test.js
│      
├─dist
│          
├─src
│  │  favicon.ico
│  │  index.html
│  │  index.js
│  │  routes.js
│  │  
│  ├─actions
│  │      index.js
│  │      README.md
│  │      
│  ├─api
│  │      shop.json
│  │      
│  ├─components
│  │      Destination.js
│  │      Detail.js
│  │      Index.js
│  │      Main.js
│  │      Plan.js
│  │      
│  ├─config
│  │      base.js
│  │      dev.js
│  │      dist.js
│  │      README.md
│  │      test.js
│  │      
│  ├─constants
│  │      ActionTypes.js
│  │      
│  ├─images
│  │      
│  ├─reducers
│  │      cart.js
│  │      count.js
│  │      history.js
│  │      index.js
│  │      
│  ├─sources
│  │      
│  ├─stores
│  │      
│  └─styles
│          App.css
│          
└─test

　　

目標功能

• [x] 商品瀏覽頁面 – 完成
• [x] 商品詳細頁面– 完成
• [x] 購物車頁面– 完成
• [x] 歷史記錄頁面 – 完成

項目運行

注意：因爲涉及大量的 ES6 等新屬性，nodejs 必須是 6.0 以上版本 。

git clone https://github.com/hua1995116/react-shopping.git 

cd react-shopping

npm install

npm run start //運行

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.qiufengh.com:8082

核心代碼說明

「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

import 'core-js/fn/object/assign'
import React from 'react'
import ReactDOM from 'react-dom' // 14.0版本後拆分紅react和react-demo
import { createStore ,applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import Main from './components/Main'
import { createLogger } from 'redux-logger'
import thunk from 'redux-thunk'
import reducer from './reducers'
import 'antd/dist/antd.css'

import './styles/App.css'
import { getAllProducts } from './actions'

const middleware = [ thunk ] // redux-thunk解決異步回調
if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger())
}

const store = createStore(reducer,
  applyMiddleware(...middleware) // 中間件
)

store.dispatch(getAllProducts()) //獲取所有商品
// Render the main component into the dom
ReactDOM.render(
   <Provider store={ store } >
     <Main />
   </Provider>
  ,document.getElementById('app')
)

　　

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

src/components/Main.js

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import {connect} from 'react-redux'
import Index from './index'
import Destination from './Destination'
import Plan from './Plan'
import Detail from './Detail'
import {Menu, Icon} from 'antd'
const SubMenu = Menu.SubMenu

const Basic = () => (

  <Router >
    <div className="clear container-main">
      <div className="fl">
        <Menu
          style={{width: 240}}
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
        >
          <SubMenu key="sub1" title={<span><Icon type="mail"/><span>操做</span></span>}>
            <Menu.Item key="1"><Link to="/">主頁</Link></Menu.Item>
            <Menu.Item key="2"><Link to="/about">購物車</Link></Menu.Item>
            <Menu.Item key="3"><Link to="/topics">購買記錄</Link></Menu.Item>
          </SubMenu>
        </Menu>
      </div>

      <Route exact path="/" component={Index}/>
      <Route path="/about" component={Destination}/>
      <Route path="/topics" component={Plan}/>
      <Route path="/detail/:topicId" component={Detail} />
    </div>
  </Router>
)

export default connect()(Basic)

　　

運用了函數式編程方式： 
咱們能夠看看普通繼承和函數式編程的差別，函數編程簡潔了很多。也能夠看到react-router在4.0版本後發生了一些變化。 

 

效果圖