这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战。

一、开启react中scss

1. 安装sass
npm install sass-loader node-sass --save-dev
2. 开启webpack配置 ， 在config目录下，改webpack.config.dev和webpack.config.pro的配置
{
  // Exclude `js` files to keep "css" loader working as it injects
  // its runtime that would otherwise be processed through "file" loader.
  // Also exclude `html` and `json` extensions so they get processed
  // by webpacks internal loaders.
  exclude: [/.(js|mjs|jsx)$/, /.html$/, /.json$/,/.scss$/],
  loader: require.resolve('file-loader'),
  options: {
    name: 'static/media/[name].[hash:8].[ext]',
  },
},
{
  test: /.scss$/,
  loaders: ['style-loader','css-loader','sass-laoder']
}
3. 如果提示node-sass的版本不兼容
需要先卸载，然后
npm install node-sass@4.14.1

二、开始写首页的头部导航栏

// 首页的字路由
import React from 'react';
import '../../../assets/css/home/index/index.scss'
export default class  IndexComponent extends React.Component{
    componentDidMount(){

    }
    render(){
        return(
            <div id={'homeIndex'}>
             {/*  header  */}
                <div className="header">
                    <div className="category"></div>
                    <div className="search-container">
                        <div className="search-btn"></div>
                        <div className="search-holder">请输入宝贝名称</div>
                    </div>
                    <div className="login-container">
                        <div className="un-login">
                            登录
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
// 首页字路由的样式
#homeIndex {
  div {
    box-sizing: border-box;
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    top: 0;
    z-index: 10;
    height: 2.5rem;
    background: linear-gradient(rgba(1, 1, 1, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    padding: 0 0.75rem;
    .category {
      width: 1.5rem;
      height: 1.5rem;
      background: url("../../../images/common/class.png");
      background-size: 100% 100%;
    }
    .search-container {
      display: flex;
      align-items: center;
      margin: 0 0.5rem;
      height: 1.3rem;
      flex: 1;
      background:  rgba(255,255,255,0.6);
      border-radius: 0.25rem;
      .search-btn {
        margin: 0 0.5rem 0 0.25rem;
        width: 1.1rem;
        height: 1.1rem;
        background: url("../../../images/common/search.png");
        background-size: 100% 100%;
      }
      .search-holder {
        font-size: 0.7rem;
        color: #ffffff;
      }
    }
    .login-container {
      .un-login {
        font-size: 0.8rem;
        color: #ffffff;
      }
    }
  }
  .header.red-bg {
    background: linear-gradient(rgb(235, 22, 37) 0%, rgba(255, 255, 255, 0) 100%);
  }
}

头部的导航栏就做好了

三、使用swiper做轮播图

官网地址： 3.swiper.com.cn/api/Loop/20…

import Swiper from  '../../../assets/js/libs/swiper.min'
import '../../../assets/css/common/swiper.min.css'

componentDidMount(){
    new Swiper('.swiper-container', {
        loop:true,
        autoplay: 3000,//可选选项，自动滑动
        pagination : '.swiper-pagination',
        autoplayDisableOnInteraction : false
    })
}

{/*  swiper  */}
    <div className="swiper-container">
        <div className="swiper-wrapper">
            <div className="swiper-slide">
                <img src="//vueshop.glbuys.com/uploadfiles/1484285302.jpg" alt=""/>
            </div>
            <div className="swiper-slide">
                <img src="//vueshop.glbuys.com/uploadfiles/1484285334.jpg" alt=""/>
            </div>
            <div className="swiper-slide">
                <img src="//vueshop.glbuys.com/uploadfiles/1524206455.jpg" alt=""/>
            </div>
        </div>
        <div className="swiper-pagination"></div>
    </div>

轮播图就好了

四、快速导航

{/*  quick-nav  */}
    <div className="quick-nav">
        <div className="quick-nav-item">
            <img src="//vueshop.glbuys.com/uploadfiles/1484287695.png" alt="" className="nav-icon" />
            <span className="nav-title">潮流女装</span>
        </div>
        <div className="quick-nav-item">
            <img src="//vueshop.glbuys.com/uploadfiles/1484287842.png" alt="" className="nav-icon" />
            <span className="nav-title">品牌男装</span>
        </div>
        <div className="quick-nav-item">
            <img src="//vueshop.glbuys.com/uploadfiles/1484287842.png" alt="" className="nav-icon" />
            <span className="nav-title">电脑办公</span>
        </div>
        <div className="quick-nav-item">
            <img src="//vueshop.glbuys.com/uploadfiles/1484288118.png" alt="" className="nav-icon" />
            <span className="nav-title">手机数码</span>
        </div>
    </div>
    
.quick-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 4rem;
  margin-top: 0.5rem;
  background-color: #fff;
  .quick-nav-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 3.5rem;
    margin: 0 2%;
    .nav-icon {
      width: 2rem;
      height: 2rem;
    }
    .nav-title {
      width: 100%;
      text-align: center;
      font-size: 0.7rem;
      color: #7b7f82;
      margin-top: 0.2rem;
    }
  }
}

五、首页剩下的一些静态页面

无非一些div + css ,代码过多就不贴上来了，感兴趣的可以访问github

https://github.com/liujun8892/reactshop

效果

六、滚动导航栏变色效果

constructor(props) {
    super(props);
    this.state = {
        // 滚动导航栏变色开关
        isScroll: false
    }
    // 离开页面不再有滚动变色效果
    this.isScroll = true
}
componentDidMount(){
    new Swiper('.swiper-container', {
        loop:true,
        autoplay: 3000,//可选选项，自动滑动
        pagination : '.swiper-pagination',
        autoplayDisableOnInteraction : false
    })
    // 监听页面滚动
    window.addEventListener('scroll', this.handlePageScroll.bind(this), false)
}
componentWillUnmount() {
    this.isScroll = false
    // 移除监听滚动事件
    window.removeEventListener('scroll',this.handlePageScroll.bind(this))
}
handlePageScroll() {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    if(this.isScroll) {
        if(scrollTop >= 80) {
            this.setState({
                isScroll: true
            })
        } else  {
            this.setState({
                isScroll: false
            })
        }
    }
}

// div的样式
<div className={this.state.isScroll ? 'header red-bg' : 'header'}>

滚动导航栏颜色渐变效果好了