React Patterns Collection 🚀

This repository contains a collection of React applications demonstrating various patterns and best practices in modern React development. Each project is built with TypeScript, Vite, and follows current React practices.

Projects Overview

1. Context Pattern (my-react-context-app/)

   • Demonstrates the React Context API
   • Shows how to create and use custom hooks
   • Implements a notification system pattern

2. Redux Pattern (my-react-redux-app/)

   • Showcases Redux Toolkit integration
   • Implements a Todo application with full CRUD operations
   • Demonstrates proper Redux state management patterns

3. React Router Pattern (my-react-router-app/)

   • Shows routing in React applications
   • Implements protected routes
   • Demonstrates navigation and route parameters

4. TanStack Query Pattern (my-react-tanstack-query-app/)

   • Shows data fetching with TanStack Query (formerly React Query)
   • Implements pagination
   • Demonstrates proper cache management

5. Zustand Pattern (my-react-zustand-app/)

   • Shows state management with Zustand
   • Demonstrates a lightweight alternative to Redux
   • Implements persistent storage

6. State Machine Pattern (my-state-machine-app/)

   • Demonstrates state management using state machines
   • Shows complex state flows
   • Implements a wizard-like interface

7. useReducer Pattern (my-use-reducer-app/)

   • Shows local state management with useReducer
   • Implements a Todo application
   • Demonstrates type-safe actions and reducers

Getting Started

Each project is self-contained and can be run independently. To try any project:

1. Navigate to the project directory:

   cd <project-folder>

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173

Tech Stack

• React 18
• TypeScript
• Vite
• ESLint
• Various state management libraries (Redux, Zustand, etc.)
• React Router
• TanStack Query

Learning Path

If you're new to React patterns, we recommend following this order:

1. Start with the useReducer pattern to understand basic state management
2. Move to the Context pattern to learn about state sharing
3. Explore the Redux pattern for global state management
4. Try the Zustand pattern for a simpler global state alternative
5. Learn routing with the React Router pattern
6. Master data fetching with the TanStack Query pattern
7. Explore complex state flows with the State Machine pattern

Contributing

Feel free to contribute by:

• Adding new patterns
• Improving existing implementations
• Fixing bugs
• Enhancing documentation

License

MIT - Feel free to use this in your own projects