前言
本節(jié)主要編寫一個(gè)靜態(tài)的頁面岖沛，主要是HTML和CSS的基礎(chǔ)婴削，與React沒有什么關(guān)系牙肝，這里我們引用的font-awesome圖標(biāo)庫。進(jìn)行了基本的配置雹姊，用到的包如下
- font-awesome-webpack：需要
less-loader加載器，基本配置可以參考官方文檔歧杏，非常簡單的幾步就能在應(yīng)用中使用圖標(biāo)了
配置
在使用bootstrap的時(shí)候我們已經(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這個(gè)樣式文件夾中凯力。直接Copy官方文檔的配置就好了，注意雖然我們沒有使用font-awesome.config.less但是必須要有這個(gè)文件慷暂，所以我們建了一個(gè)空的行瑞。OK血久，下面我們就開始寫Home頁面組件了氧吐。
Home頁面 組件##
由于比較簡單筑舅，就直接上代碼了翠拣。這里主要用了一個(gè)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>
)
}
}
