前言

本節(jié)主要編寫一個靜態(tài)的頁面，主要是HTML和CSS的基礎(chǔ)，與React沒有什么關(guān)系，這里我們引用的font-awesome圖標(biāo)庫。進(jìn)行了基本的配置，用到的包如下

• font-awesome-webpack：需要less-loader加載器，基本配置可以參考官方文檔，非常簡單的幾步就能在應(yīng)用中使用圖標(biāo)了

配置

在使用bootstrap的時候我們已經(jīng)在webpack中配置了Loaders這里我們就不用再寫了。只需要和bootstrap一樣在entry里添加：

module.exports = {
  entry: [
    "font-awesome-webpack!./path/to/font-awesome.config.js",
    "your-existing-entry-point"
  ]
};

這里我們把font-awesome.config.js放在theme這個樣式文件夾中。直接Copy官方文檔的配置就好了，注意雖然我們沒有使用font-awesome.config.less但是必須要有這個文件，所以我們建了一個空的。OK，下面我們就開始寫Home頁面組件了。

Home頁面 組件##

由于比較簡單，就直接上代碼了。這里主要用了一個GithubButton組件，用的是Github的API，可以參考下這里http://ghbtns.com/

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

import {Counter,GithubButton} from '../../components'

export default class Home extends Component {

  render(){
    const logoImage = require('./logo.png')
    const styles = require('./Home.scss')
    return(
      <div className={styles.home}>
        <div className={styles.masthead}>
          <div className="container">
            <div className={styles.logo}><img src={logoImage} /></div>
            <h1>React Redux Example</h1>
            <h2>所有React Redux模塊最佳實(shí)踐的示例</h2>
            <p>
              <a className={styles.github} 
               target="_blank">
              <i className="fa fa-github"/>Github源碼
              </a> 
            </p>
            <GithubButton user='luna825' repo='react-redux-example' type='star' height={30} width={160} count large />
            <GithubButton user='luna825' repo='react-redux-example' type='fork' height={30} width={160} count large />
          </div>
        </div>

        <div className='container'>
          <div className={styles.counterContainer}>
            <Counter />
          </div>
        </div>

      </div>
    )
  }
}