React topics checklist

This is a checklist for React topics you can learn.

This list is not intended for going through it in order.

React fundamentals

• [ ] use-cases of React
• [ ] JavaScript basics for React
  • [ ] immutability / data management without mutations
    • [ ] updating properties of objects
    • [ ] adding properties to objects
    • [ ] adding elements to arrays (create)
    • [ ] replacing elements in arrays (update)
    • [ ] removing elements from arrays (delete)
  • [ ] destructuring assignment with arrays and objects
  • [ ] imports and exports: named and default
• [ ] state
  • [ ] using the state hook (useState)
  • [ ] minimal state and derived values
  • [ ] input state
    • [ ] connecting input values to state with value and onChange
    • [ ] handling various input types
    • [ ] handling numeric inputs
  • [ ] importance of immutability in React state
  • [ ] using the state hook with TypeScript
• [ ] JSX
  • [ ] switching from JS to XML mode
  • [ ] switching from XML to JS mode in content
  • [ ] switching from XML to JS mode in element properties
  • [ ] including strings and numbers
  • [ ] setting boolean HTML properties (e.g. disabled)
  • [ ] className
  • [ ] the style property in JSX
  • [ ] whitespace in HTML vs whitespace in JSX
  • [ ] escaping characters like <, &, >
  • [ ] comments
  • [ ] if / else
    • [ ] the operator && in JS and JSX
  • [ ] repeating elements
    • [ ] the key property
  • [ ] adding event handlers in JSX
    • [ ] accessing the event object
    • [ ] onClick={handleEvent} (do) vs onClick={handleEvent()} (don't)
    • [ ] preventDefault
    • [ ] event types in TypeScript
  • [ ] JSX fragments
  • [ ] security and XSS attacks
    • [ ] dangerouslySetInnerHtml
  • [ ] compilation of JSX
• [ ] development environment
  • [ ] formatter (e.g. prettier)
  • [ ] linter (e.g. eslint)
  • [ ] developing with node.js and npm
  • [ ] initializing a React project (e.g. via create-react-app)
  • [ ] development server
  • [ ] production build and deployment
  • [ ] React Developer Tools browser plugin
  • [ ] project file structure: common approaches
• [ ] TypeScript basics for React
  • [ ] TypeScript benefits: autocompletion and error reporting
  • [ ] type declarations for libraries
  • [ ] type inference
  • [ ] declaring types of variables
  • [ ] primitive types: number, string, boolean
  • [ ] array types
  • [ ] object types
    • [ ] optional properties
  • [ ] any
  • [ ] type aliases and interfaces basics
    • [ ] exporting and importing type aliases and interfaces
  • [ ] function signatures and function types
    • [ ] void
  • [ ] type assertions
  • [ ] using (pre-existing) generics (e.g. Array<...>, useState<...>)
  • [ ] union types
• [ ] components
  • [ ] overview: function components and class components
  • [ ] defining components as functions
  • [ ] sharing data between components
  • [ ] overview of existing component libraries
  • [ ] props in custom components
  • [ ] events in custom components
  • [ ] passing content to components
  • [ ] wrapping existing elements in components (e.g. button -> StyledButton)
• [ ] hooks
  • [ ] what are hooks?
  • [ ] rules of hooks
  • [ ] overview of built-in hooks and hooks from libraries
  • [ ] creating custom hooks

React libraries and tools

• [ ] React ecosystem and libraries for different purposes (overview)
  • [ ] component libraries
  • [ ] API queries
  • [ ] routing
  • [ ] styling tools
  • [ ] form handling
  • [ ] state management
• [ ] querying APIs
  • [ ] network requests in JavaScript (fetch, async/await)
  • [ ] API query libraries for React: e.g. react-query
  • [ ] overview: useEffect
• [ ] routing basics
  • [ ] client-side routing
  • [ ] react-router library
    • [ ] defining routes
    • [ ] using links
    • [ ] nested routes
    • [ ] route parameters
    • [ ] navigation from JavaScript
    • [ ] active link style
• [ ] styling tools
  • [ ] tools for external stylesheets
    • [ ] classnames package
    • [ ] CSS modules
    • [ ] SCSS
  • [ ] CSS-in-JS
    • [ ] inline styles
    • [ ] "styled components"
  • [ ] animations
    • [ ] animating appearance / disapperance of elements
• [ ] forms
  • [ ] form validation strategies
  • [ ] libraries for forms: react-hook-form, formik
• [ ] state management overview
  • [ ] libraries: zustand, redux, mobX, ...

Intermediate React

• [ ] state hook in detail
  • [ ] state transformer functions, outdated state
  • [ ] state initialization function
• [ ] class components
  • [ ] defining components as classes
  • [ ] props in class components
  • [ ] state in class components
  • [ ] potential problems with this
• [ ] side effects
  • [ ] purposes of side effects
  • [ ] side effects in class components
  • [ ] side effects in function components
  • [ ] cleaning up side effects
  • [ ] "strict mode" and double invocation of side effects
• [ ] context
  • [ ] "pure providers" and "stateful providers"
  • [ ] stateful context with constate
  • [ ] context with vanilla React
• [ ] refs
  • [ ] refs for storing objects that don't influence the rendering
  • [ ] using refs for avoiding outdated state
  • [ ] the ref property for accessing DOM elements
  • [ ] the ref property in custom components

Performance optimization

• [ ] React devtools and performance
• [ ] memoization
• [ ] memoization of expensive calculations
• [ ] skipping unneeded rerenders
• [ ] virtual DOM
• [ ] lazy-loading components
• [ ] reducing bundle size

Testing

• [ ] Testing in JavaScript
  • [ ] assertions
  • [ ] test runners: e.g. Jest, node:test
  • [ ] mocking in JavaScript, mocking network responses
  • [ ] end-to-end testing libraries: e.g. cypress, playwright
• [ ] Testing in React: react-testing-library

State management: intermediate

• [ ] concept: actions
• [ ] concept: reducers
• [ ] reducer hook
• [ ] overview: Redux
• [ ] immutability helper libraries (immer.js, immutable.js)

Advanced concepts and patterns

• [ ] portals
• [ ] error boundaries
• [ ] higher-order components
• [ ] render props

Other topics

• [ ] user authentication
• [ ] internationalization
• [ ] pre-rendering and next.js
• [ ] Redux in depth
• [ ] React and GraphQL / Apollo
• [ ] React Native
• [ ] PWAs