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(
      

        

          

            

            
React Redux Example
            
所有React Redux模块最佳实践的示例
            

              
              Github源码
               
            

            
            
          

        


        

          

            
          
        

      

    )
  }
}

最后效果图