Functional Components

step one

Talk through the RedSquare, BlueSquare and GreenSquare components. Mention that components should have a capital letter. Talk about functional components needing to return jsx with a parent tag.

step two

Replace these components with the Square component, talk about the props object. Talk about how if you want to pass something that isnt a string to props you need to put it in curly brackets.

Class Components

step one

talk through the lemon component. mention:

• access props using this.props
• access state using this.state
• destructuring props and state
• onClick function for the button
• how to update the state