克隆初始repo：

  1. # react-mini是分支名 #最后的.表示在当前文件夹创建（不新建文件夹）
  2. git clone --single-branch -b react-mini https://github.com/safak/youtube.git .

安装依赖：

  1. yarn
  2. 或
  3. npm install

从google fonts引入urbanist字体：(line8/line12)

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="utf-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1" />
  7.   <meta name="description" content="Web site created using create-react-app" />
  8.   <link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  9.   <style>
  10.     * {
  11.       margin: 0;
  12.       font-family: 'Urbanist', sans-serif;
  13.     }
  14.   </style>
  15.   <title>React App</title>
  16. </head>
  18. <body>
  19.   <noscript>You need to enable JavaScript to run this app.</noscript>
  20.   <div id="root"></div>
  21. </body>
  23. </html>

Navbar

在src下新建pages文件夹，新建Home.jsx

安装vscode插件ES7+ React/Redux/React-Native snippets，输入rafce可快速建立react箭头函数模板。其他常用插件还有auto close tag、git lens

  1. import React from "react";
  3. const Home = () => {
  4.   return <div>Home</div>;
  5. };
  7. export default Home;

在App.jsx中引入

  1. import Home from "./pages/Home";
  3. const App = () => {
  4.   return <Home />;
  5. };
  7. export default App;

在src下新建components文件夹，新建Navbar.jsx，并在Home.jsx中引入。

  1. import React from "react";
  2. import Navbar from "../components/Navbar";
  4. const Home = () => {
  5.   return (
  6.     <div>
  7.       <Navbar />
  8.     </div>
  9.   );
  10. };
  12. export default Home;

安装styled-components

  1. yarn add styled-components

然后使用flex布局使其均匀分布 (line10-11, line14-22)

设置三个容器的flex: 1比设置width: 33.3%要更加精确

  1. import React from "react";
  2. import styled from "styled-components";
  4. const Container = styled.div`
  5.   height: 60px;
  6. `;
  8. const Wrapper = styled.div`
  9.   padding: 10px 20px;
  10.   display: flex;
  11.   justify-content: space-between;
  12. `;
  14. const Left = styled.div`
  15.   flex: 1;
  16. `;
  17. const Center = styled.div`
  18.   flex: 1;
  19. `;
  20. const Right = styled.div`
  21.   flex: 1;
  22. `;
  24. const Navbar = () => {
  25.   return (
  26.     <Container>
  27.       <Wrapper>
  28.         <Left>
  29.           Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus,
  30.           molestiae. Beatae, excepturi esse tempora nesciunt rerum labore vitae
  31.           quo dolor adipisci aperiam eos, ea consectetur odio nisi, repudiandae
  32.           harum perferendis.
  33.         </Left>
  34.         <Center>Center</Center>
  35.         <Right>right</Right>
  36.       </Wrapper>
  37.     </Container>
  38.   );
  39. };
  41. export default Navbar;

image.png

安装material-ui：

  1. yarn add @material-ui/core @material-ui/icons

再布局好其他元素，此时的文档树结构为：

  1. .
  2. ├── README.md
  3. ├── package.json
  4. ├── public
  5. │   └── index.html
  6. ├── src
  7. │   ├── App.jsx
  8. │   ├── components
  9. │   │   └── Navbar.jsx
  10. │   ├── index.js
  11. │   └── pages
  12. │       └── Home.jsx
  13. └── yarn.lock
  1. import { Badge } from "@material-ui/core";
  2. import { Search, ShoppingCartOutlined } from "@material-ui/icons";
  3. import React from "react";
  4. import styled from "styled-components";
  6. const Container = styled.div`
  7. height: 60px;
  8. `;
  10. const Wrapper = styled.div`
  11. padding: 10px 20px;
  12. display: flex;
  13. align-items: center;
  14. justify-content: space-between;
  15. `;
  17. const Left = styled.div`
  18. flex: 1;
  19. display: flex;
  20. align-items: center;
  21. `;
  23. const Language = styled.span`
  24. font-size: 14px;
  25. cursor: pointer;
  26. `;
  28. const SearchContainer = styled.div`
  29. border: 1px solid lightgray;
  30. display: flex;
  31. align-items: center;
  32. margin-left: 25px;
  33. padding: 5px;
  34. `;
  36. const Input = styled.input`
  37. border: none;
  38. `;
  40. const Center = styled.div`
  41. flex: 1;
  42. text-align: center;
  43. `;
  45. const Logo = styled.h1`
  46. font-weight: bold;
  47. `;
  49. const Right = styled.div`
  50. flex: 1;
  51. display: flex;
  52. align-items: center;
  53. justify-content: flex-end;
  54. `;
  56. const MenuItem = styled.div`
  57. font-size: 14px;
  58. cursor: pointer;
  59. margin-left: 25px;
  60. `;
  62. const Navbar = () => {
  63.   return (
  64.     <Container>
  65.       <Wrapper>
  66.         <Left>
  67.           <Language>EN</Language>
  68.           <SearchContainer>
  69.             <Input />
  70.             <Search style={{ color: "gray", fontSize: 16 }} />
  71.           </SearchContainer>
  72.         </Left>
  73.         <Center>
  74.           <Logo>LAMA.</Logo>
  75.         </Center>
  76.         <Right>
  77.           <MenuItem>Register</MenuItem>
  78.           <MenuItem>Sign in</MenuItem>
  79.           <MenuItem>
  80.             <Badge badgeContent={4} color="primary">
  81.               <ShoppingCartOutlined />
  82.             </Badge>
  83.           </MenuItem>
  84.         </Right>
  85.       </Wrapper>
  86.     </Container>
  87.   );
  88. };
  90. export default Navbar;

最后效果：
image.png

Announcement

在components下创建Announcement.jsx并在Home.jsx中引入：

  1. import styled from "styled-components";
  3. const Container = styled.div`
  4.   height: 30px;
  5.   background-color: teal;
  6.   color: white;
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10.   font-size: 14px;
  11.   font-weight: 500;
  12. `;
  14. const Announcement = () => {
  15.   return <Container>Super Deal! Free Shipping on Orders Over $50</Container>;
  16. };
  18. export default Announcement;

最后效果：
image.png

Slider

在components下创建Slider.jsx并在Home.jsx中引入：

  1. import { ArrowLeftOutlined, ArrowRightOutlined } from "@material-ui/icons";
  2. import styled from "styled-components";
  4. const Container = styled.div`
  5.   width: 100%;
  6.   height: 100vh;
  7.   display: flex;
  8.   position: relative;
  9.   overflow: hidden;
  10. `;
  12. const Arrow = styled.div`
  13.   width: 50px;
  14.   height: 50px;
  15.   background-color: #fff7f7;
  16.   border-radius: 50%;
  17.   display: flex;
  18.   align-items: center;
  19.   justify-content: center;
  20.   cursor: pointer;
  21.   opacity: 0.5;
  22.   // 箭头垂直居中：
  23.   position: absolute;
  24.   top: 0;
  25.   bottom: 0;
  26.   margin: auto;
  28.   left: ${(props) => props.direction === "left" && "10px"};
  29.   right: ${(props) => props.direction === "right" && "10px"};
  30.   // 防止Wrapper的transform:translateX()将arrow覆盖
  31.   z-index: 2;
  32. `;
  34. const Wrapper = styled.div`
  35.   height: 100%;
  36.   display: flex;
  37. `;
  39. const Slide = styled.div`
  40.   width: 100vw;
  41.   height: 100vh;
  42.   display: flex;
  43.   align-items: center;
  44.   background-color: ${(props) => props.bg};
  45. `;
  46. const ImgContainer = styled.div`
  47.   height: 100%;
  48.   flex: 1;
  49. `;
  50. const Image = styled.img`
  51.   height: 80%;
  52. `;
  54. const InfoContainer = styled.div`
  55.   flex: 1;
  56.   padding: 50px;
  57. `;
  59. const Title = styled.h1`
  60.   font-size: 70px;
  61. `;
  62. const Desc = styled.p`
  63.   margin: 50px 0px;
  64.   font-size: 20px;
  65.   font-weight: 500;
  66.   letter-spacing: 3px;
  67. `;
  68. const Button = styled.button`
  69.   padding: 10px;
  70.   font-size: 20px;
  71.   background-color: transparent;
  72.   cursor: pointer;
  73. `;
  75. const Slider = () => {
  76.   const handleClick = (direction) => {};
  77.   return (
  78.     <Container>
  79.       {/* 传参数要用箭头函数 */}
  80.       <Arrow direction="left" onClick={() => handleClick("left")}>
  81.         <ArrowLeftOutlined />
  82.       </Arrow>
  83.       <Wrapper>
  84.         <Slide bg="#cde2e9">
  85.           <ImgContainer>
  86.             <Image src="https://static.nike.com.hk/resources/product/DV3317-494/DV3317-494_BL1.png" />
  87.           </ImgContainer>
  88.           <InfoContainer>
  89.             <Title>SUMMER SEAL</Title>
  90.             <Desc>
  91.               DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.
  92.             </Desc>
  93.             <Button>SHOW NOW</Button>
  94.           </InfoContainer>
  95.         </Slide>
  96.         <Slide bg="#8c9cb2">
  97.           <ImgContainer>
  98.             <Image src="https://static.nike.com.hk/resources/product/DH7615-101/DH7615-101_BL1.png" />
  99.           </ImgContainer>
  100.           <InfoContainer>
  101.             <Title>SUMMER SEAL</Title>
  102.             <Desc>
  103.               DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.
  104.             </Desc>
  105.             <Button>SHOW NOW</Button>
  106.           </InfoContainer>
  107.         </Slide>
  108.         <Slide bg="#e1ddaa">
  109.           <ImgContainer>
  110.             <Image src="https://static.nike.com.hk/resources/product/DJ6014-100/DJ6014-100_BL1.png" />
  111.           </ImgContainer>
  112.           <InfoContainer>
  113.             <Title>SUMMER SEAL</Title>
  114.             <Desc>
  115.               DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.
  116.             </Desc>
  117.             <Button>SHOW NOW</Button>
  118.           </InfoContainer>
  119.         </Slide>
  120.       </Wrapper>
  121.       <Arrow direction="right" onClick={() => handleClick("left")}>
  122.         <ArrowRightOutlined />
  123.       </Arrow>
  124.     </Container>
  125.   );
  126. };
  128. export default Slider;

在src下新建data.js：

  1. export const sliderItems = [
  2.   {
  3.     id: 1,
  4.     img: "https://static.nike.com.hk/resources/product/DV3317-494/DV3317-494_BL1.png",
  5.     title: "SUMMER SALE",
  6.     desc: "DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.",
  7.     bg: "#cde2e9",
  8.   },
  9.   {
  10.     id: 2,
  11.     img: "https://static.nike.com.hk/resources/product/DH7615-101/DH7615-101_BL1.png",
  12.     title: "SUMMER SALE",
  13.     desc: "DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.",
  14.     bg: "#8c9cb2",
  15.   },
  16.   {
  17.     id: 3,
  18.     img: "https://static.nike.com.hk/resources/product/DJ6014-100/DJ6014-100_BL1.png",
  19.     title: "SUMMER SALE",
  20.     desc: "DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.",
  21.     bg: "#e1ddaa",
  22.   },
  23. ];

然后替换数据：

  1. ...
  3. const Wrapper = styled.div`
  4.   height: 100%;
  5.   display: flex;
  6.   transition: all 1s ease;
  7.   transform: translateX(${(props) => props.slideIndex * -100}vw);
  8. `;
  10. ...
  12. const Slider = () => {
  13.   const [slideIndex, setSlideIndex] = useState(0);
  14.   const handleClick = (direction) => {
  15.     if (direction === "left") {
  16.       setSlideIndex(slideIndex > 0 ? slideIndex - 1 : 2);
  17.     } else {
  18.       setSlideIndex(slideIndex < 2 ? slideIndex + 1 : 0);
  19.     }
  20.   };
  21.   return (
  22.     <Container>
  23.       {/* 传参数要用箭头函数 */}
  24.       <Arrow direction="left" onClick={() => handleClick("left")}>
  25.         <ArrowLeftOutlined />
  26.       </Arrow>
  27.       <Wrapper slideIndex={slideIndex}>
  28.         {sliderItems.map((item) => (
  29.           <Slide bg={item.bg} key={item.id}>
  30.             <ImgContainer>
  31.               <Image src={item.img} />
  32.             </ImgContainer>
  33.             <InfoContainer>
  34.               <Title>{item.title}</Title>
  35.               <Desc>{item.desc}</Desc>
  36.               <Button>SHOW NOW</Button>
  37.             </InfoContainer>
  38.           </Slide>
  39.         ))}
  40.       </Wrapper>
  41.       <Arrow direction="right" onClick={() => handleClick("right")}>
  42.         <ArrowRightOutlined />
  43.       </Arrow>
  44.     </Container>
  45.   );
  46. };
  48. export default Slider;

完成效果：
Jietu20220423-100620-HD.gif

Category

在data.js中添加Category数据：

  1. ...
  3. export const categories = [
  4.   {
  5.     id: 1,
  6.     img: "https://static.nike.com.hk/resources/product/DV0683-419/DV0683-419_BL1.png",
  7.     title: "T-shirt",
  8.   },
  9.   {
  10.     id: 2,
  11.     img: "https://static.nike.com.hk/resources/product/DQ0231-100/DQ0231-100_BL1.png",
  12.     title: "Shoes",
  13.   },
  14.   {
  15.     id: 3,
  16.     img: "https://static.nike.com.hk/resources/product/DV3193-010/DV3193-010_BL1.png",
  17.     title: "Pants",
  18.   },
  19. ];

在components文件夹下创建Categories.jsx和CategoryItem.jsx，并在Home.jsx引入Categories.jsx：

  1. import styled from "styled-components";
  2. import { categories } from "../data";
  3. import CategoryItem from "./CategoryItem";
  5. const Container = styled.div`
  6.   display: flex;
  7.   padding: 20px;
  8.   justify-content: space-between;
  9. `;
  11. const Categories = () => {
  12.   return (
  13.     <Container>
  14.       {categories.map((item) => (
  15.         <CategoryItem item={item} />
  16.       ))}
  17.     </Container>
  18.   );
  19. };
  21. export default Categories;
  1. import styled from "styled-components";
  3. const Container = styled.div`
  4.   flex: 1;
  5.   margin: 3px;
  6.   /* height: 70vh; */
  7.   position: relative;
  8. `;
  9. const Image = styled.img`
  10.   //不然其父容器Container的flex:1不生效，因为图片会撑大父容器
  11.   width: 100%;
  12.   /* height: 100%;
  13.   object-fit: cover; */
  14. `;
  15. const Info = styled.div`
  16.   position: absolute;
  17.   top: 0;
  18.   left: 0;
  19.   width: 100%;
  20.   height: 100%;
  21.   display: flex;
  22.   flex-direction: column;
  23.   align-items: center;
  24.   justify-content: center;
  25. `;
  26. const Title = styled.h1`
  27.   color: white;
  28.   margin-bottom: 20px;
  29. `;
  30. const Button = styled.button`
  31.   border: none;
  32.   padding: 10px;
  33.   background-color: white;
  34.   color: gray;
  35.   font-weight: 600;
  36.   cursor: pointer;
  37. `;
  39. const CategoryItem = ({ item }) => {
  40.   return (
  41.     <Container>
  42.       <Image src={item.img} />
  43.       <Info>
  44.         <Title>{item.title}</Title>
  45.         <Button>SHOP NOW</Button>
  46.       </Info>
  47.     </Container>
  48.   );
  49. };
  51. export default CategoryItem;

完成效果：
image.png

Products

在data.js中添加products信息：

  1. export const popularProducts = [
  2.   {
  3.     id: 1,
  4.     img: "https://static.nike.com.hk/resources/product/AR5005-549/AR5005-549_BL1.png",
  5.   },
  6.   {
  7.     id: 2,
  8.     img: "https://static.nike.com.hk/resources/product/DV3449-010/DV3449-010_BL1.png",
  9.   },
  10.   {
  11.     id: 3,
  12.     img: "https://static.nike.com.hk/resources/product/DM0013-100/DM0013-100_BL1.png",
  13.   },
  14.   {
  15.     id: 4,
  16.     img: "https://static.nike.com.hk/resources/product/DC3237-100/DC3237-100_BL1.png",
  17.   },
  18.   {
  19.     id: 5,
  20.     img: "https://static.nike.com.hk/resources/product/DH7579-100/DH7579-100_BL1.png",
  21.   },
  22.   {
  23.     id: 6,
  24.     img: "https://static.nike.com.hk/resources/product/DH7161-065/DH7161-065_BL1.png",
  25.   },
  26. ];

在components文件夹下新建Products.jsx和Product.jsx：

  1. import styled from "styled-components";
  2. import { popularProducts } from "../data";
  3. import Product from "./Product";
  5. const Container = styled.div`
  6.   padding: 20px;
  7.   display: flex;
  8.   flex-wrap: wrap;
  9.   justify-content: space-between;
  10. `;
  12. const Products = () => {
  13.   return (
  14.     <Container>
  15.       {popularProducts.map((item) => (
  16.         <Product item={item} key={item.id} />
  17.       ))}
  18.     </Container>
  19.   );
  20. };
  22. export default Products;
  1. import {
  2.   FavoriteBorderOutlined,
  3.   SearchOutlined,
  4.   ShoppingCartOutlined,
  5. } from "@material-ui/icons";
  6. import styled from "styled-components";
  8. const Info = styled.div`
  9.   opacity: 0;
  10.   width: 100%;
  11.   height: 100%;
  12.   position: absolute;
  13.   top: 0;
  14.   left: 0;
  15.   background-color: rgba(0, 0, 0, 0.2);
  16.   z-index: 3;
  17.   display: flex;
  18.   align-items: center;
  19.   justify-content: center;
  20.   transition: all 0.5s ease;
  21.   cursor: pointer;
  22. `;
  24. const Container = styled.div`
  25.   flex: 1;
  26.   margin: 5px;
  27.   min-width: 280px;
  28.   height: 350px;
  29.   display: flex;
  30.   align-items: center;
  31.   justify-content: center;
  32.   background-color: #f5fbfd;
  33.   position: relative;
  35.   &:hover ${Info} {
  36.     opacity: 1;
  37.   }
  38. `;
  40. const Circle = styled.div`
  41.   width: 200px;
  42.   height: 200px;
  43.   border-radius: 50%;
  44.   background-color: white;
  45.   // important!
  46.   position: absolute;
  47. `;
  48. const Image = styled.img`
  49.   height: 75%;
  50.   // 避免被上面的Circle挡住
  51.   z-index: 2;
  52. `;
  54. const Icon = styled.div`
  55.   width: 40px;
  56.   height: 40px;
  57.   border-radius: 50%;
  58.   background-color: white;
  59.   display: flex;
  60.   align-items: center;
  61.   justify-content: center;
  62.   margin: 10px;
  63.   transition: all 0.5s ease;
  65.   &:hover {
  66.     background-color: #e9f5f5;
  67.     transform: scale(1.1);
  68.   }
  69. `;
  71. const Product = ({ item }) => {
  72.   return (
  73.     <Container>
  74.       <Circle />
  75.       <Image src={item.img} />
  76.       <Info>
  77.         <Icon>
  78.           <ShoppingCartOutlined />
  79.         </Icon>
  80.         <Icon>
  81.           <SearchOutlined />
  82.         </Icon>
  83.         <Icon>
  84.           <FavoriteBorderOutlined />
  85.         </Icon>
  86.       </Info>
  87.     </Container>
  88.   );
  89. };
  91. export default Product;

完成效果：

Newsletter

在components文件夹下新建Newsletter.jsx：

  1. import { Send } from "@material-ui/icons";
  2. import styled from "styled-components";
  4. const Container = styled.div`
  5.   height: 60vh;
  6.   background-color: #fcf5f5;
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10.   flex-direction: column;
  11. `;
  12. const Title = styled.h1`
  13.   font-size: 70px;
  14.   margin-bottom: 20px;
  15. `;
  16. const Desc = styled.div`
  17.   font-size: 24px;
  18.   font-weight: 300;
  19.   margin-bottom: 20px;
  20. `;
  21. const InputContainer = styled.div`
  22.   width: 50%;
  23.   height: 40px;
  24.   background-color: white;
  25.   display: flex;
  26.   justify-content: space-between;
  27.   border: 1px solid lightgray;
  28. `;
  29. const Input = styled.input`
  30.   border: none;
  31.   flex: 8;
  32.   padding-left: 20px;
  33. `;
  34. const Button = styled.button`
  35.   flex: 1;
  36.   border: none;
  37.   background-color: teal;
  38.   color: white;
  39. `;
  41. const Newsletter = () => {
  42.   return (
  43.     <Container>
  44.       <Title>Newsletter</Title>
  45.       <Desc>Get timely updates from your favorite products.</Desc>
  46.       <InputContainer>
  47.         <Input placeholder="Your email" />
  48.         <Button>
  49.           <Send />
  50.         </Button>
  51.       </InputContainer>
  52.     </Container>
  53.   );
  54. };
  56. export default Newsletter;

完成效果：
image.png

Footer

在components文件夹下新建Footer.jsx：

  1. import {
  2.   Facebook,
  3.   Instagram,
  4.   MailOutline,
  5.   Phone,
  6.   Pinterest,
  7.   Room,
  8.   Twitter,
  9. } from "@material-ui/icons";
  10. import styled from "styled-components";
  12. const Container = styled.div`
  13.   display: flex;
  14. `;
  16. const Left = styled.div`
  17.   flex: 1;
  18.   display: flex;
  19.   flex-direction: column;
  20.   padding: 20px;
  21. `;
  23. const Logo = styled.h1``;
  24. const Desc = styled.p`
  25.   margin: 20px 0px;
  26. `;
  27. const SocialContainer = styled.div`
  28.   display: flex;
  29. `;
  30. const SocialIcon = styled.div`
  31.   width: 40px;
  32.   height: 40px;
  33.   border-radius: 50%;
  34.   color: white;
  35.   background-color: ${(props) => props.color};
  36.   display: flex;
  37.   align-items: center;
  38.   justify-content: center;
  39.   margin-right: 20px;
  40. `;
  42. const Center = styled.div`
  43.   flex: 1;
  44.   padding: 20px;
  45. `;
  47. const Title = styled.h3`
  48.   margin-bottom: 30px;
  49. `;
  50. const List = styled.ul`
  51.   margin: 0;
  52.   padding: 0;
  53.   list-style: none;
  54.   display: flex;
  55.   flex-wrap: wrap;
  56. `;
  57. const ListItem = styled.li`
  58.   width: 50%;
  59. `;
  61. const Right = styled.div`
  62.   flex: 1;
  63.   padding: 20px;
  64. `;
  66. const ContactItem = styled.div`
  67.   margin-bottom: 20px;
  68.   display: flex;
  69.   align-items: center;
  70. `;
  71. const Payment = styled.img`
  72.   width: 200px;
  73. `;
  75. const Footer = () => {
  76.   return (
  77.     <Container>
  78.       <Left>
  79.         <Logo>LAMA.</Logo>
  80.         <Desc>
  81.           Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste esse
  82.           enim, maiores perspiciatis optio veritatis consectetur adipisci, eaque
  83.           molestias quod, ab debitis at corporis velit odio molestiae? Aliquam,
  84.           molestias exercitationem!
  85.         </Desc>
  86.         <SocialContainer>
  87.           <SocialIcon color="#3b5999">
  88.             <Facebook />
  89.           </SocialIcon>
  90.           <SocialIcon color="#e4405f">
  91.             <Instagram />
  92.           </SocialIcon>
  93.           <SocialIcon color="#55acee">
  94.             <Twitter />
  95.           </SocialIcon>
  96.           <SocialIcon color="#e60023">
  97.             <Pinterest />
  98.           </SocialIcon>
  99.         </SocialContainer>
  100.       </Left>
  101.       <Center>
  102.         <Title>Useful Links</Title>
  103.         <List>
  104.           <ListItem>Home</ListItem>
  105.           <ListItem>Cart</ListItem>
  106.           <ListItem>Man Fashion</ListItem>
  107.           <ListItem>Woman Fashion</ListItem>
  108.           <ListItem>Accessories</ListItem>
  109.           <ListItem>My Account</ListItem>
  110.           <ListItem>Order Tracking</ListItem>
  111.           <ListItem>Wishlist</ListItem>
  112.           <ListItem>Terms</ListItem>
  113.         </List>
  114.       </Center>
  115.       <Right>
  116.         <Title>Contact</Title>
  117.         <ContactItem>
  118.           <Room style={{ marginRight: "10px" }} />
  119.           622 Dixie Path, South Tobinchester 98336
  120.         </ContactItem>
  121.         <ContactItem>
  122.           <Phone style={{ marginRight: "10px" }} />
  123.           +86 123 456 78
  124.         </ContactItem>
  125.         <ContactItem>
  126.           <MailOutline style={{ marginRight: "10px" }} />
  127.           contact@lama.io
  128.         </ContactItem>
  129.         <Payment src="https://th.bing.com/th/id/R.3b4d8519e606ab343119f65f4dbf6c94?rik=ScHdmWbvIvBl2g&pid=ImgRaw&r=0" />
  130.       </Right>
  131.     </Container>
  132.   );
  133. };
  135. export default Footer;

完成效果：
image.png
至此，主页就做完了。此时的目录结构：

  1. .
  2. ├── README.md
  3. ├── package.json
  4. ├── public
  5. │   └── index.html
  6. ├── src
  7. │   ├── App.jsx
  8. │   ├── components
  9. │   │   ├── Announcement.jsx
  10. │   │   ├── Categories.jsx
  11. │   │   ├── CategoryItem.jsx
  12. │   │   ├── Footer.jsx
  13. │   │   ├── Navbar.jsx
  14. │   │   ├── Newsletter.jsx
  15. │   │   ├── Product.jsx
  16. │   │   ├── Products.jsx
  17. │   │   └── Slider.jsx
  18. │   ├── data.js
  19. │   ├── index.js
  20. │   └── pages
  21. │       └── Home.jsx
  22. └── yarn.lock

Product Page

在pages下新建ProductList.jsx和Product.jsx：

  1. import styled from "styled-components";
  2. import Navbar from "../components/Navbar";
  3. import Announcement from "../components/Announcement";
  4. import Products from "../components/Products";
  5. import Newsletter from "../components/Newsletter";
  6. import Footer from "../components/Footer";
  8. const Container = styled.div``;
  10. const Title = styled.h1`
  11.   margin: 20px;
  12. `;
  14. const FilterContainer = styled.div`
  15.   display: flex;
  16.   justify-content: space-between;
  17. `;
  19. const Filter = styled.div`
  20.   margin: 20px;
  21. `;
  23. const FilterText = styled.span`
  24.   font-size: 20px;
  25.   font-weight: 600;
  26.   margin-right: 20px;
  27. `;
  29. const Select = styled.select`
  30.   padding: 10px;
  31.   margin-right: 20px;
  32. `;
  33. const Option = styled.option``;
  35. const ProductList = () => {
  36.   return (
  37.     <Container>
  38.       <Announcement />
  39.       <Navbar />
  40.       <Title>Dresses</Title>
  41.       <FilterContainer>
  42.         <Filter>
  43.           <FilterText>Filter Products:</FilterText>
  44.           <Select>
  45.             <Option disabled selected>
  46.               Color
  47.             </Option>
  48.             <Option>White</Option>
  49.             <Option>Black</Option>
  50.             <Option>Red</Option>
  51.             <Option>Blue</Option>
  52.             <Option>Yellow</Option>
  53.             <Option>Green</Option>
  54.           </Select>
  55.           <Select>
  56.             <Option disabled selected>
  57.               Size
  58.             </Option>
  59.             <Option>XS</Option>
  60.             <Option>S</Option>
  61.             <Option>M</Option>
  62.             <Option>L</Option>
  63.             <Option>XL</Option>
  64.           </Select>
  65.         </Filter>
  66.         <Filter>
  67.           <FilterText>Sort Products:</FilterText>
  68.           <Select>
  69.             <Option selected>Newest</Option>
  70.             <Option>Price (asc)</Option>
  71.             <Option>Price (desc)</Option>
  72.           </Select>
  73.         </Filter>
  74.       </FilterContainer>
  75.       <Products />
  76.       <Newsletter />
  77.       <Footer />
  78.     </Container>
  79.   );
  80. };
  82. export default ProductList;

效果：（在App.jsx中把Home组件换成相应组件进行预览）
image.png

  1. import { Add, Remove } from "@material-ui/icons";
  2. import styled from "styled-components";
  3. import Announcement from "../components/Announcement";
  4. import Footer from "../components/Footer";
  5. import Navbar from "../components/Navbar";
  6. import Newsletter from "../components/Newsletter";
  8. const Container = styled.div``;
  10. const Wrapper = styled.div`
  11.   padding: 50px;
  12.   display: flex;
  13. `;
  15. const ImgContainer = styled.div`
  16.   flex: 1;
  17. `;
  19. const Image = styled.img`
  20.   width: 100%;
  21.   /* height: 90vh;
  22.   object-fit: cover; */
  23. `;
  25. const InfoContainer = styled.div`
  26.   flex: 1;
  27.   padding: 0px 50px;
  28. `;
  30. const Title = styled.h1`
  31.   font-weight: 200;
  32. `;
  34. const Desc = styled.p`
  35.   margin: 20px 0px;
  36. `;
  38. const Price = styled.span`
  39.   font-weight: 100;
  40.   font-size: 40px;
  41. `;
  43. const FilterContainer = styled.div`
  44.   width: 50%;
  45.   margin: 30px 0px;
  46.   display: flex;
  47.   justify-content: space-between;
  48. `;
  50. const Filter = styled.div`
  51.   display: flex;
  52.   align-items: center;
  53. `;
  55. const FilterTitle = styled.span`
  56.   font-size: 20px;
  57.   font-weight: 200;
  58. `;
  60. const FilterColor = styled.div`
  61.   width: 20px;
  62.   height: 20px;
  63.   border-radius: 50%;
  64.   background-color: ${(props) => props.color};
  65.   margin: 0px 5px;
  66.   cursor: pointer;
  67. `;
  69. const FilterSize = styled.select`
  70.   margin-left: 10px;
  71.   padding: 5px;
  72. `;
  74. const FilterSizeOption = styled.option``;
  76. const AddContainer = styled.div`
  77.   width: 50%;
  78.   display: flex;
  79.   align-items: center;
  80.   justify-content: space-between;
  81. `;
  83. const AmountContainer = styled.div`
  84.   display: flex;
  85.   align-items: center;
  86.   font-weight: 700;
  87. `;
  89. const Amount = styled.span`
  90.   width: 30px;
  91.   height: 30px;
  92.   border-radius: 10px;
  93.   border: 1px solid teal;
  94.   display: flex;
  95.   align-items: center;
  96.   justify-content: center;
  97.   margin: 0px 5px;
  98. `;
  100. const Button = styled.button`
  101.   padding: 15px;
  102.   border: 2px solid teal;
  103.   background-color: white;
  104.   cursor: pointer;
  105.   font-weight: 500;
  106.   &:hover {
  107.     background-color: #f8f4f4;
  108.   }
  109. `;
  111. const Product = () => {
  112.   return (
  113.     <Container>
  114.       <Announcement />
  115.       <Navbar />
  116.       <Wrapper>
  117.         <ImgContainer>
  118.           <Image src="https://static.nike.com.hk/resources/product/DH7133-013/DH7133-013_BL1.png" />
  119.         </ImgContainer>
  120.         <InfoContainer>
  121.           <Title>Denim Jumpsuit</Title>
  122.           <Desc>
  123.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
  124.             venenatis, dolor in finibus malesuada, lectus ipsum porta nunc, at
  125.             iaculis arcu nisi sed mauris. Nulla fermentum vestibulum ex, eget
  126.             tristique tortor pretium ut. Curabitur elit justo, consequat id
  127.             condimentum ac, volutpat ornare.
  128.           </Desc>
  129.           <Price>$ 20</Price>
  130.           <FilterContainer>
  131.             <Filter>
  132.               <FilterTitle>Color</FilterTitle>
  133.               <FilterColor color="black" />
  134.               <FilterColor color="darkblue" />
  135.               <FilterColor color="gray" />
  136.             </Filter>
  137.             <Filter>
  138.               <FilterTitle>Size</FilterTitle>
  139.               <FilterSize>
  140.                 <FilterSizeOption>XS</FilterSizeOption>
  141.                 <FilterSizeOption>S</FilterSizeOption>
  142.                 <FilterSizeOption>M</FilterSizeOption>
  143.                 <FilterSizeOption>L</FilterSizeOption>
  144.                 <FilterSizeOption>XL</FilterSizeOption>
  145.               </FilterSize>
  146.             </Filter>
  147.           </FilterContainer>
  148.           <AddContainer>
  149.             <AmountContainer>
  150.               <Remove />
  151.               <Amount>1</Amount>
  152.               <Add />
  153.             </AmountContainer>
  154.             <Button>ADD TO CART</Button>
  155.           </AddContainer>
  156.         </InfoContainer>
  157.       </Wrapper>
  158.       <Newsletter />
  159.       <Footer />
  160.     </Container>
  161.   );
  162. };
  164. export default Product;

效果：
image.png

Register and Login page

在pages文件夹下新建Register.jsx和Login.jsx：

  1. import styled from "styled-components";
  3. const Container = styled.div`
  4.   width: 100vw;
  5.   height: 100vh;
  6.   background: linear-gradient(
  7.       rgba(255, 255, 255, 0.5),
  8.       rgba(255, 255, 255, 0.5)
  9.     ),
  10.     url("https://static.nike.com.hk/resources/template/kvFullNewModule1/20200722195508.jpg")
  11.       center;
  12.   background-size: cover;
  13.   display: flex;
  14.   align-items: center;
  15.   justify-content: center;
  16. `;
  18. const Wrapper = styled.div`
  19.   width: 40%;
  20.   padding: 20px;
  21.   background-color: white;
  22. `;
  24. const Title = styled.h1`
  25.   font-size: 24px;
  26.   font-weight: 300;
  27. `;
  29. const Form = styled.form`
  30.   display: flex;
  31.   flex-wrap: wrap;
  32. `;
  34. const Input = styled.input`
  35.   flex: 1;
  36.   min-width: 40%;
  37.   margin: 20px 10px 0px 0px;
  38.   padding: 10px;
  39. `;
  41. const Agreement = styled.span`
  42.   font-size: 12px;
  43.   margin: 20px 0px;
  44. `;
  46. const Button = styled.button`
  47.   width: 40%;
  48.   border: none;
  49.   padding: 15px 20px;
  50.   background-color: teal;
  51.   color: white;
  52.   cursor: pointer;
  53. `;
  55. const Register = () => {
  56.   return (
  57.     <Container>
  58.       <Wrapper>
  59.         <Title>CREATE AN ACCOUNT</Title>
  60.         <Form>
  61.           <Input placeholder="name" />
  62.           <Input placeholder="last name" />
  63.           <Input placeholder="username" />
  64.           <Input placeholder="email" />
  65.           <Input placeholder="password" />
  66.           <Input placeholder="confirm password" />
  67.           <Agreement>
  68.             By creating an account, I consent to the processing of my personal
  69.             data in accordance with the <b>PRIVACY POLICY</b>
  70.           </Agreement>
  71.           <Button>CREATE</Button>
  72.         </Form>
  73.       </Wrapper>
  74.     </Container>
  75.   );
  76. };
  78. export default Register;

效果：
image.png

  1. import styled from "styled-components";
  3. const Container = styled.div`
  4.   width: 100vw;
  5.   height: 100vh;
  6.   background: linear-gradient(
  7.       rgba(255, 255, 255, 0.5),
  8.       rgba(255, 255, 255, 0.5)
  9.     ),
  10.     url("https://static.nike.com.hk/resources/template/kvFullNewModule1/20200722195508.jpg")
  11.       center;
  12.   background-size: cover;
  13.   display: flex;
  14.   align-items: center;
  15.   justify-content: center;
  16. `;
  18. const Wrapper = styled.div`
  19.   width: 25%;
  20.   padding: 20px;
  21.   background-color: white;
  22. `;
  24. const Title = styled.h1`
  25.   font-size: 24px;
  26.   font-weight: 300;
  27. `;
  29. const Form = styled.form`
  30.   display: flex;
  31.   flex-direction: column;
  32. `;
  34. const Input = styled.input`
  35.   flex: 1;
  36.   min-width: 40%;
  37.   margin: 10px 0;
  38.   padding: 10px;
  39. `;
  41. const Button = styled.button`
  42.   width: 40%;
  43.   border: none;
  44.   padding: 15px 20px;
  45.   background-color: teal;
  46.   color: white;
  47.   cursor: pointer;
  48.   margin-bottom: 10px;
  49. `;
  51. const Link = styled.a`
  52.   margin: 5px 0px;
  53.   font-size: 12px;
  54.   text-decoration: underline;
  55.   cursor: pointer;
  56. `;
  58. const Login = () => {
  59.   return (
  60.     <Container>
  61.       <Wrapper>
  62.         <Title>SIGN IN</Title>
  63.         <Form>
  64.           <Input placeholder="username" />
  65.           <Input placeholder="password" />
  66.           <Button>LOGIN</Button>
  67.           <Link>DO NOT YOU REMEMBER THE PASSWORD?</Link>
  68.           <Link>CREATE A NEW ACCOUNT</Link>
  69.         </Form>
  70.       </Wrapper>
  71.     </Container>
  72.   );
  73. };
  75. export default Login;

效果：
image.png

Cart

在pages文件夹下新建Cart.jsx：

  1. import { Add, Remove } from "@material-ui/icons";
  2. import styled from "styled-components";
  3. import Announcement from "../components/Announcement";
  4. import Footer from "../components/Footer";
  5. import Navbar from "../components/Navbar";
  7. const Container = styled.div``;
  9. const Wrapper = styled.div`
  10.   padding: 20px;
  11. `;
  13. const Title = styled.h1`
  14.   font-weight: 300;
  15.   text-align: center;
  16. `;
  18. const Top = styled.div`
  19.   display: flex;
  20.   align-items: center;
  21.   justify-content: space-between;
  22.   padding: 20px;
  23. `;
  25. const TopButton = styled.button`
  26.   padding: 10px;
  27.   font-weight: 600;
  28.   cursor: pointer;
  29.   border: ${(props) => props.type === "filled" && "none"};
  30.   background-color: ${(props) =>
  31.     props.type === "filled" ? "black" : "transparent"};
  32.   color: ${(props) => props.type === "filled" && "white"};
  33. `;
  35. const TopTexts = styled.div``;
  36. const TopText = styled.span`
  37.   text-decoration: underline;
  38.   cursor: pointer;
  39.   margin: 0px 10px;
  40. `;
  42. const Bottom = styled.div`
  43.   display: flex;
  44.   justify-content: space-between;
  45. `;
  47. const Info = styled.div`
  48.   flex: 3;
  49. `;
  51. const Product = styled.div`
  52.   display: flex;
  53.   justify-content: space-between;
  54. `;
  56. const ProductDetail = styled.div`
  57.   flex: 2;
  58.   display: flex;
  59. `;
  61. const Image = styled.img`
  62.   width: 200px;
  63. `;
  65. const Details = styled.div`
  66.   padding: 20px;
  67.   display: flex;
  68.   flex-direction: column;
  69.   justify-content: space-around;
  70. `;
  72. const ProductName = styled.span``;
  74. const ProductId = styled.span``;
  76. const ProductColor = styled.div`
  77.   width: 20px;
  78.   height: 20px;
  79.   border-radius: 50%;
  80.   background-color: ${(props) => props.color};
  81. `;
  83. const ProductSize = styled.span``;
  85. const PriceDetail = styled.div`
  86.   flex: 1;
  87.   display: flex;
  88.   flex-direction: column;
  89.   align-items: center;
  90.   justify-content: center;
  91. `;
  93. const ProductAmountContainer = styled.div`
  94.   display: flex;
  95.   align-items: center;
  96.   margin-bottom: 20px;
  97. `;
  99. const ProductAmount = styled.div`
  100.   font-size: 24px;
  101.   margin: 5px;
  102. `;
  104. const ProductPrice = styled.div`
  105.   font-size: 30px;
  106.   font-weight: 200;
  107. `;
  109. const Hr = styled.hr`
  110.   background-color: #eee;
  111.   border: none;
  112.   height: 1px;
  113. `;
  115. const Summary = styled.div`
  116.   flex: 1;
  117.   border: 0.5px solid lightgray;
  118.   border-radius: 10px;
  119.   padding: 20px;
  120.   height: 50vh;
  121. `;
  123. const SummaryTitle = styled.h1`
  124.   font-weight: 200;
  125. `;
  127. const SummaryItem = styled.div`
  128.   margin: 30px 0px;
  129.   display: flex;
  130.   justify-content: space-between;
  131.   font-weight: ${(props) => props.type === "total" && "500"};
  132.   font-size: ${(props) => props.type === "total" && "24px"};
  133. `;
  135. const SummaryItemText = styled.span``;
  137. const SummaryItemPrice = styled.span``;
  139. const Button = styled.button`
  140.   width: 100%;
  141.   padding: 10px;
  142.   background-color: black;
  143.   color: white;
  144.   font-weight: 600;
  145. `;
  147. const Cart = () => {
  148.   return (
  149.     <Container>
  150.       <Navbar />
  151.       <Announcement />
  152.       <Wrapper>
  153.         <Title>YOUR BAG</Title>
  154.         <Top>
  155.           <TopButton>CONTINUE SHOPPING</TopButton>
  156.           <TopTexts>
  157.             <TopText>Shopping Bag(2)</TopText>
  158.             <TopText>Your Wishlist (0)</TopText>
  159.           </TopTexts>
  160.           <TopButton type="filled">CHECKOUT NOW</TopButton>
  161.         </Top>
  162.         <Bottom>
  163.           <Info>
  164.             <Product>
  165.               <ProductDetail>
  166.                 <Image src="https://hips.hearstapps.com/vader-prod.s3.amazonaws.com/1614188818-TD1MTHU_SHOE_ANGLE_GLOBAL_MENS_TREE_DASHERS_THUNDER_b01b1013-cd8d-48e7-bed9-52db26515dc4.png?crop=1xw:1.00xh;center,top&resize=480%3A%2A" />
  167.                 <Details>
  168.                   <ProductName>
  169.                     <b>Product:</b> JESSIE THUNDER SHOES
  170.                   </ProductName>
  171.                   <ProductId>
  172.                     <b>ID:</b> 93813718293
  173.                   </ProductId>
  174.                   <ProductColor color="black" />
  175.                   <ProductSize>
  176.                     <b>Size:</b> 37.5
  177.                   </ProductSize>
  178.                 </Details>
  179.               </ProductDetail>
  180.               <PriceDetail>
  181.                 <ProductAmountContainer>
  182.                   <Add />
  183.                   <ProductAmount>2</ProductAmount>
  184.                   <Remove />
  185.                 </ProductAmountContainer>
  186.                 <ProductPrice>$ 30</ProductPrice>
  187.               </PriceDetail>
  188.             </Product>
  189.             <Hr />
  190.             <Product>
  191.               <ProductDetail>
  192.                 <Image src="https://i.pinimg.com/originals/2d/af/f8/2daff8e0823e51dd752704a47d5b795c.png" />
  193.                 <Details>
  194.                   <ProductName>
  195.                     <b>Product:</b> HAKURA T-SHIRT
  196.                   </ProductName>
  197.                   <ProductId>
  198.                     <b>ID:</b> 93813718293
  199.                   </ProductId>
  200.                   <ProductColor color="gray" />
  201.                   <ProductSize>
  202.                     <b>Size:</b> M
  203.                   </ProductSize>
  204.                 </Details>
  205.               </ProductDetail>
  206.               <PriceDetail>
  207.                 <ProductAmountContainer>
  208.                   <Add />
  209.                   <ProductAmount>1</ProductAmount>
  210.                   <Remove />
  211.                 </ProductAmountContainer>
  212.                 <ProductPrice>$ 20</ProductPrice>
  213.               </PriceDetail>
  214.             </Product>
  215.           </Info>
  216.           <Summary>
  217.             <SummaryTitle>ORDER SUMMARY</SummaryTitle>
  218.             <SummaryItem>
  219.               <SummaryItemText>Subtotal</SummaryItemText>
  220.               <SummaryItemPrice>$ 80</SummaryItemPrice>
  221.             </SummaryItem>
  222.             <SummaryItem>
  223.               <SummaryItemText>Estimated Shipping</SummaryItemText>
  224.               <SummaryItemPrice>$ 5.90</SummaryItemPrice>
  225.             </SummaryItem>
  226.             <SummaryItem>
  227.               <SummaryItemText>Shipping Discount</SummaryItemText>
  228.               <SummaryItemPrice>$ -5.90</SummaryItemPrice>
  229.             </SummaryItem>
  230.             <SummaryItem type="total">
  231.               <SummaryItemText>Total</SummaryItemText>
  232.               <SummaryItemPrice>$ 80</SummaryItemPrice>
  233.             </SummaryItem>
  234.             <Button>CHECKOUT NOW</Button>
  235.           </Summary>
  236.         </Bottom>
  237.       </Wrapper>
  238.       <Footer />
  239.     </Container>
  240.   );
  241. };
  243. export default Cart;

效果：
image.png

移动端适配

src文件夹下新建responsive.js：

  1. import { css } from "styled-components";
  3. export const mobile = (props) => {
  4.   return css`
  5.     @media only screen and (max-width: 380px) {
  6.       ${props}
  7.     }
  8.   `;
  9. };
  11. // export const tablet = (props) =>{
  12. //     return css`
  13. //         @media only screen and (max-width: 380px) {
  14. //             ${props}
  15. //         }
  16. //     `
  17. // }

然后对各个页面进行适配

  1. ...
  2. import { mobile } from "../responsive";
  4. ...
  5. const Product = styled.div`
  6.   display: flex;
  7.   justify-content: space-between;
  8.   ${mobile({ flexDirection: "column" })}
  9. `;
  10. ...

至此，所有页面就都完成了。此时的目录结构：

  1. .
  2. ├── README.md
  3. ├── package.json
  4. ├── public
  5. │   └── index.html
  6. ├── src
  7. │   ├── App.jsx
  8. │   ├── components
  9. │   │   ├── Announcement.jsx
  10. │   │   ├── Categories.jsx
  11. │   │   ├── CategoryItem.jsx
  12. │   │   ├── Footer.jsx
  13. │   │   ├── Navbar.jsx
  14. │   │   ├── Newsletter.jsx
  15. │   │   ├── Product.jsx
  16. │   │   ├── Products.jsx
  17. │   │   └── Slider.jsx
  18. │   ├── data.js
  19. │   ├── index.js
  20. │   ├── pages
  21. │   │   ├── Cart.jsx
  22. │   │   ├── Home.jsx
  23. │   │   ├── Login.jsx
  24. │   │   ├── Product.jsx
  25. │   │   ├── ProductList.jsx
  26. │   │   └── Register.jsx
  27. │   └── responsive.js
  28. └── yarn.lock