Week 5: Basic Interactivity

Expectations

• Attend class and participate in the review of this week's content
• Start working on Week 5 Assignment

View Source Code on GitHub (opens in a new tab)

Slides

Lab Activity: State and Events Challenge Set

These are a set of functionalities that are very useful to practice programming with state and events in react. Today's lab will be mostly a solo activity (though you're encouraged to discuss and collaborate when it's helpful to you). After about an hour and a half I will ask that members of the class volunteer to demonstrate their solutions to 1 of each of the challenges (students will be picked if there are not enough volunteers).

1. Setup

• Copy the contents of the starter.js (opens in a new tab) file into a new route in your practice repo.
• (optional) split the data arrays out into a data.js file

2. Review Problems and Pseudocode

• There are a set of requirements to be implemented that go from easy to challenging (more or less)
• Consider the technical requirements of each problem and outline how you might want to solve them
• (optional) if it suites you better, work through them 1 at a time from start to finish

3. Implement solution(s)

• Start with the approach that you outlined in your pseudocode
• Consider what values need to be stored in state and what the events need to return / affect
• Refer to Ashlyn's Cheat Sheet (opens in a new tab) as needed
• Use console.log and alert to test what's happening when things don't work

4. Outline an explanation of your code

• Do this for at least 1 of the problems.
• Imagine that you needed to explain the code to a colleague or someone asking for help

Useful Questions to Frame your Explanation

• What problem were you solving and what was the expected behavior?
• Which React concepts did you use (state, event handlers, conditional rendering, etc.) and why?
• Walk through the key parts of your code - what happens when the user interacts with it?
• What was tricky and how did you work through it?
• What alternative approaches could work here, and what are the tradeoffs?

5. Class Presentations

• Working from simpler to more complex, volunteers & selected students will walk the class through their code
• Students observing are encouraged to ask questions

Lab Assignment

The rest of the class will be allocated to working on the weekly assignment.