Learning Objectives

React Week 2#

Event Handlers#

Able to handle user interaction via events.

  • Explain why calling event handlers in JSX (e.g. onClick={handleClick()}) is incorrect
  • Able to pass functions to event handlers
    • Able to log to the console when a button is clicked
    • Able to pass as props

Re-rendering components#

Explain that React handles updating the DOM when components are re-rendered.

  • Explain that this makes code more understandable, as we don't need to worry about managing the DOM

State#

Create a simple counter component, demonstrating knowledge of React state.

  • Able to import useState from the React package
  • Able to use state variables
    • Initialise with a value with useState(initialValue)
    • Destructure state variable into [stateValue, setStateValue]
    • Render state variables to the view
    • Update with a new value with setStateValue(newValue)
  • Identify when to use props or state