CONTENTS
Updating state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Congratulations! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
A time-logging app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Previewing the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Prepare the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Breaking the app into components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
The steps for building React apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Step 2: Build a static version of the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
TimersDashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
EditableTimer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
TimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
ToggleableTimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Timer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Render the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Step 3: Determine what should be stateful . . . . . . . . . . . . . . . . . . . . . . . . . . 57
State criteria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Applying the criteria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Step 4: Determine in which component each piece of state should live . . . . . . . . . . . 59
The list of timers and properties of each timer . . . . . . . . . . . . . . . . . . . . . . 59
Whether or not the edit form of a timer is open . . . . . . . . . . . . . . . . . . . . . 60
Visibility of the create form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Step 5: Hard-code initial states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Adding state to TimersDashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Receiving props in EditableTimerList . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Props vs. state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Adding state to EditableTimer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Timer and TimerForm remain stateless . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Adding state to ToggleableTimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Step 6: Add inverse data flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
TimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
ToggleableTimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
TimersDashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Updating timers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Adding editability to Timer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Updating EditableTimer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Updating EditableTimerList . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Defining onEditFormSubmit() in TimersDashboard . . . . . . . . . . . . . . . . . . . 74
Deleting timers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Adding the event handler to Timer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
