Mentor's Notes - React 2

Resources

• Quiz - React Week 2 - 28/05/2020
  • Created by Chris Owen

Solutions

• PokeDex In-Class - Exercise Solution - 05/06/2020
  • Created by London and Ali Smith

Notes for Mentors

Handling Events

• Function references vs function calls is a very common source of confusion
  • It is worth recapping again to ensure that students really do understand it
• Passing event handler function references
  • The concept trips up a lot of students - will try to immediately call the function when passing to an event handler (e.g. onClick={this.foo()})
• Passing functions as props
  • This concept isn't really that much different from the section above, but passing across components does often confuse students

Re-Rendering Components

• The goal of this section is to demonstrate React re-rendering but without using state
  • i.e. showing that React will call component functions again to get updated JSX after props/state changes
  • Teaching separately allows us to emphasise that setting state has 2 jobs: updating the state and triggering React to re-render
  • It is also convenient to (briefly) discuss how the virtual DOM is efficient
• Re-rendering demo
  • Focus on the Counter component primarily, in particular the console.log
  • The code in index.js is just a way of forcing a re-render without using state. But we don't really want students to learn the bad habits here (we want them to ultimately learn state), so they are hidden away.

State

• This section takes a bit of a risk - it deliberately shows the wrong way trying to do state, then refactors to fix it
• Before fixing the problem, something to emphasise is the moment when we start using the virtual DOM for the first time
  • When we trigger a manual re-render to ReactDOM.render()
  • But we are updating the DOM here - we mentioned in lesson 1 that this was hard, and now we've got an easy way of updating it. This is the true power of React
  • The demo is not very impressive, so it's easy for the students to miss
• We cover the problems with using a global variable, so hopefully that is enough to prevent the students copy/pasting the wrong way
  • Ensure that you emphasise this is the wrong way to do state
• Demonstrate the app with multiple counters
  • Shows that each components remembers their own state separate to other components
• When to use props or state?
  • My rule of thumb: use props until you need it to change over time, then switch to state
• Container components
  • To be honest I kept this in here as a hold over from previous lessons
  • Arguably it's less relevant recently in React
  • If you're short on time then it can be skipped

Interactive Example Index

• Recap
• Function reference vs function call recap
• Event Handlers
• Passing Functions as Props
• Re-Rendering Components
• Component variables resetting on re-render
• Importing useState Hook
• Initialising and rendering useState variables
• Using array index syntax
• Using array destructuring
• Updating state
• Don't Mutate State
• Multiple state variables
• When to Use Props or State

Exercise solutions

• BestPokemonFetcher exercise (completed)