React 统一UI组件库

本文示例将展示如何在本地开发一个统一的 React 组件库，向团队提供统一的ui组件，并演示如何在其他项目中引用这些组件。示例内容包括：

• Button 和 Modal 组件的实现
• 本地调试方法（file: 引入或 npm link）
• Client Component 的事件交互支持

结构示例

demo/
  ui-library/          # 公共组件库
    package.json
    src/
      Button.tsx
      Modal.tsx
    stories/           # 可选 Storybook
      Button.stories.tsx
  web-app/             # 业务项目
    package.json
    pages/
      index.tsx

组件库示例

ui-library/src/Button.tsx

'use client';
import React from 'react';

export interface ButtonProps {
  label: string;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

ui-library/src/Modal.tsx

'use client';
import React from 'react';

export interface ModalProps {
  title: string;
  content: string;
  onClose?: () => void;
}

export const Modal: React.FC<ModalProps> = ({ title, content, onClose }) => (
  <div style={{ border: '1px solid #000', padding: 20 }}>
    <h2>{title}</h2>
    <p>{content}</p>
    <button onClick={onClose}>Close</button>
  </div>
);

ui-library/src/index.ts

export { Button } from './Button';
export { Modal } from './Modal';

ui-library/package.json

{
  "name": "ui-library",
  "version": "1.0.0",
  "main": "src/index.ts",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

业务项目示例

web-app/app/page.tsx

'use client';

import React from 'react';
import { Button, Modal } from 'ui-library'; // 本地引入组件库

export default function HomePage() {
    return (
        <div style={{ padding: 20 }}>
            <h1>Hello from web-app</h1>
            <Button label="Click Me" onClick={() => alert('Hello!')} />
            <br/><br/>
            <Modal title="modal title" content="modal content"></Modal>
        </div>
    );
}

web-app/package.json

{
  "name": "web-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^15.5.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    // "ui-library": "*"                      // npm link 方式
    "ui-library": "file:../ui-library"  // file: 本地引用方式
  },
  "devDependencies": {
    "@types/node": "24.10.0",
    "@types/react": "19.2.2",
    "typescript": "5.9.3"
  }
}

安装与运行

本地 file: 引入（推荐）

cd web-app
npm install
npm run dev

可选 npm link

# ui-library
cd ui-library
npm link

# web-app
cd ../web-app
npm link ui-library

注意 macOS/Linux 可能需要 sudo，但长期开发推荐使用 file: 或 pnpm workspace。