# React

> Frontend component library.

- Skill: `dhaupin/react` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dhaupin/react`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dhaupin/react/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: dhaupin (https://skillmd.com/u/dhaupin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dhaupin/react

---


# React

> Frontend component library.

---

## When To Use

- DOM components
- SPA framework
- Component-based UI

---

## What To Do

### 1. Component Pattern

```jsx
function MyComponent({ prop }) {
  const [state, setState] = useState(null)

  useEffect(() => {
    // side effects
  }, [])

  return <div>{prop}</div>
}
```

### 2. Common Hooks

| Hook | What |
|------|------|
| useState | Local state |
| useEffect | Side effects |
| useContext | Shared state |
| useRef | DOM reference |
| useMemo | Memorized value |
| useCallback | Memorized function |

### 3. Patterns

```jsx
// Conditional
{condition && <Component />}

// List
items.map(item => <Item key={item.id} {...item} />)

// Form
<form onSubmit={handleSubmit}>
  <input value={value} onChange={e => setValue(e.target.value)} />
</form>
```

### 4. Testing

```javascript
render(<MyComponent prop="value" />)
expect(screen.getByText('value')).toBeInTheDocument()
```

---

## Output

```
## React

| Component | Tested | Status |
|------------|--------|--------|
| [name] | [YES/NO] | [OK] |

### Props Interface
- [list]
```

---

**Role**: React Developer  
**Input**: Components  
**Output**: Working UI

> Component-based UI.