react-principles

GitHub
Start Here

Foundation

Before diving into recipes, here's everything you need to know about how this cookbook is structured and why it was built this way.

Why This Cookbook

Most resources teach React in isolation — isolated components, isolated hooks, isolated patterns. Real applications need structure, conventions, and a shared understanding of why things are built a certain way.

This cookbook connects three layers that usually live in separate places:

SOLID Principles— The why

Abstract design philosophy. Guides how code should be shaped — single responsibility, open for extension, closed for modification.

Design Patterns— The what

Proven solutions to recurring problems. Concrete, reusable structures that apply SOLID principles in practice.

Cookbook— The how

Actionable recipes that show patterns in real code. Step-by-step, framework-specific, immediately usable.

How Recipes Work

Every recipe follows the same five-step structure. Each step builds on the previous, taking you from concept to working code.

01
PrincipleThe core idea behind the pattern — why it exists and what problem it solves.
02
RulesThe do's and don'ts. Practical guidelines distilled from real-world usage.
03
PatternThe abstract structure. A minimal code example showing the shape of the solution.
04
ImplementationThe full working code. Specific to your chosen framework (Next.js or Vite).
05
Live DemoAn interactive example you can explore directly in the browser.

Folder Structure

reference

Examples in this cookbook use the structure below. It's not a mandate — adapt it to your team's conventions. The goal is to show one coherent way everything fits together.

project structure
src/
├── features/
│   └── [feature]/
│       ├── components/    — UI components for this feature
│       ├── hooks/         — Query & mutation hooks (co-located)
│       └── stores/        — Zustand stores (if needed)
├── shared/
│   ├── components/        — Cross-feature UI components
│   ├── hooks/             — Pure UI hooks (no API calls)
│   └── types/             — Shared TypeScript types
├── lib/                   — API client, query keys, mock data
└── ui/                    — Design system primitives

Conventions

Code examples across all recipes follow these conventions consistently.

TypeScriptstrict: true — no any, use unknown and narrow
ComponentsPascalCase — UserTable.tsx, AuthForm.tsx
Hooksuse prefix — useUsers.ts, useCreateUser.ts
Storesuse + domain + Store — useAppStore.ts
Handlershandle + verb — handleSubmit, handleChange
Dark modeTailwind dark: prefix, class-based toggle

Ready to start?

Browse all recipes in the cookbook.

Browse Recipesarrow_forward
react-principles

Getting Started

Components