# good-code

**Repository Path**: gao-code/good-code

## Basic Information

- **Project Name**: good-code
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-01
- **Last Updated**: 2025-08-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Good Hook - 好用Hook和组件展示

一个用于展示和分享好用React Hook和组件的网站，支持查看代码、详细讲解和使用示例。

## 🚀 特性

- 📚 **Hook展示**: 展示各种实用的React Hook
- 💻 **代码查看**: 语法高亮的代码展示
- 📖 **详细讲解**: 每个Hook的详细说明和使用场景
- 🎯 **使用示例**: 实际的使用示例代码
- 📋 **一键复制**: 快速复制代码到剪贴板
- 🏷️ **分类标签**: 按类别和标签组织Hook
- 📱 **响应式设计**: 支持移动端和桌面端

## 🛠️ 技术栈

- **React 18** - 用户界面库
- **TypeScript** - 类型安全
- **TailwindCSS** - 样式框架
- **Vite** - 构建工具

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 [http://localhost:3001](http://localhost:3001) 查看应用。

### 构建生产版本

```bash
npm run build
```

## 📁 项目结构

```
src/
├── components/     # React组件
│   ├── Header.tsx
│   ├── Sidebar.tsx
│   └── HookDetail.tsx
├── hooks/         # 自定义Hook
├── pages/         # 页面组件
├── types/         # TypeScript类型定义
├── App.tsx        # 主应用组件
├── main.tsx       # 应用入口
└── index.css      # 全局样式
```

## 📝 添加新的Hook

在 `src/App.tsx` 中的 `mockHooks` 数组中添加新的Hook：

```typescript
{
  id: 'useCustomHook',
  title: 'useCustomHook',
  description: 'Hook的描述',
  category: 'category',
  tags: ['标签1', '标签2'],
  code: `// Hook的完整代码`,
  explanation: `详细的讲解说明`,
  usage: `// 使用示例代码`
}
```

## 🎨 自定义样式

项目使用TailwindCSS，你可以在 `src/index.css` 中添加自定义样式，或在 `tailwind.config.js` 中配置主题。

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交Issue和Pull Request来改进这个项目！