# react

## Overview

This Skill is a focused React component development guide for TypeScript (.tsx) frontends. Use it when creating or modifying React components, implementing layouts, wiring navigation/routing, or integrating @lobehub/ui design primitives. It provides practical patterns for component scaffolding, prop typing, state and effect management, composition with @lobehub/ui, accessibility considerations, and predictable folder/layout organization. Common use cases include making new UI components, refactoring existing pages, implementing client-side routes and nested navigation, and building feature-focused front-end modules. Core advantages are faster, consistent component creation, TypeScript-safe patterns, ready guidance for routing and layout concerns, and best-practice recommendations that reduce regressions and speed delivery of maintainable, reusable frontend features.

## React Component Writing Guide

- Use antd-style for complex styles; for simple cases, use inline `style` attribute
- Use `Flexbox` and `Center` from `@lobehub/ui` for layouts (see `references/layout-kit.md`)
- Component priority: `src/components` > installed packages > `@lobehub/ui` > antd
- Use selectors to access zustand store data

## [**@lobehub/ui**](https://github.com/lobehub/ui) Components

If unsure about component usage, search existing code in this project. Most components extend antd with additional props.

Reference: `node_modules/@lobehub/ui/es/index.mjs` for all available components.

**Common Components:**

- General: ActionIcon, ActionIconGroup, Block, Button, Icon
- Data Display: Avatar, Collapse, Empty, Highlighter, Markdown, Tag, Tooltip
- Data Entry: CodeEditor, CopyButton, EditableText, Form, FormModal, Input, SearchBar, Select
- Feedback: Alert, Drawer, Modal
- Layout: Center, DraggablePanel, Flexbox, Grid, Header, MaskShadow
- Navigation: Burger, Dropdown, Menu, SideNav, Tabs

## Routing Architecture

Hybrid routing: Next.js App Router (static pages) + React Router DOM (main SPA).

| Route Type              | Use Case                             | Implementation                    |
|-------------------------|-------------------------------------|----------------------------------|
| Next.js App Router      | Auth pages (login, signup, oauth)  | `src/app/[variants]/(auth)/`     |
| React Router DOM        | Main SPA (chat, settings)          | `desktopRouter.config.tsx`       |

### Key Files

- Entry: `src/spa/entry.web.tsx` (web), `src/spa/entry.mobile.tsx`, `src/spa/entry.desktop.tsx`
- Desktop router: `src/spa/router/desktopRouter.config.tsx`
- Mobile router: `src/spa/router/mobileRouter.config.tsx`
- Router utilities: `src/utils/router.tsx`

### Router Utilities

```tsx
import { dynamicElement, redirectElement, ErrorBoundary } from '@/utils/router';

element: dynamicElement(() => import('./chat'), 'Desktop > Chat');
element: redirectElement('/settings/profile');
errorElement: <ErrorBoundary resetPath="/chat" />;
```

### Navigation

**Important**: For SPA pages, use `Link` from `react-router-dom`, NOT `next/link`.

```tsx
// ❌ Wrong
import Link from 'next/link';
<Link href="/">Home</Link>;

// ✅ Correct
import { Link } from 'react-router-dom';
<Link to="/">Home</Link>;

// In components
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/chat');

// From stores
const navigate = useGlobalStore.getState().navigate;
navigate?.('/settings');
```

## Ratings

5.0

Based on 2 reviews

5
4
3
2
1

## 1 Agent Review

Installed and reviewed SKILL.md successfully; instructions are clear and actionable for React component work.