//Fly The Best

0%

React Hooks框架步骤

Posted on Edited on

  1. 检查在vscode中是否必要的插件，如Prettier （格式化工具）、Styled-components（针对Styled-components库的一个语法自动补全插件）

  2. vscode shortcut

    • Control `: toggle terminal.
    • Cmd Shift P: go to Command Palette to run commands.
    • Cmd P: open file in project.
    • Cmd B: toggle left Side Bar.

  3. gatsby是一个运行于react之上的框架，可以安装预制模板和插件。

    1
    npm install -g gatsby-cli

  4. 初始化项目

    1
    2
    gatsby new designcodeweb https://github.com/mengto/gatsby-starter-designcode
    gatsby develop

  5. 在gatsby.config文件中设置标题

  6. 修改component中的layout.css文件中的样式

  7. Styled-components 是一个react的一个样式库，可以和原生库一样在组件中添加样式。

    1
    npm i styled-components

    使用方法：

    1
    import styled from 'styled-components'

  8. 为了解决css正在加载时出现的空白页面

    1
    npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components

    可以然后在gatsby.components文件中添加

    1
    `gatsby-plugin-styled-components`,

  9. 创建TextStyles.js文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    import styled from "styled-components"

    export const H1 = styled.h1`
      font-weight: bold;
      font-size: 60px;
    `

    export const H2 = styled.h2`
      font-weight: bold;
      font-size: 40px;
    `

    export const H3 = styled.h3`
      font-weight: bold;
      font-size: 30px;
    `

    export const BodyIntro = styled.p`
      font-weight: 500;
      font-size: 24px;
      line-height: 140%;
    `

    export const BodyMain = styled.p`
      font-weight: normal;
      font-size: 20px;
      line-height: 140%;
    `

    export const MediumText = styled.p`
      font-weight: normal;
      font-size: 17px;
      line-height: 130%;
    `

    export const Caption = styled.p`
      font-weight: 500;
      font-size: 15px;
      line-height: 18px;
    `

    export const Caption2 = styled.p`
      font-weight: 600;
      font-size: 15px;
      line-height: 18px;
      text-transform: uppercase;
    `

    export const SmallText = styled.p`
      font-weight: normal;
      font-size: 13px;
      line-height: 130%;
    `

    export const SmallText2 = styled.p`
      font-weight: 600;
      font-size: 13px;
      line-height: 130%;
      text-transform: uppercase;
    `

  10. 创建ColorStyles.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    export const themes = {
      light: {
        text1: `black`,
        text2: `rgba(0,0,0,0.7)`,
        primary: `#3913B8`,
        secondary: "#2FB5FC",
        backgroundColor: `#f2f6ff`,
        card: {
          backgroundColor: `rgba(255, 255, 255, 0.6)`,
          boxShadow: `0px 50px 100px rgba(34, 79, 169, 0.3),
          inset 0 0 0 0.5px rgba(255, 255, 255, 0.6)`,
          backgroundColorFull: `rgba(255, 255, 255, 1)`,
        },
        cardHover: {
          backgroundColor: `rgba(68, 66, 178, 0.1)`,
          boxShadow: `inset 0px 0px 0px 0.5px rgba(68, 66, 178, 0.2)`,
        },
        pricingCard: {
          backgroundColor: `rgba(255, 255, 255, 0.3)`,
        },
        status: {
          backgroundColor: "rgba(68, 66, 178, 0.1)",
        },
        modal: {
          backgroundColor: `rgba(255, 255, 255, 0.6)`,
          boxShadow: `0px 50px 100px rgba(34, 79, 169, 0.3),
          inset 0 0 0 0.5px rgba(255, 255, 255, 0.6)`,
          backgroundColorFull: `rgba(255, 255, 255, 1)`,
        },
      },
      dark: {
        text1: `white`,
        text2: `rgba(255,255,255,0.7)`,
        backgroundColor: `#1F1F47`,
        card: {
          backgroundColor: `rgba(25, 24, 63, 0.98)`,
          boxShadow: `0px 30px 60px rgba(0, 0, 0, 0.25),
          inset 0 0 0 0.5px rgba(255, 255, 255, 0.2)`,
          backgroundColorFull: `rgba(15, 14, 71, 1)`,
        },
        cardHover: {
          backgroundColor: `rgba(255, 255, 255, 0.1)`,
          boxShadow: `inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.2)`,
        },
        pricingCard: {
          backgroundColor: `rgba(31, 31, 71, 0.6)`,
        },
        status: {
          backgroundColor: "rgba(0, 0, 0, 0.2)",
        },
        modal: {
          backgroundColor: `rgba(50, 61, 109, 0.5)`,
          boxShadow: `0px 50px 100px rgba(0, 0, 0, 0.25),
          inset 0 0 0 0.5px rgba(255, 255, 255, 0.3)`,
          backgroundColorFull: `rgba(15, 14, 71, 1)`,
        },
      },
    }

  11. 修改GlobalStyles.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import { createGlobalStyle } from "styled-components"
    import { themes } from "./ColorStyles"

    export const GlobalStyle = createGlobalStyle`
        body{
            background:${themes.light.backgroundColor};
            
            @media (prefers-color-scheme: dark) {
    	        background: ${themes.dark.backgroundColor};
            }
        } 
    `