πŸ§‘πŸΏβ€ prep

πŸ“¦ Data flows down πŸ”—


          πŸ“¦ Data flows down
Picture by Maggie Appleton

🦻🏼 Events bubble up πŸ”—


          🦻🏼 Events bubble up
Picture by Maggie Appleton

🦻🏼 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 πŸ”—


          🚦 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

React Learn

🧠 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 πŸ”—

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.

Brainstorming technique

🎯 Goal: To get familiar with the Brainstorming technique to solve problems. (10 minutes)

  • Watch this video, which explains the Brainstorming technique 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.