# React

> React Skill

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

---

# React Skill

> The library for web and native user interfaces.

## Ecosystem Graph

```mermaid
graph LR
  react["React"]
  react -- "extended by" --> nextjs
  react -- "alternative to" --> vue
  react -- "alternative to" --> sveltekit
```

## Quick Start
React 18 introduced concurrent rendering. While you can build raw SPAs, the React team officially recommends utilizing full-stack frameworks (Next.js, Remix) to handle routing, data fetching, and SSR.

```bash
npm install react react-dom
```

## Production Patterns
### Custom Hooks
Abstract complex component logic into custom hooks (`useAuth`, `useTable`). This decouples UI from business logic, making the hooks highly testable independently of the DOM.

## Architecture & Scaling
### Context vs State Managers
Do not use React Context for rapidly changing, high-frequency state (like mouse coordinates or typing inputs), as it forces a re-render of all consuming components. Use Zustand or Redux for complex global state, and Context strictly for static/slow-changing data (Themes, Auth Tokens).

## Error Recovery
Wrap critical UI sections in Error Boundaries to prevent a single component crash from unmounting the entire application tree.

## Security Notes
React natively escapes string variables to prevent XSS. However, using `dangerouslySetInnerHTML` bypasses this protection. Always sanitize HTML on the server or use a library like `DOMPurify` before injecting raw HTML.

## Relationships
**Alternatives**: [vue](/skills/vue), [sveltekit](/skills/sveltekit)

## References
- [React.dev](https://react.dev/)

## Why use this skill
Use this when your agent works with **react** — structured patterns beat pasted docs and prevent common hallucinations.

## AI pitfalls
- Using outdated SDK or API versions from training data
- Inventing environment variable names
- Omitting error handling and retry logic

## Production checklist
- [ ] Secrets in environment variables, not source code
- [ ] Error handling and logging in place
- [ ] Rate limits and timeouts configured

## Related skills
- [`nextjs`](../nextjs/SKILL.md) — extended by
- [`vue`](../vue/SKILL.md) — alternative to
- [`sveltekit`](../sveltekit/SKILL.md) — alternative to

---
> **Last Verified:** 2026-07-02