ReactRoadmap.md

React Roadmap

This is a roadmap for learning React.

Need To Know

• Components
• JSX
• className
• Props vs State
• Understanding React Application State
• Display lists with map and keys
• Conditional rendering
• Hooks
  • useState
  • useEffect
• Writing tests using a test framework (i.e. jest, vitest)
• Interacting with React in tests using @testing-library/react
  • screen
  • When to use findBy vs getBy vs queryBy queries
  • Query priority
  • userEvent.click and userEvent.type
• Forms and validation
  • Without a library
  • With a library (i.e. react-hook-form or formik)
• Making API calls (i.e. using fetch or axios)
• Routing (i.e. using React Router)
• Events
• Error boundaries or react-error-boundary

Nice To Know

• Context
• Virtualization
• Other (better) ways to manage global state
  • SWR
  • React-Query
  • Zustand
• More advanced hooks
  • useRef
  • useMemo
  • useCallback
• End-to-end testing (i.e. Playwright, Cypress, Puppeteer)
• Class components and their lifecycles (Note: prefer functional components with hooks, but you may run into legacy code with class components or Error Boundaries that require them)
• lazy
• Suspense
• Libraries
  • Next.js
  • react-query
  • MUI

Resources

Tutorials:

• React - Udemy

Podcasts:

• Syntax