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

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

│  .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

git clone https://github.com/hua1995116/react-shopping.git cd react-shoppingnpm installnpm run start //运行npm run dist //打包

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')
)

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.SubMenuconst Basic = () => (<Router ><div className="clear container-main"><div className="fl"><Menustyle={{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)