前言
前些日子抽空學習了下react，因為近期忙着找工作，沒時間寫博客，今天我們就來看看用react全家桶，構建一個項目把，可能我學的也不是特別好，但是經過各種查資料，總算是能夠構建出一個像模像樣的栗子了。
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
如果有什么更好的建議或者問題，請及時再下方評論留言。
核心代碼說明
“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版本后發生了一些變化。
效果圖
