React Snippets

Note

Allman brace style approach is used consistently in all snippets.

A comprehensive collection of handy React snippets for VSCode and WebStorm to speed up component creation and improve productivity.

Supports:

• ✅ TypeScript Only
• ✅ React Client Components
• ✅ React Server Components
• ✅ Components with Props
• ✅ Reusable Action Handlers

---

✨ Features

🧩 VSCode Support

Includes the following snippet abbreviations:

• rcc — React Client Component
• rccp — React Client Component with Props
• rsc — React Server Component
• rscp — React Server Component with Props
• rah — React Action Handler

➡️ See full VSCode snippet list

🛠 WebStorm Support

Includes the following snippet abbreviations:

• rcc — React Client Component
• rccp — React Client Component with Props
• rsc — React Server Component
• rscp — React Server Component with Props
• rah — React Action Handler

➡️ See full WebStorm snippet list

---

📦 Installation

For VSCode

1. Open Command Palette → Snippets: Configure Snippets
2. Choose New Global Snippets file or language-specific for typescriptreact
3. Paste the content of vscode.md

For WebStorm

1. Go to Settings → Editor → Live Templates
2. Create a new template group or use an existing one
3. Paste the content of webstorm.md
4. Set provided TM_FILENAME_BASE variable for dynamic naming

---

📁 Repository Structure

react-snippets/
├── README.md       # You are here 👈
├── vscode.md       # VSCode-specific snippet definitions
└── webstorm.md     # WebStorm-specific snippet definitions

---

💡 Tip

Use these snippets as a foundation and feel free to customize them to fit your coding style or team conventions.

---

📃 License

MIT © DevMaffi