Learn React Fundamentals

A comprehensive learning path that transforms a simple master-detail view into a fully-featured, production-ready React application. This project provides 30 progressive challenges that build upon each other, teaching essential React patterns, state management, API integration, and testing strategies.

🎯 Project Overview

This repository contains a complete React learning curriculum that evolves from basic static components to a sophisticated application with:

• Modern React Patterns: Hooks, Context, useReducer, and advanced component architecture
• State Management Evolution: Local state → Context → Redux Toolkit → RTK Query
• API Integration: Data fetching, optimistic updates, caching, and error handling
• Testing Pyramid: Unit tests, integration tests, and end-to-end testing with Playwright
• Production Features: Routing, forms, validation, and performance optimization

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation & Setup

# Clone the repository
git clone https://github.com/onehungrymind/react-fundamental-cycle.git
cd react-fundamental-cycle

# Install dependencies
npm install

# Start the development server
npm run dev

Available Scripts

npm run dev          # Start Next.js development server
npm run build        # Build for production
npm run start        # Start production server
npm run test         # Run all unit tests with coverage
npm run test:unit    # Run unit tests only
npm run test:e2e     # Run Playwright end-to-end tests
npm run lint         # Run ESLint

📚 How to Work Through the Challenges

Challenge Structure

Each challenge is self-contained in its own directory:

challenges/
├── 01-static-master-detail-layout/
│   ├── CHALLENGE.md          # Challenge description and requirements
│   └── solution/
│       ├── Solution.tsx      # Complete working solution
│       └── __tests__/
│           └── solution.test.tsx  # Unit tests
├── 02-reusable-listitem-component/
│   └── ...

Working on Challenges

1. Read the Challenge: Start with CHALLENGE.md in each challenge directory
2. Understand Requirements: Review the objective, requirements, and expected outcomes
3. Implement Your Solution: Create your own implementation based on the requirements
4. Test Your Work: Run npm run test to verify your solution passes the tests
5. Compare with Solution: Review the provided Solution.tsx to learn from the reference implementation
6. Move to Next Challenge: Each challenge builds upon the previous ones

Development Environment

The project includes:

• Base Application: A working master-detail app in app/ for experimentation
• API Endpoints: Mock API at /api/items for data fetching challenges
• Testing Setup: Jest + React Testing Library for unit tests
• E2E Testing: Playwright for end-to-end testing
• TypeScript: Full TypeScript support throughout

📋 Table of Contents

Phase 1: Static UI Foundations

• Challenge 01: Static Master-Detail Layout - Basic component structure
• Challenge 02: Reusable ListItem Component - Component composition
• Challenge 03: Conditional Detail View - Conditional rendering
• Challenge 04: Render Dynamic Lists - Dynamic data rendering
• Challenge 05: Composition with Card - Component composition patterns
• Challenge 06: Styling the UI - CSS and layout fundamentals

Phase 2: Adding Interactivity (Local State)

• Challenge 07: Selectable List Items - Event handling and state
• Challenge 08: Controlled Filter Input - Controlled components
• Challenge 09: Form to Add New Items - Form handling
• Challenge 10: Immutability in Updates - Immutable state patterns
• Challenge 11: Derived State Discipline - Computed values
• Challenge 12: Reset Detail on Filter Change - State synchronization

Phase 3: Scaling State

• Challenge 13: Lift State Up - State lifting patterns
• Challenge 14: Context vs Prop Drilling - React Context
• Challenge 15: useReducer for Complex Updates - Complex state management
• Challenge 16: Context + Reducer - Combined state patterns
• Challenge 17: Container-Presenter Split - Component architecture

Phase 4: Remote Data & Effects

• Challenge 18: Remote List Fetch - API integration
• Challenge 19: Remote Detail Fetch - Individual data fetching
• Challenge 20: Persist New Item - Data persistence
• Challenge 21: Optimistic Updates - Optimistic UI patterns

Phase 5: Advanced State Management

• Challenge 22: Route-Based Selection - Routing integration
• Challenge 23: Redux Toolkit Store - Redux setup
• Challenge 24: Selectors & Normalization - Data optimization
• Challenge 25: Async Thunks for API - Redux async patterns
• Challenge 26: RTK Query Caching - Advanced caching

Phase 6: Forms & Testing

• Challenge 27: Multi-Step Form - Complex form patterns
• Challenge 28: Basic Testing - Unit testing
• Challenge 29: Integration Testing - Integration testing
• Challenge 30: End-to-End Testing - E2E testing

🏗️ Project Architecture

Technology Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Testing: Jest + React Testing Library + Playwright
• State Management: React hooks → Context → Redux Toolkit → RTK Query
• Styling: CSS modules and global styles
• API: Next.js API routes for backend simulation

Key Concepts Covered

• Component Patterns: Presenter/Container, Composition, HOCs
• State Management: Local state, Context, Redux patterns
• Data Flow: Props, Context, Redux, RTK Query
• Performance: Memoization, optimization, caching
• Testing: Unit, integration, and E2E testing strategies
• User Experience: Loading states, error handling, optimistic updates

🧪 Testing Strategy

Unit Tests

• Each challenge includes comprehensive unit tests
• Tests cover component rendering, user interactions, and edge cases
• Run with: npm run test

Integration Tests

• Test complete workflows and component interactions
• Mock API calls for reliable testing
• Verify data flow and state management

End-to-End Tests

• Playwright tests for complete user journeys
• Test real browser interactions
• Run with: npm run test:e2e

🎓 Learning Outcomes

By completing all 30 challenges, you'll have built a production-ready React application with:

✅ Solid Foundation: Understanding of React fundamentals and patterns
✅ State Management: Mastery of local state, Context, and Redux
✅ API Integration: Experience with data fetching, caching, and error handling
✅ Testing Expertise: Comprehensive testing strategies and best practices
✅ Performance Optimization: Knowledge of React performance patterns
✅ Architecture Skills: Ability to design scalable React applications

🤝 Contributing

This is a learning resource designed to help developers master React patterns. Feel free to:

• Fork the repository for personal learning
• Submit issues for improvements or clarifications
• Share your solutions and learnings with the community

📄 License

This project is open source and available under the MIT License.

---

Ready to start your React journey? Begin with Challenge 01 and build your way to a production-ready React application!