React

roadmap.sh: https://roadmap.sh/react

Suggested path through the React nodes. Each node links to its lesson when written.

Nodes

Fundamentals

• JSX
• Components
• Functional components
• Props vs state
• Conditional rendering
• Lists and keys
• Events
• Rendering
• Component lifecycle

Hooks

• Hooks
• useState
• useEffect
• useContext
• useRef
• useReducer
• useMemo
• useCallback
• Creating custom hooks
• Hooks best practices

Advanced patterns

• Context
• Refs
• Portals
• Suspense
• Error boundaries
• Higher-order components
• Render props
• Composition

Routing

• Routers
• React Router
• TanStack Router

State management

• State management
• Zustand
• Jotai
• Redux Toolkit (RTK Query)
• MobX
• Recoil

Styling

• Writing CSS
• CSS Modules
• Tailwind CSS
• Panda CSS

Component libraries

• Component libraries
• Material UI
• Chakra UI
• shadcn/ui
• Headless component libraries
• Radix UI
• React Aria
• Ark UI

Animation

• Animation
• Framer Motion
• React Spring
• GSAP

Forms

• Forms
• React Hook Form
• Formik
• Types & validation
• Zod

API calls

• API calls
• Axios
• TanStack Query
• SWR
• GraphQL — Apollo
• Relay
• urql

Testing

• Testing
• Jest
• Vitest
• React Testing Library
• Cypress
• Playwright

Frameworks & tooling

• Frameworks
• Next.js
• Astro
• CLI tools
• Vite
• TypeScript

Server & mobile

• Server APIs
• Mobile applications
• React Native

Resources

See resources.md.

Project ideas

• Build a Kanban board with drag-and-drop, persisting columns/cards to localStorage via a custom useLocalStorage hook and Zustand for state.
• Create a GitHub repo explorer using TanStack Query for data fetching, React Router for routing, and Suspense + error boundaries for loading/error states.
• Ship a themeable component library starter with shadcn/ui + Tailwind, documented in Storybook and tested with React Testing Library.