前言

本節(jié)我們主要將通過react-router完成路由配置，并采用ducks-modular-redux的方式編寫第一個(gè)Counter組件，包列表：

• react-router:關(guān)于react-router的具體使用可以參考官方文檔
• babel-plugin-transform-decorators-legacy支持最es7的(decorator)裝飾器語法
• redux及react-redux

添加新的目錄

在我們的開發(fā)目錄下新建components,containers目錄及routes.js相關(guān)文件,最終目錄結(jié)構(gòu)如下（新增加的用*注釋）：

components目錄：單獨(dú)組件目錄，可以在任意地方調(diào)用
containers目錄：頁面組件目錄，該目錄下每一個(gè)目錄都是一個(gè)單頁
redux目錄：采用redux的方法將，所有redux文件的放置目錄

|-React-redux-example/
    |-node_modules/                    #包文件
    |-public/                        #靜態(tài)目錄
        |-assets/                    #靜態(tài)資源生成目錄
        |-index.html
    |-src/                            #開發(fā)目錄
        |-redux/                    *redux目錄
            |-middleware/            *redux中間件
            |-modules/                *redux的actions,reducers
                |-counter.js        *Counter的actions,reducer
                |-reducers.js        *redux目錄樹
            |-create.js
        |-componets/                *單獨(dú)組件目錄
            |-Counter/                *Counter組件
                |-Counter.js
            |-index.js                *所有組件引用
        |-containers/                *頁面組件目錄
            |-App/                    *APP組件，整個(gè)應(yīng)用頂級(jí)路由
                |-App.js
            |-Home/                    *主頁組件，'/'根路由默認(rèn)頁面
                |-Home.js
            |-index.js                *所有組織的引用
        |-server.js                    #express服務(wù)器文件
        |-app.js                    #client入口文件
        |-routes.js                    *路配置文件
    |-config/                        #配置目錄
        |-webpack.dev.js            #webpack開發(fā)配置文件
    |-package.json        
    |-README.md
    |-.gitignore                    #git的忽略列表

頁面路由

src/containers/App/App.js

這是整個(gè)APP的頂層路由頁面，所有的路由都會(huì)加載這個(gè)頁面組件，然后根據(jù)路由來匹配this.props.children子頁面路由

import React,{Component, PropTypes} from 'react'

export default class App extends Component {

  render(){
    return(
      <div>
        <div>App Nav</div>
        <div>{this.props.children}</div>
        <div>App footer</div>
      </div>
    )
  }
}

src/containers/Home/Home.js

主頁組件，默認(rèn)根路由顯示的頁面

import React,{Component,PropTypes} from 'react'

export default class Home extends Component {

  render(){
    return(
      <div>HomePage</div>
    )
  }
}

src/containers/index.js

集中導(dǎo)出組件，方便引用

export App from './App/App';
export Home from './Home/Home';

src/routes.js

import React from 'react'
//IndexRoute就是根路由默認(rèn)顯示的
import {Route, IndexRoute} from 'react-router'
//從src/containers/index.js導(dǎo)入
import {App, Home} from './containers'

//這里IndexRoute入在根app下后，就是在App頁面組件的props.children
//匹配規(guī)則參考官方文檔
export default (
  <Route name='app' path='/' component={App}>
    <IndexRoute component={Home} />
  </Route>
)

重寫src/app.js

import React from 'react'
import ReactDOM from 'react-dom'

import routes from './routes'
import {Router, browserHistory} from 'react-router'


ReactDOM.render(
  <Router history={browserHistory}>
    {routes}
  </Router>
  ,document.getElementById('app'))

完成npm run dev,看見如下圖說明路由配置成功

編寫第一個(gè)組件Counter

在編譯過程中加入裝飾器語法的插件，就要用到這個(gè)插件babel-plugin-transform-decorators-legacy

module:{
loaders:[
  {
    test:/\.js$/,
    exclude:/node_modules/,
    loader:'babel-loader',
    query:{
      presets:['react','es2015','stage-0'],
      plugins:['transform-decorators-legacy'] //裝飾器插件
    }
  }
]
},

這里我就不再累述如何用編寫redux的組件了，唯一要提醒的就是這里我們用了es7的語法裝飾器，這樣整個(gè)應(yīng)用的邏輯更加清楚。

src/components/Counter/Counter.js
在src/container/Home/Home.js頁面組件下使用Counter組件

import React,{Component, PropTypes} from 'react'

import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'

import * as CounterActions from '../../redux/modules/counter'

@connect(
  state => ({counter:state.counter}),
  dispatch => bindActionCreators(CounterActions,dispatch)
)
export default class Counter extends Component{
  static propTypes = {
    counter:PropTypes.number.isRequired,
    increment:PropTypes.func.isRequired,
    incrementIfOdd:PropTypes.func.isRequired
  };

  render(){
    const {counter,increment,incrementIfOdd} = this.props;
    return(
      <div>
        <h2>{counter}</h2>
        <button onClick={increment}>
           You have clicked me {counter} time{counter === 1 ? '' : 's'}.
        </button>
        <button onClick={incrementIfOdd} >奇數(shù)加法</button>
      </div>
    )
  }

最后效果如下

Next

bootstrap-loader React-bootstrap使用