文章目录
相对原教程，我在学习开始时（2023.03）采用的是当前最新版本：
| 项 | 版本 |
|---|---|
| react & react–dom | ^18.2.0 |
| react–router & react–router–dom | ^6.11.2 |
| antd | ^4.24.8 |
| @commitlint/cli & @commitlint/config–conventional | ^17.4.4 |
| eslint–config–prettier | ^8.6.0 |
| husky | ^8.0.3 |
| lint–staged | ^13.1.2 |
| prettier | 2.8.4 |
| json–server | 0.17.2 |
| craco–less | ^2.0.0 |
| @craco/craco | ^7.1.0 |
| qs | ^6.11.0 |
| dayjs | ^1.11.7 |
| react-helmet | ^6.1.0 |
| @types/react-helmet | ^6.1.6 |
| react-query | ^6.1.0 |
| @welldone-software/why–did–you-render | ^7.0.1 |
| @emotion/react & @emotion/styled | ^11.10.6 |
一、项目起航：项目初始化与配置
二、React 与 Hook 应用：实现项目列表
三、TS 应用：JS神助攻 – 强类型
四、JWT、用户认证与异步请求
1~5
6~10
五、CSS 其实很简单 – 用 CSS-in-JS 添加样式
1.安装与使用 antd 组件库
安装 antd
# npm i antd
# yarn add antd
npm i antd --force
import { loadDevTools } from "jira-dev-tool";
import 'antd/dist/antd.less'
安装 craco
为对 create-react-app 进行自定义配置，需要安装 craco 和它的子依赖 craco-less:
# npm i @craco/craco
# yarn add @craco/craco
npm i @craco/craco --force
npm i -D craco-less --force
https://4x.ant.design/docs/react/use-with-create-react-app-cn#高级配置
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
项目根目录下新建文件 craco.config.js，复制文档中对应部分代码，并配置需要修改的主题变量：
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': 'rgb(0, 82, 204)', '@font-size-base': '16px' },
javascriptEnabled: true,
},
},
},
},
],
};
antd 组件替换原生组件
import { useAuth } from "context/auth-context";
import { Form, Button, Input } from "antd"
export const Login = () => {
const { login, user } = useAuth();
const handleSubmit = (values: { username: string, password: string }) => {
login(values);
};
return (
<Form onFinish={handleSubmit}>
<Form.Item name='username' rules={[{ required: true, message: '请输入用户名' }]}>
<Input placeholder="用户名" type="text" id="username" />
</Form.Item>
<Form.Item name='password' rules={[{ required: true, message: '请输入密码' }]}>
<Input placeholder="密码" type="password" id="password" />
</Form.Item>
<Form.Item>
<Button htmlType="submit" type="primary">登录</Button>
</Form.Item>
</Form>
);
};
import { useAuth } from "context/auth-context";
import { Form, Button, Input } from "antd"
export const Register = () => {
const { register, user } = useAuth();
const handleSubmit = (values: { username: string, password: string }) => {
register(values);
};
return (
<Form onFinish={handleSubmit}>
<Form.Item name='username' rules={[{ required: true, message: '请输入用户名' }]}>
<Input placeholder="用户名" type="text" id="username" />
</Form.Item>
<Form.Item name='password' rules={[{ required: true, message: '请输入密码' }]}>
<Input placeholder="密码" type="password" id="password" />
</Form.Item>
<Form.Item>
<Button htmlType="submit" type="primary">注册</Button>
</Form.Item>
</Form>
);
};
import { useState } from "react";
import { Login } from "./login";
import { Register } from "./register";
import { Card, Button } from 'antd';
export const UnauthenticatedApp = () => {
const [isRegister, setIsRegister] = useState(false);
return (<Card style={{ display: 'flex', justifyContent: 'center' }}>
{isRegister ? <Register /> : <Login />}
<Button type='primary' onClick={() => setIsRegister(!isRegister)}>
切换到{isRegister ? "登录" : "注册"}
</Button>
</Card>
);
};
现在较之前页面好看多了
import { Table } from "antd";
import { User } from "./SearchPanel";
...
export const List = ({ users, list }: ListProps) => {
return <Table pagination={false} columns={[{
title: '名称',
dataIndex: 'name',
sorter: (a, b) => a.name.localeCompare(b.name)
}, {
title: '负责人',
render: (text, project) => <span>{users.find((user) => user.id === project.personId)?.name || "未知"}</span>
}]} dataSource={list}></Table>
};
在引入
antd的Table后，先不给columns属性赋值，而是先赋值dataSource，然后将鼠标放于columns上，这时便可见：
(property) TableProps<Project>.columns?: ColumnsType<Project> | undefined
TS的类型推断起作用了：
- 修改
srcscreensProjectListcomponentsSearchPanel.tsx
import { Form, Input, Select } from "antd";
...
export const SearchPanel = ({ users, param, setParam }: SearchPanelProps) => {
return (
<Form>
<Input
type="text"
value={param.name}
onChange={(evt) =>
setParam({
...param,
name: evt.target.value,
})
}
/>
<Select
value={param.personId}
onChange={value =>
setParam({
...param,
personId: value,
})
}
>
<Select.Option value="">负责人</Select.Option>
{users.map((user) => (
<Select.Option key={user.id} value={user.id}>
{user.name}
</Select.Option>
))}
</Select>
</Form>
);
};
2.CSS-in-JS
以下部分是课件原文：
CSS-in-JS 不是指某一个具体的库，是指组织CSS代码的一种方式，代表库有 styled–component 和 emotion
(1)传统CSS的缺陷
①缺乏模块组织
传统的JS和CSS都没有模块的概念，后来在JS界陆续有了 CommonJS 和 ECMAScript Module，CSS-in-JS可以用模块化的方式组织CSS，依托于JS的模块化方案，比如：
// button1.ts import styled from '@emotion/styled' export const Button = styled.button` color: turquoise; `// button2.ts import styled from '@emotion/styled' export const Button = styled.button` font-size: 16px; `②缺乏作用域
传统的CSS只有一个全局作用域，比如说一个class可以匹配全局的任意元素。随着项目成长，CSS会变得越来越难以组织，最终导致失控。CSS-in-JS可以通过生成独特的选择符，来实现作用域的效果
const css = styleBlock => { const className = someHash(styleBlock); const styleEl = document.createElement('style'); styleEl.textContent = ` .${className} { ${styleBlock} } `; document.head.appendChild(styleEl); return className; }; const className = css(` color: red; padding: 20px; `); // 'c23j4'③隐式依赖，让样式难以追踪
比如这个CSS样式：
.target .name h1 { color: red } body #container h1 { color: green }<!doctype html> <html lang="en"> <body> <div id='container'> <div class='target'> <div class='name'> <h1>我是啥颜色？</h1> </div> </div> </div> </body> </html>那么这个h1元素最终显式为什么颜色？加入你想要追踪这个影响这个h1的样式，怎么追踪？
而CSS-in-JS的方案就简单直接、易于追踪export const Title = styled.h1` color: green; ` <Title> 我是啥颜色？ </Title>④没有变量
传统的CSS规则里没有变量，但是在 CSS-in-JS 中可以方便地控制变量
const Container = styled.div(props => ({ display: 'flex', flexDirection: props.column && 'column' }))⑤CSS选择器与HTML元素耦合
.target .name h1 { color: red } body #container h1 { color: green }<!doctype html> <html lang="en"> <body> <div id='container'> <div class='target'> <div class='name'> <h1>我是啥颜色？</h1> </div> </div> </div> </body> </html>如果你想把
h1改成h2，必须要同时改动 CSS 和 HTML。而在CSS-in-JS中，HTML和CSS是结合在一起的，易于修改(2)Emotion 介绍
Emotion 是目前最受欢迎的 CSS-in-JS 库之一，它还对 React 作了很好的适应，可以方便地创建 styled component，也支持写行内样式：
/** @jsx jsx */ import { jsx } from '@emotion/react' render( <div css={{ backgroundColor: 'hotpink', '&:hover': { color: 'lightgreen' } }} > This has a hotpink background. </div> )
3.emotion & 登录注册页美化
全局样式
html {
/* rem em */
/* em 相对于父元素的 font-size */
/* rem 相对于根元素的 font-size，r root */
/* 浏览器默认 font-size 16px */
/* 16px * 62.5% = 10px */
/* 1rem === 10px */
font-size: 62.5%;
}
html body #root .App {
min-height: 100vh;
}
删掉文件 srcindex.css 并去掉在 srcindex.tsx 中的引用，后续全局样式都在 srcApp.css 中添加
安装 emotion
npm i @emotion/react @emotion/styled --force
原生标签使用 emotion
编辑 srcunauthenticated-appindex.tsx(部分原有内容省略)
...
import { Card, Button } from "antd";
import styled from "@emotion/styled";
export const UnauthenticatedApp = () => {
...
return (
<Container>
<Card>
...
</Card>
</Container>
);
};
const Container = styled.div`
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
justify-content: center;
`
相当于将
div添加以css-[hashcode]命名的class并自定义样式后 封装为StyledComponent类型的 自定义组件Container（仅添加样式）const Container: StyledComponent<{ theme?: Theme | undefined; as?: React.ElementType<any> | undefined; }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>
antd 标签使用 emotion
继续编辑 srcunauthenticated-appindex.tsx(部分原有内容省略)
...
import { Card, Button } from "antd";
import styled from "@emotion/styled";
export const UnauthenticatedApp = () => {
...
return (
<Container>
<ShadowCard>
...
</ShadowCard>
</Container>
);
};
const ShadowCard = styled(Card)`
width: 40rem;
min-height: 56rem;
padding: 3.2rem 4rem;
border-radius: 0.3rem;
box-sizing: border-box;
box-shadow: rgba(0,0,0,0.1) 0 0 10px;
text-align: center;
`
...
相当于将
Card添加以css-[hashcode]命名的class并自定义样式后 封装为StyledComponent类型的 自定义组件ShadowCard（不仅添加样式，还将 CardProps 原有属性原封不动还原）const ShadowCard: StyledComponent<CardProps & React.RefAttributes<HTMLDivElement> & { theme?: Theme | undefined; }, {}, {}>
进一步美化
新建 srcassets，将预置 svg 文件放入(left.svg、logo.svg、right.svg)
继续编辑 srcunauthenticated-appindex.tsx(部分原有内容省略)：切换文案修改并使用 link 类型 button；添加 logo、标题和背景图
...
import { Card, Button, Divider } from "antd";
import styled from "@emotion/styled";
import left from 'assets/left.svg'
import logo from 'assets/logo.svg'
import right from 'assets/right.svg'
export const UnauthenticatedApp = () => {
...
return (
<Container>
<Header/>
<Background/>
<ShadowCard>
<Title>
{isRegister ? '请注册' : '请登录'}
</Title>
{isRegister ? <Register /> : <Login />}
<Divider/>
<Button type="link" onClick={() => setIsRegister(!isRegister)}>
切换到{isRegister ? "已经有账号了？直接登录" : "没有账号？注册新账号"}
</Button>
</ShadowCard>
</Container>
);
};
const Title = styled.h2`
margin-bottom: 2.4rem;
color: rgb(94, 108, 132);
`
const Background = styled.div`
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed; // 背景图片是否会随着页面滑动
background-position: left bottom, right bottom;
background-size: calc(((100vw - 40rem) / 2) - 3.2rem), calc(((100vw - 40rem) / 2) - 3.2rem), cover;
background-image: url(${left}), url(${right});
`
const Header = styled.header`
background: url(${logo}) no-repeat center;
padding: 5rem 0;
background-size: 8rem;
width: 100%;
`
...
美化登录页 srcunauthenticated-applogin.tsx(部分原有内容省略)：按钮宽度撑开，并导出供注册页使用
...
import { Form, Button, Input } from "antd";
import styled from "@emotion/styled";
export const Login = () => {
...
return (
<Form onFinish={handleSubmit}>
...
<Form.Item>
<LongButton htmlType="submit" type="primary">
登录
</LongButton>
</Form.Item>
</Form>
);
};
export const LongButton = styled(Button)`
width: 100%
`
美化注册页 srcunauthenticated-appregister.tsx(部分原有内容省略)：引入登录页导出的“长按钮”
...
import { Form, Input } from "antd";
import { LongButton } from "./login";
export const Register = () => {
...
return (
<Form onFinish={handleSubmit}>
...
<Form.Item>
<LongButton htmlType="submit" type="primary">
注册
</LongButton>
</Form.Item>
</Form>
);
};
tips：在 emotion 编写css， 若是发现代码没有高亮，则需要安装 vscode/webstrom 插件:
- vscode styled-components插件
- Ctrl + P, 输入
ext install vscode-styled-components第一个即是- 或者手动点过去搜索
- https://github.com/styled-components/styled-components
本次美化成果：
原文地址:https://blog.csdn.net/qq_32682301/article/details/131470504
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_20866.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
