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 HeroSectionStyled 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