A checklist for learning React - Fork it and start ticking off topics!
- 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
- immutability / data management without mutations
- 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
- the operator
- repeating elements
- the key property
- adding event handlers in JSX
- accessing the event object
-
onClick={handleEvent}
(do) vsonClick={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
- 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 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
- tools for external stylesheets
- forms
- form validation strategies
- libraries for forms: react-hook-form, formik
- state management overview
- libraries: zustand, redux, mobX, ...
- 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
- React devtools and performance
- memoization
- memoization of expensive calculations
- skipping unneeded rerenders
- virtual DOM
- lazy-loading components
- reducing bundle size
- 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
- concept: actions
- concept: reducers
- reducer hook
- overview: Redux
- immutability helper libraries (immer.js, immutable.js)
- portals
- error boundaries
- higher-order components
- render props
- user authentication
- internationalization
- pre-rendering and next.js
- Redux in depth
- React and GraphQL / Apollo
- React Native
- PWAs