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;
字体平滑(可选)
-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 绝对位置。


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);
}
Comments | NOTHING