React系列学习笔记：6.Home页面

前言

本节主要编写一个静态的页面，主要是HTML和CSS的基础，与React没有什么关系，这里我们引用的font-awesome图标库。进行了基本的配置，用到的包如下

• font-awesome-webpack：需要less-loader加载器，基本配置可以参考官方文档，非常简单的几步就能在应用中使用图标了

配置

在使用bootstrap的时候我们已经在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模块最佳实践的示例</h2>
            <p>
              <a className={styles.github} href="https://github.com/luna825/react-redux-example"
               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>
    )
  }
}

最后效果图