CONTENTS
Previewing the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Prepare the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
What’s a component? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Our first component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
The developer console . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Babel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
ReactDOM.render() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Building
Product
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Making Product data-driven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
The data model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Using props . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Rendering multiple products . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
React the vote (your app’s first interaction) . . . . . . . . . . . . . . . . . . . . . . . . . 37
Propagating the event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Binding custom component methods . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Using state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Setting state with this.setState() . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Updating state and immutability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Refactoring with the Babel plugin transform-class-properties . . . . . . . . . . . . . 51
Babel plugins and presets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Property initializers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Refactoring Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Refactoring ProductList . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Congratulations! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
A time-logging app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Previewing the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Prepare the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Breaking the app into components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
The steps for building React apps from scratch . . . . . . . . . . . . . . . . . . . . . . . . 69
Step 2: Build a static version of the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
TimersDashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
EditableTimer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
TimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
ToggleableTimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Timer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Render the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Step 3: Determine what should be stateful . . . . . . . . . . . . . . . . . . . . . . . . . . 79
State criteria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79