（10）首页开发——② 首页布局 | React.js 项目实战：PC 端“简书”开发

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥"前端一万小时"两大明星专栏------"从零基础到轻松就业"、"前端面试刷题"，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

1 首页组件拆分

对于"简书"首页，我们大致可以分为以下几个小组件：

反映在代码结构上则为：

顺便给各个"组件"加上一些初始的代码：

Content.js

jsx 复制代码

import React, {Component} from "react";

class Content extends Component {
  render() {
    return(
      <div>Content~</div>
    )
  }
}

export default Content;

Label.js

jsx 复制代码

import React, {Component} from "react";

class Label extends Component {
  render() {
    return(
      <div>Label~</div>
    )
  }
}

export default Label;

Panels.js

jsx 复制代码

import React, {Component} from "react";

class Panels extends Component {
  render() {
    return(
      <div>Panels~</div>
    )
  }
}

export default Panels;

Download.js

jsx 复制代码

import React, {Component} from "react";

class Download extends Component {
  render() {
    return(
      <div>Download~</div>
    )
  }
}

export default Download;

2 首页组件整体"布局"

1️⃣我们先把整个 home 组件的大布局做了。打开 home 目录下的 index.js 件（将之前的测试代码删除掉）：

jsx 复制代码

import React, {Component} from "react";

// 1️⃣-③：从 components 里边引入各小组件；
import Content from "./components/Content";
import Label from "./components/Label";
import Panels from "./components/Panels";
import Download from "./components/Download";

// 1️⃣-②：从当前目录下的 style.js 中，引入"样式组件"；
import {
  Section,
  Aside,
  Main,
  ToTop
  
} from "./style.js";


class Home extends Component {
  render() {
    return( // 1️⃣-①：写出"首页"的 JSX；
      <div>
        <Section className="layout clearfix"> {/*
        																			 ❗️我们在 common.css 里已对
        																			 class 为 section 的元素进行了样式的
                                               制定，故这里直接用即可！
                                                */}
          <Aside>
            <Panels />
            <Download />
          </Aside>
        
          <Main>
            <img className="banner-img" src="https://qdywxs.github.io/jianshu-images/carousel01.jpg" alt="" />
            
            <Label />
            <Content />
          </Main>
        </Section>
        
        
        <ToTop> {/* ❗️对于这种代码量很小的"功能"，我们可以不用分出一个"组件"进行单独管理！ */}
          <span className="up">^</span>
          <span className="tooltip">回到顶部</span>
        </ToTop>
      </div>
    )
  }
}

export default Home;

2️⃣在 home 目录下新建一个 style.js 件，用于存放"首页"大的样式：

javascript 复制代码

import styled from "styled-components";

export const Section = styled.section`
  margin-top: 30px;
`;

export const Aside = styled.aside`
  float: right;
  width: 280px;
`;

export const Main = styled.main`
  margin-right: 318px;

  .banner-img {
    width: 632px;
    height: 270px;
  }
`;

export const ToTop = styled.div`
  position: fixed;
  right: 40px;
  bottom: 50px;
  width: 60px;
  height: 60px;
  line-height: 60px;

  text-align: center;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;

  &:hover {
    background-color: #f8f8f8;
  }

  .up {
    font-size: 20px;
  }

  .tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 63px;
    text-align: center;
    line-height: 1.8;
    color: #fff;
    background-color: #000;
    border-radius: 4px;
    display: none
  }

  &:hover .tooltip {
    display: block;
  }

  .tooltip:after {  /*❗️用于制作向右的三角！*/
    content: "";
    position: absolute;
    right: -12px;
    top: 5px;

    dispaly: block;

    width: 0;
    height: 0;

    border-style: solid;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent #000;
  }
`;

返回页面查看效果：

3 各单个组件"布局"

💡前置知识：

🔗《🚀HTML+CSS 实战：PC 端"简书"静态首页开发------② 侧边栏 + 推荐》

🔗《🚀HTML+CSS 实战：PC 端"简书"静态首页开发------③ 轮播 + 按钮组 + 内容区 + 置顶按钮》

3.1 Label 组件布局

JSX------打开 components 目录下的 Label.js 件：

jsx 复制代码

import React, {Component} from "react";

/*❗️2️⃣从 home 目录下的 style.js 中引入各个定义好的"样式组件"；*/
import {
  LabelGroup,
  Labels,
  MoreLabels
} from "../style";


class Label extends Component {
  render() {
    
    // ❗️❗️❗️1️⃣将"标签"拆分成一个个的"样式组件"；
    return(
      <LabelGroup className="clearfix">
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label01.jpg" alt="" />
          简书电影
        </Labels>
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label02.jpg" alt="" />
          故事
        </Labels>
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label03.jpg" alt="" />
          手绘
        </Labels>
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label04.jpg" alt="" />
          历史
        </Labels>
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label05.jpg" alt="" />
          人文社科
        </Labels>
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label06.jpg" alt="" />
          摄影
        </Labels>
        <Labels>
          <img src="https://qdywxs.github.io/jianshu-images/label07.jpg" alt="" />
          自然科普
        </Labels>
      
        <MoreLabels>
          更多热门专题
        </MoreLabels>
      </LabelGroup>
    )
  }
}

export default Label;

styled-components------打开 home 目录下的 style.js 文件：

javascript 复制代码

import styled from "styled-components";

// ❗️篇幅原因，这里省略之前的代码！

export const LabelGroup = styled.div`
  margin-top: 20px;
`;

export const Labels = styled.span`
  display: inline-block;
  padding-right: 10px;
  margin: 10px 20px 10px 0;
  color: #333;

  vertical-align: middle;

  background-color: #f7f7f7;
  border: 1px solid #dcdcdc;
  border-radius: 4px;

  overflow: hidden;

  cursor: pointer;

  & > img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    vertical-align: middle;
  }
`;

export const MoreLabels = styled.span`
  color: #787878;
  vertical-align: middle;
  cursor: pointer;
`;

3.2 content 组件布局

JSX------打开 components 目录下的 Content.js 文件：

jsx 复制代码

import React, {Component} from "react";

import {Link} from "react-router-dom";

// ❗️2️⃣从 home 目录下的 style.js 中引入各个定义好的"样式组件"；
import {
  Item,
  Cover,
  Details,
  Title,
  Foot,
  LoadMore
} from "../style";

class Content extends Component {
  render() {
    
    // ❗️❗️❗️1️⃣：将"标签"拆分成一个个的"样式组件"；
    return(
      <div>
        <Item>
          <Cover>
            <Link to="/detail"><img src="https://qdywxs.github.io/jianshu-images/article-img01.jpg" alt="" /></Link>
          </Cover>
        
          <Details>
            <Link to="/detail">
              <Title>
                评"超时空同居"浅议爱情电影和奇幻元素的嫁接
              </Title>
            </Link>
            <p>
              这部电影充分照顾到了八零后的情怀，九零后的笑点，零零后嘛，那就是奇幻爱情吧。奇幻爱情喜剧，三种元素都有，但哪种都不出彩，相对来说喜剧元素稍微强一...
            </p>
        
            <Foot>
              <Link to="/"><span className="username">苇筱</span></Link>
              <span className="iconfont icon-comment">&#xe602;</span><span>31</span>
              <span className="iconfont icon-heart">&#xe8f4;</span><span>21</span>
              <span className="iconfont icon-money">&#xe607;</span><span>1</span>
            </Foot>
          </Details>
        </Item>
        
        <Item>
          <Cover>
            <Link to="/detail"><img src="https://qdywxs.github.io/jianshu-images/article-img02.jpeg" alt="" /></Link>
          </Cover>
        
          <Details>
            <Link to="/detail">
              <Title>
                生活随记八则
              </Title>
            </Link>
            <p>
              1 不再困惑也不再迷茫，头脑中的构想在现实生活中并驾齐驱地向前推进，虽然困难重重但能够想方设法加以克服。前景广阔而美好，只是有一丝淡淡的凄凉，也...
            </p>
        
            <Foot>
              <Link to="/"><span className="username">Jobs</span></Link>
              <span className="iconfont icon-comment">&#xe602;</span><span>31</span>
              <span className="iconfont icon-heart">&#xe8f4;</span><span>21</span>
              <span className="iconfont icon-money">&#xe607;</span><span>1</span>
            </Foot>
          </Details>
        </Item>
        
        <Item>
          <Cover>
            <Link to="/detail"><img src="https://qdywxs.github.io/jianshu-images/article-img03.jpg" alt="" /></Link>
          </Cover>
        
          <Details>
            <Link to="/detail">
              <Title>
                "前端一万小时"又惊艳了我一把
              </Title>
            </Link>
            <p>
              Hey guys, 我正在这个平台分发"前端一万小时"这个专栏的一系列文章。这个专栏我已经完成了"从零基础到就业"的相关文章。"从零基础到就业"包含 150+ 篇干货文章，300+ 道经典笔试、面试题。如果你对本系列文章感兴趣，欢迎关注 「公众号：前端一万小时」，并点击菜单栏"全部文章"来加入我们的"一万小时计划"！祝顺利，祝成功^^......
            </p>
        
            <Foot>
              <Link to="/"><span className="username">Oli</span></Link>
              <span className="iconfont icon-comment">&#xe602;</span><span>9k+</span>
              <span className="iconfont icon-heart">&#xe8f4;</span><span>10k+</span>
              <span className="iconfont icon-money">&#xe607;</span><span>100000k+</span>
            </Foot>
          </Details>
        </Item>

        <LoadMore>
          加载更多
        </LoadMore>
      </div>
    )
  }
}

export default Content;

styled-components------打开 home 目录下的 style.js 文件：

javascript 复制代码

import styled from "styled-components";

/*❗️篇幅原因，这里省略之前的代码！*/

export const Item = styled.div`
  position: relative;
  border-top: 1px solid #ccc;
  margin-top: 20px;
  padding: 20px 0;
`;

export const Cover = styled.div`
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -58px;
  width: 140px;
  height: 117px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  overflow: hidden;

  & img {
    width: 100%;
    height: 100%;
    vertical-align: top;
  }
`;

export const Details = styled.div`
  margin-right: 160px;
`;

export const Title = styled.h2`
  margin-top: 10px;
  color: #333;
  font-size: 20px;
`;

export const Foot = styled.div`
  margin-top: 10px;
  font-size: 12px;

  & .username {
    color: #999;
  }

  & .username:hover {
    color: #333;
  }

  & > span {
    color: #999;
  }

  .iconfont {
    margin-left: 10px;
  }
`;

export const LoadMore = styled.div`
  width: 100%;
  height: 40px;
  margin: 30px 0;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background-color: #a5a5a5;
  border-radius: 20px;
  cursor: pointer;
`;

3.3 Panels 组件布局

JSX------打开 components 目录下的 Panels.js 件：

jsx 复制代码

import React, {Component} from "react";

import {Link} from "react-router-dom"; // ❗️引入 Link 进行"单页"应用页面跳转！

// ❗️2️⃣从 home 目录下的 style.js 中引入各个定义好的"样式组件"；
import {
  PanelImage
} from "../style";

class Panels extends Component {
  render() {
    
    // ❗️❗️❗️1️⃣：将"标签"拆分成一个个的"样式组件"；
    return(
      <div>
       
        <PanelImage>
          <Link to="/">
            <img src="https://qdywxs.github.io/jianshu-images/panel01.png" alt="" />
          </Link>
        </PanelImage>
       

        <PanelImage>
          <Link to="/">
            <img src="https://qdywxs.github.io/jianshu-images/panel02.png" alt="" />
          </Link>
        </PanelImage>
        
        
        <PanelImage>
          <Link to="/">
            <img src="https://qdywxs.github.io/jianshu-images/panel03.png" alt="" />
          </Link>  
        </PanelImage>

        
        <PanelImage>
          <Link to="/">
            <img src="https://qdywxs.github.io/jianshu-images/panel04.png" alt="" />
          </Link>
        </PanelImage>
       
        
        <PanelImage>
          <Link to="/">
            <img src="https://qdywxs.github.io/jianshu-images/panel05.png" alt="" />
          </Link>
        </PanelImage>

      </div>
    )
  }
}

export default Panels;

styled-components------打开 home 目录下的 style.js 件：

javascript 复制代码

import styled from "styled-components";

// ❗️篇幅原因，这里省略之前的代码！

export const PanelImage = styled.div`
  & img {
    width: 280px;
    height: 45px;
  }
`;

3.4 Download 组件布局

JSX------打开 components 目录下的 Download.js 件：

jsx 复制代码

import React, {Component} from "react";

import {Link} from "react-router-dom"; // ❗️引入 Link 进行"单页"应用页面跳转！

// ❗️2️⃣从 home 目录下的 style.js 中引入各个定义好的"样式组件"；
import {
  DownloadArea,
  DownloadTip
} from "../style"

class Download extends Component {
  render() {
    
    // ❗️❗️❗️1️⃣：将"标签"拆分成一个个的"样式组件"；
    return(
      <Link to="/">
        <DownloadArea className="clearfix"> {/* ❗️请记得清楚浮动! */}
          <img src="https://qdywxs.github.io/jianshu-images/qr-code.png" alt="" />
          <h3>下载简书手机 APP > </h3>
          <p>随时随地发现和创作内容</p>
          
          <DownloadTip className="tooltip">
            <img src="https://qdywxs.github.io/jianshu-images/qr-code.png" alt="" />
          </DownloadTip>
        </DownloadArea>
      </Link>
    )
  }
}

export default Download;

styled-components------打开 home 目录下的 style.js 件：

javascript 复制代码

import styled from "styled-components";

// ❗️篇幅原因，这里省略之前的代码！

export const DownloadArea = styled.div`
  position: relative;
  padding: 10px 22px;
  margin-top: 10px;
  border: 1px solid #ececec;
  border-radius: 4px;
  
  & > img {
    float: left;
    width: 56px;
    height: 56px;
    
  }

  & > h3 {
    margin-left: 66px;
    font-weight: normal;
    color: #333;
  }

  & > p {
    margin-left: 66px;
    color: #999;
  }

  &:hover > .tooltip {
    display: block;
  }
`;

export const DownloadTip = styled.div`
  position: absolute;
  top: -198px;
  left: calc(50% - 91px);
  width: 182px;
  height: 182px;
  padding: 10px;
  border: 1px solid #ececec;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 5px 2px rgba(0,0,0,0.3);
  
  display: none;

  &:after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 50%;
    margin-left: -8px;
    transform: rotateZ(45deg);
    dispaly: block;
    width: 16px;
    height: 16px;
    background: #fff;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
  }

  & > img {
    width: 100%;
    height: 100%;
  }
`;

返回页面查看效果：

OK，"布局"大致完成后，接下来我们就可以开始实现"交互"功能了。套路和之前写 Header 组件一样，不难。当然，我还会添加一些新的重要知识点，所以还是得动起手来一个个认真攻克！

祝好，qdywxs ♥ you！