#34;夏哉ke"：quangneng.com/2557/

React 18 + TypeScript 高仿 AntD：從零到一打造組件庫

在現(xiàn)代 Web 開發(fā)中，組件庫已經(jīng)成為提高開發(fā)效率和保證項目一致性的重要工具。React 作為當(dāng)前最流行的前端框架之一，其生態(tài)中的組件庫如 Ant Design（簡稱 AntD）廣受歡迎。本文將指導(dǎo)你如何使用 React 18 和 TypeScript 從零開始打造一個類似 AntD 的組件庫。

## 一、準(zhǔn)備工作

在開始之前，確保你已經(jīng)安裝了最新版本的 Node.js 和 npm。然后，通過以下命令創(chuàng)建一個新的 React 項目：

```bash

npx create-react-app my-component-library --template typescript

```

這將創(chuàng)建一個名為 `my-component-library` 的 React + TypeScript 項目。接下來，進(jìn)入項目目錄并初始化一個 Git 倉庫：

```bash

cd my-component-library

git init

```

## 二、項目結(jié)構(gòu)

為了更好地組織代碼，我們可以按照以下結(jié)構(gòu)來規(guī)劃項目：

```

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

我們將從創(chuàng)建一個基本的 `Button` 組件開始。在 `src/components/Button/index.tsx` 中，創(chuàng)建一個簡單的按鈕組件：

```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` 中，導(dǎo)出 `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` 目錄下創(chuàng)建一個主題文件 `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;

```

## 五、類型和工具函數(shù)

為了提高代碼的健壯性和可維護性，我們可以在 `src/types` 目錄下定義一些常用的類型和接口，在 `src/utils` 目錄下封裝一些工具函數(shù)。

## 六、文檔和示例

為了方便其他開發(fā)者使用你的組件庫，你需要提供清晰的文檔和示例。可以使用 `storybook` 來搭建一個組件展示平臺。

首先，安裝 `storybook`：

```bash

npx sb init

```

然后，根據(jù)提示完成配置。在 `src/stories` 目錄下編寫組件的故事（Stories）。

## 七、打包和發(fā)布

當(dāng)組件庫開發(fā)完成后，需要將其打包成可在其他項目中使用的格式。使用 `create-react-app` 創(chuàng)建的項目已經(jīng)內(nèi)置了打包工具，你可以直接運行：

```bash

npm run build

```

這將在 `build` 目錄下生成打包后的文件。然后，你可以將這些文件發(fā)布到 npm 上：

```bash

npm publish

```

確保你已經(jīng)注冊了 npm 賬號并登錄。

## 八、總結(jié)

后續(xù)工作

1. 組件豐富：繼續(xù)開發(fā)更多的組件，如 Input、Select、Modal 等，以完善組件庫的功能。
2. 主題定制：提供更多的主題選項，允許用戶根據(jù)需求自定義組件庫的主題。
3. 文檔完善：編寫更詳細(xì)的組件使用文檔和示例，包括安裝指南、API 說明和最佳實踐。
4. 單元測試：為組件編寫單元測試，確保組件的穩(wěn)定性和可靠性。
5. 持續(xù)集成：設(shè)置 CI/CD 流程，自動化測試和部署流程。
6. 社區(qū)參與：開源組件庫，吸引社區(qū)開發(fā)者參與貢獻(xiàn)和改進(jìn)。
7. 版本控制：遵循語義化版本控制（SemVer），確保組件庫的版本更新對用戶透明。

注意事項

• 一致性：確保所有組件的一致性，包括樣式、API 設(shè)計和交互行為。
• 可訪問性：關(guān)注組件的可訪問性（Accessibility），確保組件對殘障用戶友好。
• 性能優(yōu)化：對組件進(jìn)行性能優(yōu)化，減少渲染次數(shù)和提高加載速度。
• 反饋機制：建立用戶反饋機制，及時收集用戶的意見和建議。

結(jié)束語

創(chuàng)建一個組件庫是一個復(fù)雜但非常有價值的過程。它不僅能夠提高開發(fā)效率，還能夠幫助維護項目的一致性和可維護性。通過不斷迭代和改進(jìn)，你的組件庫可以成為 React 生態(tài)中的一個寶貴資源。記住，一個好的組件庫不僅僅是代碼的集合，更是社區(qū)、文檔和持續(xù)努力的結(jié)晶。

鳥學(xué)習(xí)記：第四十三天

這兩天狀態(tài)不是很好 思路不行

加上有一些瑣碎的事情

沒事學(xué)學(xué)css 感覺還是挺有趣的 哈哈

前言

?

Hello！小伙伴！

非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～

自我介紹 「?(?ˊ?ˋ)?」

昵稱：海轟

標(biāo)簽：程序猿｜C++選手｜學(xué)生

簡介：因C語言結(jié)識編程，隨后轉(zhuǎn)入計算機專業(yè)，有幸拿過一些國獎、省獎等，已保研。目前正在學(xué)習(xí)C++/Linux（真的真的太難了～）

學(xué)習(xí)經(jīng)驗：扎實基礎(chǔ) + 多做筆記 + 多敲代碼 + 多思考 + 學(xué)好英語！

?

效果展示

1、原效果圖

在這里插入圖片描述

2、復(fù)現(xiàn)效果圖

在這里插入圖片描述

Demo代碼 js

在這里插入圖片描述

wxml

在這里插入圖片描述

wxss

結(jié)語

文章僅作為學(xué)習(xí)筆記，記錄從0到1的一個過程

希望對您有所幫助，如有錯誤歡迎小伙伴指正～