My React Learning Journey

Before you open any day's code, always read that day's README first!

Reading the README side by side with the code will give you a much better experience and deeper understanding of the concepts.

⚠️ Important: Do NOT push node_modules to GitHub!

• Always add node_modules to your .gitignore file.
• I delete node_modules from each project to keep the repo lightweight and avoid making it bulky.
• To run any project, go into that day's folder, run npm install (or npm i), then npm run dev.
• If you see node_modules is missing, just install dependencies as above and everything will work!

---

📖 About This Repository

Welcome! 👋

This repository is a chronicle of my React learning journey — structured, interview-focused, and project-based. Here, you'll find:

• 📆 Daily learning and practice of React concepts
• 📝 Consistent notes & code commits
• 👨‍💻 Hands-on projects to solidify knowledge
• 🎯 Preparation for frontend developer interviews

---

📂 Topics To Be Covered

• ✅ JSX & Components
• ✅ Props & State ⚡
• ✅ Event Handling 🖱️
• ✅ Hooks (useState, useEffect, useContext, etc.) 🪝
• ✅ Context API vs Redux 🔄
• ✅ Code Splitting & Lazy Loading 🚀
• ✅ React Router 🛣️
• ✅ Performance Optimizations ⚙️
• ✅ Best Practices & Patterns 🏆
• ✅ Testing (React Testing Library) 🧪

---

📅 Day 001: Introduction to React, History, and Core Concepts

What we learned in day_001:

• What is a library vs. a framework
• Introduction to React.js and its history
• Why React.js is preferred over Vanilla JavaScript
• Setting up the React development environment
• Advantages of React
• Big-picture overview of how React works (with diagrams)
• React's reconciliation process (with diagrams)

Explore the full notes and diagrams for Day 001 →

---

📅 Day 002: Vite React App, Tailwind CSS, and Personalization

What we learned in day_002:

• How to set up a new React app using Vite
• Adding Tailwind CSS to a Vite React project
• Important precautions for project setup and version control
• Personalizing your first React component with your name

See the full Day 002 guide →

---

📅 Day 003: React Under the Hood with CDN Scripts

What we learned in day_003:

• How to use React and JSX directly in the browser with CDN scripts and Babel
• Step-by-step breakdown of how React renders to the DOM without build tools
• Visualizing the relationship between the real DOM and virtual DOM with a Mermaid diagram

See the full Day 003 guide →

---

📅 Day 004: React Rules & Best Practices

What we learned in day_004:

• Component must return a single parent element
• Using React Fragments as an alternative to wrapper divs
• Proper component naming conventions (capitalization)
• Using components as children
• Using className instead of class in JSX
• Proper JSX commenting
• DRY principle with reusable components

See the full Day 004 guide →

---

📅 Day 005: React Components & Styling Without Build Tools

What we learned in day_005:

• Setting up React without Create React App using CDN scripts
• Creating and organizing multiple components (Navbar, Main, Footer)
• Using React Fragment for efficient component wrapping
• External CSS styling with Flexbox
• React component naming conventions
• Practical implementation of React best practices
• Interview preparation with common React questions

See the full Day 005 guide →

---

📅 Day 006: Component Organization & File Structure

What we learned in day_006:

• Transforming functions into proper React components
• Organizing components into separate files
• Building a maintainable React project structure
• Best practices for component file organization
• Moving from single-file to multi-file components
• Real-world React application structure
• Connecting the dots from Day 1 to Day 6
• Building the bridge to professional React development

See the full Day 006 guide →

---

📅 Day 007: Modern React Project Structure & Development Environment

What we learned in day_007:

• Professional React project structure with Vite
• Understanding the role of each project folder and file
• Moving from CDN scripts to NPM packages
• Working with ES Modules and imports/exports
• Modern development tools and configuration files
• Best practices for organizing React components
• Evolution from basic to professional React setup
• Component organization in a real-world project

See the full Day 007 guide →

---

📅 Day 008: Props and Component Reusability in React

What we learned in day_008:

• Understanding Props as React's component communication system
• Different ways to pass and handle props:
  • Individual props passing
  • Props destructuring
  • Spread operator usage
  • Default props
  • Children props
• Creating reusable components with props
• Three approaches to component usage:
  • Basic static approach
  • Direct props approach
  • Data-driven production approach
• Practical implementation with a Skill Cards project
• Best practices for props and component reusability
• Dynamic styling using props with Tailwind CSS

See the full Day 008 guide →

---

📅 Day 009: Conditional Rendering in React

What we learned in day_009:

• What is conditional rendering and why it's essential for dynamic UIs
• How to use JavaScript expressions to render different UI elements based on conditions
• Main techniques for conditional rendering:
  • Ternary operators for inline conditions
  • Logical && (AND) operator for simple show/hide logic
  • if/else and switch statements for more complex logic (outside JSX)
• Practical example: displaying a voting message based on age using a ternary operator in App.jsx
• Best practices for keeping conditions readable and maintainable
• Common use cases: showing/hiding elements, loading spinners, error messages, role-based UI
• Key takeaways and interview questions about conditional rendering

See the full Day 009 guide →

---

📅 Day 010: Import and Export Patterns in React

What we learned in day_010:

• The difference between default and named exports in JavaScript modules
• How to export a component as default or named from a file
• How to import default and named exports in other files
• Mixing default and named exports in the same file
• Best practices for organizing exports and imports in React projects
• Practical example: importing and using multiple components from a single file (App.jsx and Child.jsx)
• Key takeaways and common interview questions about module exports

See the full Day 010 guide →

---

📅 Day 011: The React Children Prop and Component Composition

What we learned in day_011:

• What the children prop is in React and how it enables component composition
• How to pass JSX elements as children between a component's opening and closing tags
• How to access and render children inside a component using props.children
• The advantages of using the children prop for flexible layouts and reusable wrappers
• Best practices for using children in your components
• Practical example: passing and rendering nested components (App.jsx and Child.jsx)
• Key takeaways and common interview questions about the children prop

See the full Day 011 guide →

---

📅 Day 012: Styling in React: Inline, CSS Files, CSS Modules, and More

What we learned in day_012:

• The different ways to style React components: inline styles, style objects, external CSS files, CSS Modules, and utility-first frameworks like Tailwind CSS
• How to use the style prop with inline objects and variables
• How to import and use external CSS files with className
• How to use CSS Modules for component-scoped styles
• Why inline styles are generally discouraged for production code
• Best practices for scalable and maintainable styling in React
• Practical example: using all approaches in a single component (App.jsx)
• Key takeaways and common interview questions about styling in React

See the full Day 012 guide →

---

📅 Day 013: Event Handling in React

What we learned in day_013:

• How to handle events in React using synthetic events for consistent cross-browser behavior
• Basic event handling with functions and inline arrow functions
• How to pass event handlers as props to child components for component communication
• Understanding event propagation (bubbling and capturing) and how to control it
• Using stopPropagation() to prevent event bubbling
• Best practices for event handling in React components
• Practical example: handling clicks, hovers, and passing event handlers between components (App.jsx and Child.jsx)
• Key takeaways and common interview questions about event handling in React

See the full Day 013 guide →

---

📅 Day 014: React Hooks: useState and State Management

What we learned in day_014:

• What React Hooks are and why they were introduced in React 16.8
• How to use the useState hook for state management in functional components
• Why regular variables don't trigger re-renders in React components
• Understanding when React components re-render (props change, state change, parent re-renders)
• The concept of derived state and when to calculate vs. store state
• State lifting: how to share state between parent and child components
• Best practices for state management including functional updates and descriptive naming
• Practical examples: comparing regular variables vs. useState, derived state calculations, and state lifting patterns
• Key takeaways and common interview questions about React Hooks and state management

See the full Day 014 guide →

---

📅 Day 015: React Icons - Complete Guide

What we learned in day_015:

• What React Icons is and its key features (10,000+ icons, tree shaking, TypeScript support)
• How to install and set up React Icons in your project using npm, yarn, or pnpm
• Popular icon libraries included: Font Awesome, Feather Icons, Heroicons, Material Design, Ant Design, Bootstrap, Remix, and Tabler Icons
• Basic usage patterns and props (size, color, className, style)
• Advanced styling techniques: CSS classes, inline styles, and CSS-in-JS
• Best practices for performance optimization, accessibility, and consistent sizing
• Common use cases: navigation menus, social media icons, status indicators, loading spinners, button icons, form validation, rating systems, and file type icons
• Troubleshooting common issues and bundle size optimization
• Complete resources and documentation links for further learning

See the full Day 015 guide →

---

📅 Day 016: React Hooks: useEffect and Side Effects

What we learned in day_016:

• What side effects are and why they need special handling in React
• How to use the useEffect hook to manage side effects in functional components
• Four different ways to use useEffect:
  • No dependency array (runs on every render)
  • Empty dependency array (runs only once on mount)
  • With dependencies (runs when dependencies change)
  • With cleanup function (prevents memory leaks)
• Understanding dependency arrays and their importance for controlling when effects run
• How to prevent memory leaks with cleanup functions for timers, subscriptions, and event listeners
• Real-world examples: API calls, document title updates, event listeners, and debounced search
• Best practices for avoiding infinite loops and keeping effects focused
• Common patterns for data fetching, debounced operations, and component lifecycle management
• Key takeaways and common interview questions about useEffect and side effects

See the full Day 016 guide →

---

📅 Day 017: Advanced Todo App with React Hooks

What we learned in day_017:

• Building a complete, production-ready todo application with React
• Advanced state management using React hooks (useState, useEffect)
• Implementing CRUD operations: Create, Read, Update, Delete todos
• Controlled form components with proper validation and error handling
• Local storage integration for data persistence across browser sessions
• Responsive design implementation with Tailwind CSS for mobile-first approach
• Real-time features: live clock display, toast notifications, and interactive UI
• Advanced UI/UX patterns: expandable descriptions, completion toggles, edit modes
• Form validation and duplicate prevention with smart error handling
• Component architecture and proper separation of concerns
• Modern React patterns: functional components, hooks, and controlled inputs
• Deployment to Vercel with automatic CI/CD pipeline
• Performance optimizations and best practices for React applications

Live Demo: https://kushs-todo-react.vercel.app/

GitHub Repository: https://github.com/kushkumarkashyap7280/MY-TODO

See the full Day 017 guide →

---

📅 Day 018: React Forms: Controlled vs Uncontrolled Components

What we learned in day_018:

• Understanding the fundamental difference between controlled and uncontrolled components in React forms
• Controlled Components: React-managed state using useState and onChange handlers
• Uncontrolled Components: DOM-managed state using useRef and FormData
• When to use each approach based on form complexity and performance requirements
• Fetch API integration for both JSON data and FormData (file uploads)
• Real-time validation vs submit-time validation patterns
• Performance implications: re-renders in controlled vs no re-renders in uncontrolled
• Best practices for form handling in React applications
• Common pitfalls and how to avoid them
• Interactive demo showing both approaches side-by-side
• Comparison table of features, use cases, and trade-offs
• Complete implementation examples with validation and error handling
• Interview questions and practical decision-making guidelines

Key Learning Outcomes:

• ✅ Choose the right form approach for your specific use case
• ✅ Implement both controlled and uncontrolled patterns correctly
• ✅ Handle form submissions with Fetch API for different data types
• ✅ Apply performance optimizations and best practices
• ✅ Build maintainable and scalable form components

See the full Day 018 guide →

---

📅 Day 019: Pokemon Explorer: React API Integration & Search

What we learned in day_019:

• Building a complete Pokemon Explorer application with React and API integration
• API Integration: Fetching 100 Pokemon from PokeAPI using Promise.all() for concurrent requests
• State Management: Managing multiple state variables (pokemons, filtered, keyword, loading)
• Search Functionality: Real-time, case-insensitive search with immediate filtering
• Component Architecture: Building reusable Card and Loader components
• Error Handling: Graceful error management for API failures and network issues
• Loading States: Animated Pokemon-themed loader with bouncing ball and progress indicators
• Responsive Design: Mobile-first approach with Tailwind CSS for all device sizes
• Performance Optimization: Concurrent API requests and efficient state updates
• User Experience: Live search results, empty states, and helpful feedback
• Data Transformation: Processing complex API responses into usable component data
• Modern React Patterns: Hooks, functional components, and best practices

Key Learning Outcomes:

• ✅ Implement concurrent API requests for better performance
• ✅ Build real-time search functionality with proper state management
• ✅ Create responsive, mobile-friendly React applications
• ✅ Handle loading states and error scenarios gracefully
• ✅ Design component architecture for maintainable code

Live Demo: https://pokimon-api-project.vercel.app/

See the full Day 019 guide →

---

📅 Day 020: React Hooks: useRef and DOM Access

What we learned in day_020:

• Understanding the useRef hook and its role in React for DOM access and mutable value storage
• Three Main Use Cases: DOM element access, storing mutable values, and tracking previous values
• Traditional vs React Approach: Comparing document.querySelector() with useRef for DOM manipulation
• Form Handling: Building forms with useRef for direct DOM access without re-renders
• Focus Management: Implementing focus, blur, and text selection functionality
• Advanced Patterns: Storing previous values, managing timers/intervals, and callback references
• useRef vs useState: Understanding when to use each hook based on re-render requirements
• Best Practices: Proper cleanup, avoiding direct DOM manipulation, and performance optimization
• Common Mistakes: Identifying and avoiding pitfalls like memory leaks and premature ref access
• Real-World Applications: Form validation, focus management, and third-party library integration

Key Learning Outcomes:

• ✅ Access DOM elements directly using useRef without breaking React's declarative paradigm
• ✅ Store mutable values that don't trigger re-renders for performance optimization
• ✅ Implement proper cleanup patterns to prevent memory leaks
• ✅ Choose between useRef and useState based on specific use cases
• ✅ Build maintainable React components with proper DOM interaction patterns

Practical Example: Form handling with useRef demonstrating traditional DOM access vs React's useRef approach

See the full Day 020 guide →

---

📅 Day 021: React Context API: Solving Prop Drilling

What we learned in day_021:

• Understanding prop drilling and its problems in React component hierarchies
• Context API Introduction: React's built-in solution for sharing data between components
• Multiple Contexts: Using both UserContext and DarkModeContext in the same application
• Context vs Props: When to use each approach based on specific use cases
• Best Practices: Splitting contexts by domain, using custom hooks, and performance optimization
• Performance Considerations: Memoizing context values and avoiding unnecessary re-renders
• Common Patterns: Theme context, authentication context, and language context implementations
• Common Mistakes: Proper error handling and context provider setup
• Context vs Redux: Comparison and when to use each state management solution

Key Learning Outcomes:

• ✅ Solve prop drilling problems using React's Context API
• ✅ Create and manage multiple contexts in a single application
• ✅ Implement proper context providers and consumers with useContext
• ✅ Apply performance best practices for context usage
• ✅ Choose between Context API and other state management solutions

Practical Example: Dark mode implementation with context demonstrating how to avoid prop drilling through multiple component levels

See the full Day 021 guide →

---

📅 Day 022: React useReducer Hook: Advanced State Management

What we learned in day_022:

• Understanding the useReducer hook as an alternative to useState for complex state logic
• useReducer vs useState: When to use each hook based on state complexity and predictability
• Reducer Pattern: Pure functions that take current state and action, returning new state
• Action Objects: Structured actions with type and optional payload for predictable state transitions
• Complex State Management: Working with objects, arrays, and nested state structures
• Best Practices: Immutable updates, pure reducer functions, and action type constants
• Common Patterns: Form management, shopping cart, and authentication state patterns
• Performance Considerations: Stable dispatch functions and avoiding unnecessary re-renders
• Testing Strategies: How to test reducer functions and components using useReducer
• useReducer vs Redux: Comparison and when to use each state management solution

Key Learning Outcomes:

• ✅ Choose between useReducer and useState based on state complexity
• ✅ Implement pure reducer functions with immutable state updates
• ✅ Structure action objects with proper type and payload conventions
• ✅ Apply common patterns for form management and complex state logic
• ✅ Test reducer functions and components effectively
• ✅ Optimize performance with stable dispatch functions

Practical Example: Todo list application demonstrating array state management with add/remove operations, showing how useReducer provides predictable state transitions

See the full Day 022 guide →

---

📅 Day 023: React Performance Optimization: React.memo, useMemo, and useCallback

What we learned in day_023:

• Understanding the performance problems caused by unnecessary re-renders in React applications
• React.memo: Preventing unnecessary re-renders of components when props haven't changed
• useMemo: Memoizing expensive calculations and object creation to avoid repeated computations
• useCallback: Memoizing functions to prevent recreation on every render
• Performance Optimization: When to use each optimization technique and when to avoid over-optimization
• Common Patterns: Memoized child components, expensive calculations, and API call optimization
• Debugging and Monitoring: Using console logging and React DevTools Profiler for performance analysis
• Testing Strategies: How to test if memoization is working correctly
• Best Practices: Avoiding common mistakes like over-optimization and missing dependencies

Key Learning Outcomes:

• ✅ Prevent unnecessary re-renders using React.memo for pure components
• ✅ Optimize expensive calculations with useMemo to avoid repeated computations
• ✅ Memoize functions with useCallback to maintain stable references
• ✅ Debug performance issues using React DevTools and console logging
• ✅ Test memoization effectiveness with proper testing strategies
• ✅ Apply performance optimization only when needed to avoid premature optimization

Practical Example: Comprehensive performance optimization demo with interactive UI, console logging, and real-time feedback showing useCallback, useMemo, and React.memo in action with styled components and educational performance tips

See the full Day 023 guide →

---

📅 Day 024: React Router DOM: Complete Routing Solution

What we learned in day_024:

• Understanding React Router DOM as a powerful library for handling routing in React applications
• Installation and Setup: Installing react-router-dom package and proper import statements
• Basic Router Setup: RouterProvider, createBrowserRouter, and route configuration
• Layout Pattern with Outlet: Creating consistent UI with shared header and footer across pages
• Navigation Components: Three approaches - anchor tags (avoid), Link (basic), NavLink (best practice)
• Dynamic Routes: Route parameters with useParams hook for parameterized URLs
• Query Parameters: Using useSearchParams hook for URL query string management
• Programmatic Navigation: useNavigate hook for conditional and programmatic navigation
• Error Handling: Error routes, catch-all routes, and graceful 404 page handling
• Advanced Routing Patterns: Nested routes, index routes, and protected routes
• Performance Considerations: Code splitting with lazy loading and route preloading
• Testing Strategies: How to test React Router components and navigation
• Best Practices: URL patterns, route organization, and debugging common issues

Key Learning Outcomes:

• ✅ Set up React Router DOM with proper router configuration and layout patterns
• ✅ Implement different navigation approaches (Link, NavLink, useNavigate) for various use cases
• ✅ Handle dynamic routes and query parameters for flexible URL structures
• ✅ Create error boundaries and graceful error handling for routing issues
• ✅ Apply advanced routing patterns like nested routes and protected routes
• ✅ Optimize routing performance with code splitting and preloading strategies
• ✅ Test React Router components effectively with proper testing approaches

Practical Example: Complete React Router implementation with layout pattern, dynamic routes, query parameters, and error handling demonstrating scalable architecture with consistent UI, smooth navigation, and proper error boundaries

See the full Day 024 guide →

---

📅 Day 025: Axios HTTP Requests: Complete API Integration Guide

What we learned in day_025:

• Understanding Axios as a popular HTTP client library for making API requests in JavaScript applications
• HTTP Request Methods: GET, POST, PUT, PATCH, DELETE with proper syntax and configuration
• Axios Configuration: Headers, params, timeout, response types, and global configuration
• Data Formats: JSON, FormData, URL-encoded, binary data, and XML handling
• Error Handling: Comprehensive error patterns, try-catch blocks, and custom error handlers
• Request/Response Interceptors: Global request/response handling for authentication and loading states
• File Upload Examples: Single/multiple file uploads with progress tracking and FormData
• Authentication Patterns: Bearer tokens, API keys, and basic authentication
• Advanced Configuration: Custom axios instances, request cancellation, and concurrent requests
• React Integration: Custom hooks for API calls, service layers, and form submission patterns
• Performance Optimization: Request caching, debouncing, and retry logic
• Testing Strategies: Mocking axios requests and testing with Jest
• Debugging and Troubleshooting: Common issues like CORS, timeouts, and large file uploads

Key Learning Outcomes:

• ✅ Make HTTP requests using all major methods (GET, POST, PUT, PATCH, DELETE)
• ✅ Handle different data formats including JSON, FormData, and binary data
• ✅ Implement comprehensive error handling with proper user feedback
• ✅ Use interceptors for global request/response handling and authentication
• ✅ Upload files with progress tracking and proper FormData handling
• ✅ Create custom hooks and service layers for maintainable API integration
• ✅ Optimize performance with caching, debouncing, and request cancellation
• ✅ Test axios requests effectively with proper mocking strategies

Practical Example: Complete API integration with Axios demonstrating proper error handling, loading states, authentication, and user feedback for reliable HTTP requests in React applications

See the full Day 025 guide →

---

📅 Day 026: React Query & Data Fetching: Modern State Management

What we learned in day_026:

• Understanding React Query (TanStack Query) as a powerful data fetching and caching library for React applications
• Modern Data Fetching: Using @tanstack/react-query for efficient data management with automatic caching
• Traditional vs Modern Approaches: Comparing useState + useEffect with React Query's declarative data fetching
• Query Configuration: Stale time, garbage collection, refetch intervals, and background updates
• Pagination Implementation: Page-based navigation with automatic refetching and placeholder data
• Mutations (CRUD Operations): Create, Update, Delete operations with optimistic updates and rollback
• Infinite Scroll: Using react-intersection-observer for performance-optimized infinite scrolling
• Error Handling: Comprehensive error states, retry mechanisms, and user feedback
• Performance Optimizations: Automatic caching, background updates, and query invalidation
• API Integration: JSONPlaceholder API for posts and GitHub API for users
• Advanced Patterns: Query invalidation, prefetching, and optimistic updates
• Component Architecture: Proper separation of concerns with layouts, pages, and API layers

Key Learning Outcomes:

• ✅ Implement modern data fetching with React Query's automatic caching and background updates
• ✅ Compare traditional useState + useEffect patterns with React Query's declarative approach
• ✅ Build pagination systems with automatic refetching and smooth transitions
• ✅ Create mutations with optimistic updates and proper error rollback
• ✅ Implement infinite scroll using Intersection Observer for performance
• ✅ Handle complex state management with React Query's built-in loading and error states
• ✅ Optimize performance with query invalidation, prefetching, and caching strategies
• ✅ Design maintainable component architecture with proper API layer separation

Practical Example: Complete React Query implementation demonstrating data fetching, pagination, mutations, infinite scroll, and performance optimizations with both JSONPlaceholder and GitHub APIs

See the full Day 026 guide →

---

✨ Keep learning, keep building, and stay curious! ✨
_{Follow my journey and feel free to connect!}