🧑🏾‍💻 prep

🔖
  1. 📦 Data flows down
  2. 🦻🏼 Events bubble up
  3. 🦻🏼 Handling Events
  4. 🚦 Some components have state
  5. 🚦 Lift state up to a common parent
  6. 🚦 We don't always need state
  7. 🚦 State
  8. 🪞 Re-rendering
  9. Prep Problem Solving

📦 Data flows down 🔗

📦 Data flows down
Picture by Maggie Appleton

🦻🏼 Events bubble up 🔗

🦻🏼 Events bubble up
Picture by Maggie Appleton

🦻🏼 Handling events

Learning Objectives

narrative

Complete 🧑🏾‍🎓 Responding to Events

🧠 Think back to JS2 where you learned how to handle Events

question

A: By passing the handler function as a prop, like onClick={handleClick}.

A: Accidentally calling the function (onClick={handleClick()}) instead of passing it.

🚦 Some components have state 🔗

🚦 Some components have state
Components are like a fleet of spaceships with distributed leadership. Some ships have a state commander inside. ~ Maggie Appleton

🚦 Lift state up to a common parent 🔗

🚦 Lift state up to a common parent
Picture by Maggie Appleton

🚦 We don't always need state 🔗

🚦 We don’t always need state
We only need state if our component changes after launch. Picture by Maggie Appleton

🚦 State

Learning Objectives

narrative

Complete 🧑🏾‍🎓State: A Component’s Memory

🧠 Search for “state” in the curriculum

Fun fact, you first met the concept of state in CYF Blocks

question

A: State lets components remember information between renders.

A: Employ the useState Hook to create a state variable and a setter function.

🪞 Re-Rendering

Learning Objectives

narrative

Complete 🧑🏾‍🎓 Render and Commit

question

A: Triggering a render, rendering the component, and committing to the DOM

A: Because it should not change any objects or variables and always produce the same output for the same inputs.

Prep Problem Solving

Learning 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.