https://designcode.io/build-a-web-app-with-react-hooks

Design+Code
  • React Hook
  • Gatsby
  • Styled Components
  • Figma
  • PHP storm

使用 React Hook + Gatsby 框架开发。

Styled Components:

// 使用 Styled Components
<Wrapper>Content</Wrapper>

const Wrapper = styled.div`
	display: grid;
`

const Wave = styled.img`
  position: absolute;
  z-index: -1;

  @media (min-width: 1440px) {
    width: 100%;
  }
`
// 重用 Wave CSS
const BottomWave = styled(Wave)`
    @media (prefers-color-scheme: dark) {
      // TODO: DARK
      content: url("/images/waves/hero-wave3.svg");
    }
`

// 不使用 Styled Components
<div className="long-class-name">Content</div>

// Another CSS file
.long-class-name {
	display: grid;
}

利于重用 CSS。

Figma

Figma 是一个基于浏览器的协作式 UI 设计工具。

Gatsby

Gatsby是一个基于React构建的框架,具有页面,模板,搜索引擎优化等基本功能。可以将其视为React的Wordpress,如果愿意,可以轻松地选择预制的模板和插件。它具有适用于Contentful和Netlify的有用插件。

Design+Code

Gatsby 网站结构

components:放置可以重复使用的元素,例如按钮、布局、样式、片段(Sections)。

pages:每个文件为一个新的页面。

static:防止静态文件,如 /static/images

gatsby-config.js:Gatsby 网站配置文件,你可以在这配置网站标题、描述、插件等。


重置 CSS

为了使得所有浏览器以相同的 CSS 为准,建议重置 CSS:

https://necolas.github.io/normalize.css/

https://meyerweb.com/eric/tools/css/reset/

字体

默认设置字体大小为 16px

font-size: 16px;

自定义字体

在 CSS 文件顶部导入:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

然后使用:

font-family: 'Open Sans', sans-serif;

字体平滑(可选)

More Info

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

使用 Section

Section 切割页面,以便于重用。

import React from "react"

function HeroSection() {
  return <></>
}

export default HeroSection

Styled Components

样式化组件可以帮你更简单的添加自定义组件,更简单的 CSS 复用。

<Wrapper>
  <ContentWrapper>
    <TextWrapper>
      /* Text */
    </TextWrapper>
		/* Image */
  </ContentWrapper>
</Wrapper>

在添加完成组建后,进行组件定义:

const Wrapper = styled.div`
// css
`

CSS 网格

https://www.w3schools.com/css/css_grid.asp

justify-items 与 align-items:https://blog.csdn.net/u013565133/article/details/102919041

justify-content 与 align-content:

https://blog.csdn.net/u013565133/article/details/102930246

可以使用 CSS 网格来帮助我们进行屏幕自适应与元素排列。

// ...
display: grid;
gap: 30px;
// ...

display: grid :让这个组件用网格形式排列子组件。

gap: 30px:让子组件直接间距为 30 像素。

字体样式

通常我们在一个文件中订阅整个web的全局字体样式,例如:

// ...
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;
`
// ...

之所以这样做是为了让字体样式进行复用,其次可以让这个web字体样式更为统一。

使用字体样式:

import { H1, MediumText } from "../styles/TextStyles"

const Title = styled(H1)`
  color: white;
`

const Description = styled(H1)``

颜色样式

我们通常在web中使用一种主题,其中包含了亮色模式与暗色模式,这时候可以在一个文件中定义web全局主题:

export const themes = {
  light: {
    text1: "black",
    text2: "rgba(0,0,0,0.7)",
    backgroundColor: "#f2f6ff"
  },
  dark: {
    text1: "white",
    text2: "rgba(255,255,255,0.7)",
    backgroundColor: "#1F1F47",
	}
}

使用颜色样式:

color: ${themes.dark.text1}

全局样式

虽然在此之前定义了字体样式与颜色样式,但是他们无法自动运用到整个web中,这时候我们可以使用 Styled Components 中的 createGlobalStyle:

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};
    }
  }
`

这样web默认为 light 模式下,body 背景颜色为 themes.light.backgroundColor ,当用户切换为 dark 模式下,body 背景颜色为 themes.dark.backgroundColor

之后,可以把 GlobalStyle 放置在页面中:

function Layout({children}) {
    return (
        <>
            <GlobalStyle/>
            <Header/>
            <main>{children}</main>
        </>
    )
}

export default Layout

Component Props

props 用于在各个组件中传递数据:

export default function Buexport default function PurchaseButton(props) {
  return (
    </Wrapper>
        <Title>{props.title}</Title>
        <Subtitle>{props.subtitle}</Subtitle>
    </Wrapper>
  )
}

// ...

我们还可以设置默认 props,以防止组件没有收到 props

// ...
<Title>{props.title || "..."}</Title>
<Subtitle>{props.subtitle || "..."}</Subtitle>
// ...

解析道具

const { title, subtitle } = props

<Title>{title || "..."}</Title>
<Subtitle>{subtitle || "..."}</Subtitle>

Link

link 组件以便于实现 url 跳转。

<Link to="/page-2">
	<Button />
</Link>

Position

使用 CSS position 属性设置组件位置:

position: relative;
// position: absolute;

relative 相对位置,absolute 绝对位置。

absolute
relative

Select Styled Component

${Wrapper}:hover & {
  transform: rotate(30deg) scale(1.2) translate(1px, 1px);
}

当悬停在 Wrapper 上时,同时运用当前的 hover

*,&

选择子组件:

* {

}

选择子组件与自身

& {

}

Class Name

使用 .className 应用 CSS 样式 :

<Icon src="/images/icons/credit.svg" className="icon" />

.icon {
  transform: scale(1.2);
}

Filter

CSS 滤镜

${Wrapper}:hover & {
  filter: hue-rotate(10deg);
}


Android 开发者、影视后期内容(包装)制作者、Unity 2D游戏开发者