React Fundamentals and Advanced Topics

Overview

This repository covers a comprehensive range of topics related to React, from its fundamentals to advanced concepts and best practices. It includes tutorials, examples, and explanations to help you master React and build robust, scalable applications.

Table of Contents

1. React Fundamentals

   • Why We Need React
   • Components
   • JSX
   • Props
   • Events
   • Forms
   • State
   • Props vs. State

2. Thinking About State

   • Where to Place State
   • Guidelines
   • Lifting State Up
   • Local vs. Global State
   • UI vs. Remote State

3. Thinking About Components

   • How to Split Components
   • Props as API
   • Building Reusable and Composable Components
   • The Children Prop

4. Deep Dive into Effects and useEffect

   • Data Fetching
   • Lifecycle vs. Synchronization
   • When to Use Effects
   • Effects vs. Event Handlers

5. Deep Dive into Hooks

   • Rules of Hooks
   • How Hooks Work
   • useRef
   • Building Super-Reusable Custom Hooks

6. Performance Optimization

   • Wasted Renders
   • Memoization with Memo, useMemo, and useCallback
   • Optimizing Context API
   • Code Splitting + Suspense

7. Advanced State Management

   • useReducer Hook
   • Context API
   • Redux
   • Redux Toolkit
   • Thunks
   • React Query

8. Building Single-Page Applications (SPA)

   • Vite
   • Routing with React Router
   • URL Parameters and Query Strings for State Management
   • Data Loaders and Actions (v6.4+)

9. Building Real-World Features

   • Authentication and Authorization
   • Data Sorting, Filtering, and Pagination
   • Dark Mode
   • Dashboard with Charts
   • etc.

10. Creating Your Own Back-end with a DB and API using Supabase

    • Gain the Power to Build Full-Stack Apps on Your Own!

11. How to Style React Apps

    • Tailwind CSS
    • CSS Modules
    • Styled Components

12. Advanced React Patterns Used by Senior Developers

    • Render Props
    • Higher-Order Components
    • Compound Components (to Build a Modal, a Context Menu, and More)

13. How React Works Behind the Scenes

    • Rendering
    • Virtual DOM
    • Reconciliation
    • Fiber Tree
    • Key Prop
    • Events
    • State Batching
    • etc.

14. Next.js with the "app" Router, React Server Components, and Server Actions

    • Server-Side Rendering
    • Static vs. Dynamic Rendering
    • State Management between Server and Client
    • Data Loading Strategies
    • Streaming
    • Caching
    • Image and Font Optimization
    • Authentication with NextAuth
    • Modern React Hooks (useFormState and useOptimistic)

For Running any of above the project

1. Open the folder in terminal
2. Then run following commands:

   npm i
   npm run dev