美文网首页
React系列学习笔记:6.Home页面

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

作者: Moon_Yue | 来源:发表于2016-04-09 14:10 被阅读284次

前言

本节主要编写一个静态的页面,主要是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>
    )
  }
}
最后效果图

相关文章

网友评论

      本文标题:React系列学习笔记:6.Home页面

      本文链接:https://www.haomeiwen.com/subject/kyqblttx.html