Skip to main content

Instructor Notes

Questions and Help​

We highly recommend joining the relevant Slack Channel for this module. In this channel you can ask questions, get advice from previous teachers and discuss lesson content.

cyf-module-react

For general Syllabus feedback and help you can post in cyf-syllabus

Resources​

Solutions​

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 trainees really do understand it
  • Passing event handler function references
    • The concept trips up a lot of trainees - 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 trainees

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 trainees 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 trainees to miss
  • We cover the problems with using a global variable, so hopefully that is enough to prevent the trainees 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​

Exercise solutions​