beginner reactjavascriptfrontend

React Fundamentals

Learn React from scratch with hands-on projects and real-world examples

By Avinash Jha

Curriculum

  1. 1 Introduction to React 5 lessons

    Learn what React is, why it matters, and set up your development environment

    1. What is React? Reading 10 min
    2. Setting Up Your Environment Reading 15 min
    3. Your First Component Video 20 min
    4. Core Knowledge Check Quiz 10 min
    5. Applied Knowledge Check Quiz 10 min
  2. 2 Components and Props 5 lessons

    Deep dive into React components, props patterns, and composition

    1. JSX In Depth Reading 15 min
    2. Props vs State Reading 20 min
    3. Module Knowledge Check Quiz 10 min
    4. Core Knowledge Check Quiz 10 min
    5. Applied Knowledge Check Quiz 10 min
  3. 3 JSX Deep Dive 8 lessons

    Learn the core concepts of JSX Deep Dive in React.

    1. What is JSX? Reading 10 min
    2. JSX Syntax Rules Reading 10 min
    3. Embedding Expressions in JSX Reading 10 min
    4. Attributes and className Reading 10 min
    5. Children and Fragments Reading 10 min
    6. JSX vs HTML Reading 10 min
    7. Core Knowledge Check Quiz 10 min
    8. Applied Knowledge Check Quiz 10 min
  4. 4 Rendering and the Virtual DOM 7 lessons

    Learn the core concepts of Rendering and the Virtual DOM in React.

    1. Rendering Elements Reading 10 min
    2. The Virtual DOM Reading 10 min
    3. Reconciliation and Diffing Reading 10 min
    4. Keys and Lists Reading 10 min
    5. Conditional Rendering Reading 10 min
    6. Core Knowledge Check Quiz 10 min
    7. Applied Knowledge Check Quiz 10 min
  5. 5 State and Event Handling 8 lessons

    Learn the core concepts of State and Event Handling in React.

    1. Understanding State Reading 10 min
    2. The useState Hook Reading 10 min
    3. Handling Events Reading 10 min
    4. Updating State Correctly Reading 10 min
    5. State and Re-renders Reading 10 min
    6. Lifting State Up Reading 10 min
    7. Core Knowledge Check Quiz 10 min
    8. Applied Knowledge Check Quiz 10 min
  6. 6 Forms and Controlled Components 8 lessons

    Learn the core concepts of Forms and Controlled Components in React.

    1. Controlled Components Reading 10 min
    2. Uncontrolled Components Reading 10 min
    3. Handling Multiple Inputs Reading 10 min
    4. Form Validation Reading 10 min
    5. Form Libraries Reading 10 min
    6. Submit Flows and Async Errors Reading 10 min
    7. Core Knowledge Check Quiz 10 min
    8. Applied Knowledge Check Quiz 10 min
  7. 7 React Hooks 11 lessons

    Learn the core concepts of React Hooks in React.

    1. Introduction to Hooks Reading 10 min
    2. useState Reading 10 min
    3. useEffect Reading 10 min
    4. useContext Reading 10 min
    5. useRef Reading 10 min
    6. useMemo Reading 10 min
    7. useCallback Reading 10 min
    8. useReducer Reading 10 min
    9. Rules of Hooks Reading 10 min
    10. Core Knowledge Check Quiz 10 min
    11. Applied Knowledge Check Quiz 10 min
  8. 8 Custom Hooks 6 lessons

    Learn the core concepts of Custom Hooks in React.

    1. Why Custom Hooks Reading 10 min
    2. Creating Custom Hooks Reading 10 min
    3. Reusing Stateful Logic Reading 10 min
    4. Common Custom Hooks Reading 10 min
    5. Core Knowledge Check Quiz 10 min
    6. Applied Knowledge Check Quiz 10 min
  9. 9 Effects and Lifecycle 8 lessons

    Learn the core concepts of Effects and Lifecycle in React.

    1. Component Lifecycle Reading 10 min
    2. useEffect Deep Dive Reading 10 min
    3. The Dependency Array Reading 10 min
    4. Cleanup Functions Reading 10 min
    5. Data Fetching with Effects Reading 10 min
    6. Common Effect Pitfalls Reading 10 min
    7. Core Knowledge Check Quiz 10 min
    8. Applied Knowledge Check Quiz 10 min
  10. 10 Context API 7 lessons

    Learn the core concepts of Context API in React.

    1. The Prop Drilling Problem Reading 10 min
    2. Creating Context Reading 10 min
    3. Provider and Consumer Reading 10 min
    4. Using useContext Reading 10 min
    5. Context Best Practices Reading 10 min
    6. Core Knowledge Check Quiz 10 min
    7. Applied Knowledge Check Quiz 10 min
  11. 11 Refs and the DOM 7 lessons

    Learn the core concepts of Refs and the DOM in React.

    1. What are Refs? Reading 10 min
    2. The useRef Hook Reading 10 min
    3. Accessing DOM Elements Reading 10 min
    4. Forwarding Refs Reading 10 min
    5. useImperativeHandle Reading 10 min
    6. Core Knowledge Check Quiz 10 min
    7. Applied Knowledge Check Quiz 10 min
  12. 12 Class Components 7 lessons

    Learn the core concepts of Class Components in React.

    1. Class Component Syntax Reading 10 min
    2. State in Class Components Reading 10 min
    3. Lifecycle Methods Reading 10 min
    4. Binding this Reading 10 min
    5. Class vs Function Components Reading 10 min
    6. Core Knowledge Check Quiz 10 min
    7. Applied Knowledge Check Quiz 10 min
  13. 13 Component Patterns 7 lessons

    Learn the core concepts of Component Patterns in React.

    1. Composition vs Inheritance Reading 10 min
    2. Higher-Order Components Reading 10 min
    3. Render Props Reading 10 min
    4. Compound Components Reading 10 min
    5. Container and Presentational Components Reading 10 min
    6. Core Knowledge Check Quiz 10 min
    7. Applied Knowledge Check Quiz 10 min
  14. 14 Performance Optimization 8 lessons

    Learn the core concepts of Performance Optimization in React.

    1. How React Renders Reading 10 min
    2. React.memo Reading 10 min
    3. useMemo and useCallback Reading 10 min
    4. Code Splitting and Lazy Loading Reading 10 min
    5. List Virtualization Reading 10 min
    6. Profiling with DevTools Reading 10 min
    7. Core Knowledge Check Quiz 10 min
    8. Applied Knowledge Check Quiz 10 min
  15. 15 Routing with React Router 9 lessons

    Learn the core concepts of Routing with React Router in React.

    1. Introduction to Routing Reading 10 min
    2. Setting Up Routes Reading 10 min
    3. Navigation and Links Reading 10 min
    4. Route Parameters Reading 10 min
    5. Nested Routes Reading 10 min
    6. Programmatic Navigation Reading 10 min
    7. Protected Routes Reading 10 min
    8. Core Knowledge Check Quiz 10 min
    9. Applied Knowledge Check Quiz 10 min
  16. 16 State Management 9 lessons

    Learn the core concepts of State Management in React.

    1. State Management Overview Reading 10 min
    2. Context vs Redux Reading 10 min
    3. Redux Fundamentals Reading 10 min
    4. Redux Toolkit Reading 10 min
    5. Zustand Reading 10 min
    6. Recoil and Jotai Reading 10 min
    7. Choosing a Solution Reading 10 min
    8. Core Knowledge Check Quiz 10 min
    9. Applied Knowledge Check Quiz 10 min
  17. 17 Data Fetching 8 lessons

    Learn the core concepts of Data Fetching in React.

    1. Fetching Data in React Reading 10 min
    2. Fetch vs Axios Reading 10 min
    3. Loading and Error States Reading 10 min
    4. React Query (TanStack Query) Reading 10 min
    5. SWR Reading 10 min
    6. Caching and Revalidation Reading 10 min
    7. Core Knowledge Check Quiz 10 min
    8. Applied Knowledge Check Quiz 10 min
  18. 18 Styling in React 8 lessons

    Learn the core concepts of Styling in React in React.

    1. Styling Approaches Reading 10 min
    2. CSS Modules Reading 10 min
    3. Styled Components Reading 10 min
    4. Tailwind CSS Reading 10 min
    5. Bootstrap with React Reading 10 min
    6. Theming and Dark Mode Reading 10 min
    7. Core Knowledge Check Quiz 10 min
    8. Applied Knowledge Check Quiz 10 min
  19. 19 TypeScript with React 8 lessons

    Learn the core concepts of TypeScript with React in React.

    1. Why TypeScript with React Reading 10 min
    2. Typing Props Reading 10 min
    3. Typing State and Hooks Reading 10 min
    4. Typing Events Reading 10 min
    5. Generics in Components Reading 10 min
    6. Typing Context Reading 10 min
    7. Core Knowledge Check Quiz 10 min
    8. Applied Knowledge Check Quiz 10 min
  20. 20 Testing React Applications 9 lessons

    Learn the core concepts of Testing React Applications in React.

    1. Testing Overview Reading 10 min
    2. Jest Basics Reading 10 min
    3. React Testing Library Reading 10 min
    4. Testing Components Reading 10 min
    5. Testing Hooks Reading 10 min
    6. Mocking and Spies Reading 10 min
    7. End-to-End Testing Reading 10 min
    8. Core Knowledge Check Quiz 10 min
    9. Applied Knowledge Check Quiz 10 min
  21. 21 React Internals and Fiber 7 lessons

    Learn the core concepts of React Internals and Fiber in React.

    1. React Architecture Reading 10 min
    2. The Fiber Reconciler Reading 10 min
    3. Render and Commit Phases Reading 10 min
    4. Concurrent Rendering Reading 10 min
    5. Batching and Scheduling Reading 10 min
    6. Core Knowledge Check Quiz 10 min
    7. Applied Knowledge Check Quiz 10 min
  22. 22 Server-Side Rendering and Server Components 8 lessons

    Learn the core concepts of Server-Side Rendering and Server Components in React.

    1. CSR vs SSR Reading 10 min
    2. Server-Side Rendering Reading 10 min
    3. Static Site Generation Reading 10 min
    4. React Server Components Reading 10 min
    5. Next.js Overview Reading 10 min
    6. Hydration Reading 10 min
    7. Core Knowledge Check Quiz 10 min
    8. Applied Knowledge Check Quiz 10 min
  23. 23 Backend Integration 8 lessons

    Learn the core concepts of Backend Integration in React.

    1. Connecting to APIs Reading 10 min
    2. REST Integration Reading 10 min
    3. Authentication Flows Reading 10 min
    4. Handling Tokens and Sessions Reading 10 min
    5. Real-Time with WebSockets Reading 10 min
    6. File Uploads Reading 10 min
    7. Core Knowledge Check Quiz 10 min
    8. Applied Knowledge Check Quiz 10 min
  24. 24 GraphQL with React 7 lessons

    Learn the core concepts of GraphQL with React in React.

    1. Introduction to GraphQL Reading 10 min
    2. Queries and Mutations Reading 10 min
    3. Apollo Client Reading 10 min
    4. Caching with Apollo Reading 10 min
    5. Subscriptions Reading 10 min
    6. Core Knowledge Check Quiz 10 min
    7. Applied Knowledge Check Quiz 10 min
  25. 25 Architecture and Design Patterns 8 lessons

    Learn the core concepts of Architecture and Design Patterns in React.

    1. Project Structure Reading 10 min
    2. Feature-Based Architecture Reading 10 min
    3. Separation of Concerns Reading 10 min
    4. Common Design Patterns Reading 10 min
    5. Scalable State Architecture Reading 10 min
    6. Error Boundaries Reading 10 min
    7. Core Knowledge Check Quiz 10 min
    8. Applied Knowledge Check Quiz 10 min
  26. 26 Tooling and Build Systems 9 lessons

    Learn the core concepts of Tooling and Build Systems in React.

    1. Build Tools Overview Reading 10 min
    2. Vite Reading 10 min
    3. Webpack Reading 10 min
    4. Babel Reading 10 min
    5. ESLint and Prettier Reading 10 min
    6. Environment Variables Reading 10 min
    7. Source Maps and Build Inspection Reading 10 min
    8. Core Knowledge Check Quiz 10 min
    9. Applied Knowledge Check Quiz 10 min
  27. 27 System Design for React Apps 8 lessons

    Learn the core concepts of System Design for React Apps in React.

    1. Frontend System Design Reading 10 min
    2. Component Design at Scale Reading 10 min
    3. State Management at Scale Reading 10 min
    4. Performance at Scale Reading 10 min
    5. Micro Frontends Reading 10 min
    6. Building a Design System Reading 10 min
    7. Core Knowledge Check Quiz 10 min
    8. Applied Knowledge Check Quiz 10 min
  28. 28 Accessibility 8 lessons

    Learn the core concepts of Accessibility in React.

    1. Why Accessibility Matters Reading 10 min
    2. Semantic HTML Reading 10 min
    3. ARIA Attributes Reading 10 min
    4. Keyboard Navigation Reading 10 min
    5. Accessible Forms Reading 10 min
    6. Testing Accessibility Reading 10 min
    7. Core Knowledge Check Quiz 10 min
    8. Applied Knowledge Check Quiz 10 min
  29. 29 Security 7 lessons

    Learn the core concepts of Security in React.

    1. Common Vulnerabilities Reading 10 min
    2. Preventing XSS Reading 10 min
    3. CSRF Protection Reading 10 min
    4. Secure Authentication Reading 10 min
    5. Dependency Security Reading 10 min
    6. Core Knowledge Check Quiz 10 min
    7. Applied Knowledge Check Quiz 10 min
  30. 30 Deployment 9 lessons

    Build, configure, containerize, and deploy React applications with production-ready workflows.

    1. Building for Production Reading 10 min
    2. Git and Version Control Reading 10 min
    3. Dockerizing React Apps Reading 10 min
    4. Deploying to Netlify Reading 10 min
    5. Deploying to Vercel Reading 10 min
    6. CI/CD Pipelines Reading 10 min
    7. Environment Config and Caching Reading 10 min
    8. Core Knowledge Check Quiz 10 min
    9. Applied Knowledge Check Quiz 10 min
  31. 31 Project Based Learning 6 lessons

    Build practical React projects with requirements, architecture, milestones, edge cases, and extension paths.

    1. Building a Todo App Reading 10 min
    2. Weather Dashboard Reading 10 min
    3. E-Commerce Cart Reading 10 min
    4. Full-Stack App Reading 10 min
    5. Core Knowledge Check Quiz 10 min
    6. Applied Knowledge Check Quiz 10 min
  32. 32 Interview Questions 7 lessons

    Prepare for React interviews with concept questions, hooks, performance, coding prompts, and frontend system design.

    1. Core Concept Questions Reading 10 min
    2. Hooks Questions Reading 10 min
    3. Performance Questions Reading 10 min
    4. Coding Challenges Reading 10 min
    5. System Design Questions Reading 10 min
    6. Core Knowledge Check Quiz 10 min
    7. Applied Knowledge Check Quiz 10 min
  33. 33 Certification 4 lessons

    Prepare for the React final assessment with certification expectations, capstone criteria, rubrics, and interview readiness.

    1. Certification Overview Reading 10 min
    2. Final Assessment Reading 10 min
    3. Core Knowledge Check Quiz 10 min
    4. Applied Knowledge Check Quiz 10 min