Skip to main content

React.js

1. React Basics​

  • What is React and its component-based architecture
  • Setting up a React project using:
    • create-react-app (basic)
    • Vite or Next.js (optional advanced tools)
  • Understanding JSX syntax
  • React components:
    • Functional components
    • Class components (optional)
  • Handling component errors with error boundaries
  • Synthetic events in React

2. Component Lifecycle​

  • React's component lifecycle:
    • Mounting, updating, and unmounting
  • Using useEffect for side effects
  • Cleanup functions in useEffect

3. React Hooks​

  • Common hooks:
    • useState, useEffect, useContext
  • Advanced hooks:
    • useReducer, useMemo, useCallback
    • useRef for DOM manipulation and persisting values
  • Creating custom hooks for reusable logic

4. Performance Optimization​

  • Avoiding unnecessary re-renders
  • Memoizing components with React.memo
  • Optimizing expensive computations with useMemo
  • Optimizing event handlers with useCallback
  • Code-splitting and lazy loading using React.lazy and Suspense

5. Building and Deploying React Apps​

  • Building production-ready React apps (npm run build)
  • Hosting on platforms like Vercel, Netlify, or AWS