📦 Data flows down 🔗
🦻🏼 Events bubble up 🔗
🦻🏼 Handling events
Learning Objectives
React Learn
Complete 🧑🏾🎓 Responding to Events
🧠 Think back to JS2 where you learned how to handle Events
Check your understanding
Q: How do you attach an event handler to a JSX element in React?
A: By passing the handler function as a prop, like onClick={handleClick}.
Q: What is a common mistake when attaching event handlers in JSX?
A: Accidentally calling the function (onClick={handleClick()}) instead of passing it.
🚦 Some components have state 🔗
🚦 Lift state up to a common parent 🔗
🚦 We don't always need state 🔗
🚦 State
Learning Objectives
React Learn
Complete 🧑🏾🎓State: A Component’s Memory
🧠 Search for “state” in the curriculum
Fun fact, you first met the concept of state in CYF Blocks
Check your understanding
Q: What is the role of state in a React component?
A: State lets components remember information between renders.
Q: How do you use state in a React component?
A: Employ the useState Hook to create a state variable and a setter function.
🪞 Re-Rendering
Learning Objectives
React Learn
Complete 🧑🏾🎓 Render and Commit
Check your understanding
Q: What are the three steps in displaying a React component?
A: Triggering a render, rendering the component, and committing to the DOM
Q: Why is rendering considered a pure calculation in React?
A: Because it should not change any objects or variables and always produce the same output for the same inputs.
Prep Problem Solving
🤙🏽 FeedbackLearning Objectives
Introduction
Problem-solving skills are skills that enable people to handle unexpected situations or difficult challenges at work. This is an introduction to a few techniques on how to approach problems and solve them.
The IDEA Module
🎯 Goal: To get familiar with the IDEA model to solve problems. (10 minutes)
- Watch this video which explains the IDEA model to solve problems.
Design Thinking
🎯 Goal: To become familiar with the Design Thinking process to solve problems. (10 minutes)
- Watch this video, which explains the Design Thinking process to solve problems.