React Developer Roadmap (2024)

A comprehensive React developer roadmap for 2024 covering every aspect of React and beyond.

1. React Fundamentals

You should know and be comfortable with all of the following:

JSX
Components
- How to create components
- Component lifecycle (mount, update, unmount)
- The different types of components
  - UI components (buttons, inputs, cards, etc)
  - Feature components (SignInForm, ProductsFilters, etc.)
  - Page components (SignInPage, ProductsPage, etc.)
  - How to split larger components into smaller ones (example 1, example 2)
Props
- How to pass data through props
- How components re-render when props change (component lifecycle)
- Prop drilling and why to avoid it
Events
- How to react to inputs
- Understanding React events (buttons, inputs, forms)

You should know and have worked with all of the following hooks:

useState
- How to create and update state
- How state updates trigger re-renders (component lifecycle)
- Setting state using updater functions
useEffect
- Understanding the useEffect lifecycle (mount, update, cleanup)
- How to correctly set the dependency array
- When not to use useEffect
useCallback
- When to use useCallback
- How useCallback prevents unnecessary re-renders
- How to correctly set the dependency array
useMemo
- When to use useMemo
- How useMemo prevents unnecessary calculations
- How useMemo prevents re-rendering of components
- How to correctly set the dependency array
useRef
- How to manipulate the DOM with a ref
- Referencing a value with a ref
- The difference between useRef and useState
useContext
- How to create a context through createContext
- How to create a provider component
- How to access context through useContext
Custom Hooks
- How to create a custom hook
- How to re-use a custom hook

You should be able to implement some of the following features:

Client-Side Routing
Data Fetching
- Understanding how to fetch data with useEffect (loading, errors, caching, race conditions)
- Using Tanstack Query
Forms
- How to validate user input in forms (emails, passwords, etc.)
- How to send form data to server
- How to handle file uploads
- Using React Hook Form
- Using Formik
State Management
Authentication
- How to handle user sign in (email, password, JWT)
- How to handle access tokens and token refreshes
- Social sign in (Google, Facebook, GitHub, etc.)
- Using Supabase
- Using Firebase
- Using Clerk
Accessibility
- Understanding why accessibility is important
- Using semantic HTML
- How to implement keyboard navigation
- How to add aria labels
- Using React Aria
Testing
- How to implement unit tests
  - Using React Testing Library
  - Using Jest
- How to implement e2e integration tests
  - Using Cypress
  - Using Playwright

You should be familiar with some of the following styling solutions:

You should have worked with one of the following:

You should have all of the following qualities:

Teamplayer
- How to work within a team
- How to perform code reviews
- How to give and receive feedback
Efficiency
- How to prioritise tasks
- How to handle tech debt
- How to meet deadlines and goals
Continuous Learning
- How to continuously learn and grow
- How to stay up to date with your skills
Networking
- Going to meetups or events
- Contributing to open source projects
- Networking within the company you work in