家好,今天我们分享的是仿唯品会注册页面的简单实现方法(单纯的结构和样式),首先我们看下效果图
下面是HTML结构
下面是CSS样式
最后再给大家分享一个知识点:——clear 清除浮动,解决“塌陷”的方法——
创建一个用来清除浮动的CSS样式类(.clearfix);
.clearfix { zoom:1;}
.clearfix:after {content:".";display:block;visibility:hidden;height:0;clear:both;}
针对包裹的全是浮动元素的父级容器使用(.clearfix)
PS:详情可参考文中部分,向我一样的小白前期不用理解这两行代码意思,当作工具使用即可!
#34;夏哉ke":quangneng.com/2557/
React 18 + TypeScript 高仿 AntD:从零到一打造组件库
在现代 Web 开发中,组件库已经成为提高开发效率和保证项目一致性的重要工具。React 作为当前最流行的前端框架之一,其生态中的组件库如 Ant Design(简称 AntD)广受欢迎。本文将指导你如何使用 React 18 和 TypeScript 从零开始打造一个类似 AntD 的组件库。
## 一、准备工作
在开始之前,确保你已经安装了最新版本的 Node.js 和 npm。然后,通过以下命令创建一个新的 React 项目:
```bash
npx create-react-app my-component-library --template typescript
```
这将创建一个名为 `my-component-library` 的 React + TypeScript 项目。接下来,进入项目目录并初始化一个 Git 仓库:
```bash
cd my-component-library
git init
```
## 二、项目结构
为了更好地组织代码,我们可以按照以下结构来规划项目:
```
my-component-library
├── public
├── src
│ ├── components
│ │ ├── Button
│ │ │ ├── index.tsx
│ │ │ └── style.ts
│ │ └── index.ts
│ ├── hooks
│ ├── themes
│ │ ├── default
│ │ └── index.ts
│ ├── types
│ ├── utils
│ ├── index.ts
│ └── App.tsx
├── .gitignore
├── package.json
├── README.md
└── tsconfig.json
```
## 三、第一个组件:Button
我们将从创建一个基本的 `Button` 组件开始。在 `src/components/Button/index.tsx` 中,创建一个简单的按钮组件:
```tsx
import React from 'react';
import './style.css';
interface ButtonProps {
children: React.ReactNode;
onClick?: () => void;
}
const Button: React.FC<ButtonProps> = ({ children, onClick }) => {
return (
<button className="my-button" onClick={onClick}>
{children}
</button>
);
};
export default Button;
```
在 `src/components/Button/style.ts` 中,添加一些基本的样式:
```ts
import './style.css';
```
在 `src/components/index.ts` 中,导出 `Button` 组件:
```ts
export { default as Button } from './Button';
```
## 四、样式和主题
为了使组件库具有更好的可定制性和一致性,我们可以使用 CSS-in-JS 库(如 `styled-components` 或 `emotion`)来编写样式。这里我们以 `styled-components` 为例。
首先,安装 `styled-components`:
```bash
npm install styled-components
```
然后,在 `src/themes/default` 目录下创建一个主题文件 `index.ts`:
```ts
export const defaultTheme = {
primaryColor: '#1890ff',
secondaryColor: '#ff4d4f',
// ... 其他主题变量
};
```
接下来,使用 `styled-components` 重写 `Button` 组件的样式:
```tsx
import React from 'react';
import styled from 'styled-components';
import { defaultTheme } from '../../themes';
interface ButtonProps {
children: React.ReactNode;
onClick?: () => void;
}
const StyledButton = styled.button`
background-color: ${defaultTheme.primaryColor};
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
&:hover {
background-color: ${defaultTheme.secondaryColor};
}
`;
const Button: React.FC<ButtonProps> = ({ children, onClick }) => {
return (
<StyledButton onClick={onClick}>
{children}
</StyledButton>
);
};
export default Button;
```
## 五、类型和工具函数
为了提高代码的健壮性和可维护性,我们可以在 `src/types` 目录下定义一些常用的类型和接口,在 `src/utils` 目录下封装一些工具函数。
## 六、文档和示例
为了方便其他开发者使用你的组件库,你需要提供清晰的文档和示例。可以使用 `storybook` 来搭建一个组件展示平台。
首先,安装 `storybook`:
```bash
npx sb init
```
然后,根据提示完成配置。在 `src/stories` 目录下编写组件的故事(Stories)。
## 七、打包和发布
当组件库开发完成后,需要将其打包成可在其他项目中使用的格式。使用 `create-react-app` 创建的项目已经内置了打包工具,你可以直接运行:
```bash
npm run build
```
这将在 `build` 目录下生成打包后的文件。然后,你可以将这些文件发布到 npm 上:
```bash
npm publish
```
确保你已经注册了 npm 账号并登录。
## 八、总结
创建一个组件库是一个复杂但非常有价值的过程。它不仅能够提高开发效率,还能够帮助维护项目的一致性和可维护性。通过不断迭代和改进,你的组件库可以成为 React 生态中的一个宝贵资源。记住,一个好的组件库不仅仅是代码的集合,更是社区、文档和持续努力的结晶。
这两天状态不是很好 思路不行
加上有一些琐碎的事情
没事学学css 感觉还是挺有趣的 哈哈
❝
Hello!小伙伴!
非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~
自我介绍 「ଘ(੭ˊᵕˋ)੭」
昵称:海轰
标签:程序猿|C++选手|学生
简介:因C语言结识编程,随后转入计算机专业,有幸拿过一些国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)
学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!
❞
在这里插入图片描述
2、复现效果图
在这里插入图片描述
Demo代码 js
在这里插入图片描述
wxml
在这里插入图片描述
wxss
文章仅作为学习笔记,记录从0到1的一个过程
希望对您有所帮助,如有错误欢迎小伙伴指正~
*请认真填写需求信息,我们会在24小时内与您取得联系。