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)
- Initialise with a value with
- Identify when to use props or state