App Lab — Part 6
React Events and State
Read the following articles and follow the examples:
Hints: Passing Information
Take a look at the Codepen, where we implement a simple button component that increments a counter component.
In this example, we have a button that increments a counter. Our app has a total of 3 components (and some CSS because I’m tired of things looking ugly)
1. <App />:
buttonWasClicked()—our event handler, one task, update (
this.setState) the key value of
countin state by 1
render()— return a div with a className of App, render two components (
<Counter />) and pass in
on...eventwith a prop to the
2. <Button /> — consume the
this.props.onClick prop passed down to it from
3. <Counter /> — consume the
this.props.count prop passed down to it from
For next Wednesday lab, create a simple interface, with two buttons. One that increments a counter, and another that decrements the counter. Style your buttons with some CSS.
Push your code to GitHub the #lab-9 channel by Wednesday, November 14.