ReactBeginner
React — Basics
Build real React components and see a live preview, right in your browser.
20 chapters81 lessons173 challenges
Course curriculum
Chapter 1: Components and JSX
- ▸Components and JSX
- ▸Props
- ▸Lists and keys
- ▸State and events
Chapter 2: Props and composition
- ▸Passing props
- ▸Destructuring props
- ▸children
- ▸Default values
- ▸Props are read-only
Chapter 3: Conditional rendering
- ▸The ternary operator
- ▸The && operator (and the 0 trap)
- ▸Computing before the return
- ▸Multiple conditions
Chapter 4: Lists and keys
- ▸map to generate elements
- ▸The key prop
- ▸Filtering and transforming
- ▸Aggregating data
Chapter 5: State with useState
- ▸What state is (useState)
- ▸Reading and showing state
- ▸Updating state
- ▸Derived state
Chapter 6: Events and interaction
- ▸Handling events
- ▸Updating state in events
- ▸Updates based on the previous
- ▸Communicating to the parent
Chapter 7: useEffect
- ▸What an effect is (useEffect)
- ▸The dependency array
- ▸Cleanup
- ▸Common useEffect mistakes
Chapter 8: Forms and controlled inputs
- ▸Controlled inputs
- ▸Handling multiple fields
- ▸onSubmit and preventDefault
- ▸Validation
Chapter 9: Communication between components
- ▸The shared state problem
- ▸Lifting state up
- ▸Data down, events up
- ▸Single source of truth
Chapter 10: useRef and the DOM
- ▸What useRef is
- ▸Accessing the DOM
- ▸Mutable values without re-render
- ▸useRef vs useState
Chapter 11: useContext
- ▸The prop drilling problem
- ▸Creating a Context
- ▸Consuming with useContext
- ▸When to use Context
Chapter 12: useReducer
- ▸What useReducer is
- ▸Reducer and action
- ▸dispatch
- ▸useReducer vs useState
Chapter 13: Custom hooks
- ▸What custom hooks are
- ▸The rules of hooks
- ▸A useful custom hook
- ▸Best practices
Chapter 14: Performance and memoization
- ▸When re-renders happen
- ▸React.memo
- ▸useMemo
- ▸useCallback
Chapter 15: Component patterns
- ▸Composition
- ▸Controlled vs uncontrolled
- ▸Render props
- ▸Higher-Order Components (HOC)
Chapter 16: Data fetching
- ▸Loading data with useEffect
- ▸States: loading, error, data
- ▸Cleanup and race conditions
- ▸Abstracting the fetch
Chapter 17: Routing
- ▸Client-side routing
- ▸Routes, Route and Link
- ▸Parameters and navigation
- ▸Layouts and nested routes
Chapter 18: Component testing
- ▸Why test components
- ▸React Testing Library
- ▸Queries and interactions
- ▸Testing behavior
Chapter 19: TypeScript and React
- ▸Why TypeScript in React
- ▸Typing props
- ▸Typing state and hooks
- ▸Typed events and children
Chapter 20: Best practices and senior pitfalls
- ▸Organizing components
- ▸Where to put state
- ▸Common pitfalls
- ▸Quality and accessibility
Ready to level up?
Create a free account and start now: earn XP on every challenge and climb the leaderboard.