Table Of ContentFullstack React
The Complete Guide to ReactJS and Friends
Written by Anthony Accomazzo, Nate Murray, Ari Lerner, Clay
Allsopp, David Guttman, and Tyler McGinnis
Technical Advisor: Sophia Shoemaker
Contributors: Seulgi Kim
© 2020 \newline by Fullstack.io
All rights reserved. No portion of the book manuscript may be reproduced,
stored in a retrieval system, or transmitted in any form or by any means beyond
the number of purchased copies, except for a single backup or archival copy. The
code may be used freely in your projects, commercial or otherwise.
The authors and publisher have taken care in preparation of this book, but make
no expressed or implied warranty of any kind and assume no responsibility for
errors or omissions. No liability is assumed for incidental or consequential
damagers in connection with or arising out of the use of the information or
programs container herein.
Published by \newline (formerly Fullstack.io).
Contents
BookRevision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
UpdatedJanuary13th,2020. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
JoinourOfficialCommunityDiscord . . . . . . . . . . . . . . . . . . . . . . 1
BugReports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
BenotifiedofupdatesviaTwitter . . . . . . . . . . . . . . . . . . . . . . . . . 1
We’dlovetohearfromyou! . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
HowtoGettheMostOutofThisBook . . . . . . . . . . . . . . . . . . . . . . . 1
Overview. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
RunningCodeExamples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Projectsetups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
CodeBlocksandContext . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
CodeBlockNumbering . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
GettingHelp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
EmailingUs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Getexcited . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Part I
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
YourfirstReactWebApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
BuildingProductHunt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Settingupyourdevelopmentenvironment . . . . . . . . . . . . . . . . . . . 9
Codeeditor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Node.jsandnpm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
InstallGit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
CONTENTS
Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
SpecialinstructionforWindowsusers . . . . . . . . . . . . . . . . . . . . . . 11
EnsureIISisinstalled . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
JavaScriptES6/ES7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
SampleCode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Previewingtheapplication . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Preparetheapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
What’sacomponent? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Ourfirstcomponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Thedeveloperconsole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Babel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
ReactDOM.render() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
BuildingProduct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
MakingProductdata-driven . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Thedatamodel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Usingprops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Renderingmultipleproducts . . . . . . . . . . . . . . . . . . . . . . . . . 39
Reactthevote(yourapp’sfirstinteraction) . . . . . . . . . . . . . . . . . . . 44
Propagatingtheevent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Bindingcustomcomponentmethods . . . . . . . . . . . . . . . . . . . . 48
Usingstate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Settingstatewiththis.setState() . . . . . . . . . . . . . . . . . . . . . 54
Updatingstateandimmutability . . . . . . . . . . . . . . . . . . . . . . . . . 56
RefactoringwiththeBabelplugintransform-class-properties . . . . . . 63
Babelpluginsandpresets . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Propertyinitializers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
RefactoringProduct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
RefactoringProductList . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Congratulations! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Atime-loggingapp. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Previewingtheapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
CONTENTS
Preparetheapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Breakingtheappintocomponents . . . . . . . . . . . . . . . . . . . . . . . . 77
ThestepsforbuildingReactappsfromscratch . . . . . . . . . . . . . . . . . 85
Step2:Buildastaticversionoftheapp . . . . . . . . . . . . . . . . . . . . . 87
TimersDashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
EditableTimer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
TimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
ToggleableTimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Timer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Rendertheapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Tryitout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Step3:Determinewhatshouldbestateful . . . . . . . . . . . . . . . . . . . . 96
Statecriteria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Applyingthecriteria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Step4:Determineinwhichcomponenteachpieceofstateshouldlive . . 98
Thelistoftimersandpropertiesofeachtimer . . . . . . . . . . . . . . 99
Whetherornottheeditformofatimerisopen . . . . . . . . . . . . . 99
Visibilityofthecreateform . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Step5:Hard-codeinitialstates . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
AddingstatetoTimersDashboard . . . . . . . . . . . . . . . . . . . . . . 100
ReceivingpropsinEditableTimerList . . . . . . . . . . . . . . . . . . . 102
Propsvs.state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
AddingstatetoEditableTimer . . . . . . . . . . . . . . . . . . . . . . . . 104
Timerremainsstateless . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
AddingstatetoToggleableTimerForm . . . . . . . . . . . . . . . . . . . 105
AddingstatetoTimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Step6:Addinversedataflow . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
TimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
ToggleableTimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
TimersDashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Updatingtimers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
AddingeditabilitytoTimer . . . . . . . . . . . . . . . . . . . . . . . . . . 118
UpdatingEditableTimer . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
UpdatingEditableTimerList. . . . . . . . . . . . . . . . . . . . . . . . . 120
DefiningonEditFormSubmit()inTimersDashboard . . . . . . . . . . . 121
Deletingtimers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
CONTENTS
AddingtheeventhandlertoTimer . . . . . . . . . . . . . . . . . . . . . 124
RoutingthroughEditableTimer . . . . . . . . . . . . . . . . . . . . . . . 125
RoutingthroughEditableTimerList . . . . . . . . . . . . . . . . . . . . 126
ImplementingthedeletefunctioninTimersDashboard . . . . . . . . . 127
Addingtimingfunctionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
AddingaforceUpdate()intervaltoTimer . . . . . . . . . . . . . . . . . 129
Tryitout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Addstartandstopfunctionality . . . . . . . . . . . . . . . . . . . . . . . . . . 131
AddtimeractioneventstoTimer . . . . . . . . . . . . . . . . . . . . . . 131
CreateTimerActionButton . . . . . . . . . . . . . . . . . . . . . . . . . . 133
RuntheeventsthroughEditableTimerandEditableTimerList . . . 134
Tryitout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Methodologyreview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Components&Servers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
server.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
TheServerAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
text/htmlendpoint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
JSONendpoints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
PlayingwiththeAPI. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Loadingstatefromtheserver . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Tryitout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Fetch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Sendingstartsandstopstotheserver . . . . . . . . . . . . . . . . . . . . . . 156
Sendingcreates,updates,anddeletestotheserver. . . . . . . . . . . . . . . 159
Giveitaspin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Nextup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
JSXandtheVirtualDOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
ReactUsesaVirtualDOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
WhyNotModifytheActualDOM?. . . . . . . . . . . . . . . . . . . . . . . . 162
WhatisaVirtualDOM? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
VirtualDOMPieces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
CONTENTS
ReactElement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
ExperimentingwithReactElement . . . . . . . . . . . . . . . . . . . . . 165
RenderingOurReactElement . . . . . . . . . . . . . . . . . . . . . . . . . 167
AddingText(withchildren) . . . . . . . . . . . . . . . . . . . . . . . . . 169
ReactDOM.render() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
JSXCreatesElements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
JSXAttributeExpressions . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
JSXConditionalChildExpressions . . . . . . . . . . . . . . . . . . . . . 174
JSXBooleanAttributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
JSXComments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
JSXSpreadSyntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
JSXGotchas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
JSXSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
AdvancedComponentConfigurationwithprops,state,andchildren . . . 182
Intro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Howtousethischapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
CreatingComponents-ES6ClassesorFunctionalComponents. . . . 184
render()ReturnsaReactElementTree . . . . . . . . . . . . . . . . . . . 185
GettingDataintorender() . . . . . . . . . . . . . . . . . . . . . . . . . . 186
propsaretheparameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
PropTypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
DefaultpropswithgetDefaultProps() . . . . . . . . . . . . . . . . . . . . . 190
Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Defaultvalue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Multiplecontexts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Usingstate:BuildingaCustomRadioButton . . . . . . . . . . . . . . 196
Statefulcomponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Stateupdatesthatdependonthecurrentstate . . . . . . . . . . . . . . 205
ThinkingAboutState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
StatelessComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
SwitchingtoStateless . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
CONTENTS
StatelessEncouragesReuse . . . . . . . . . . . . . . . . . . . . . . . . . . 212
TalkingtoChildrenComponentswithprops.children. . . . . . . . . . . . 212
React.Children.map()&React.Children.forEach() . . . . . . . . . 215
React.Children.toArray() . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Forms101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
TheBasicButton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
EventsandEventHandlers . . . . . . . . . . . . . . . . . . . . . . . . . . 223
BacktotheButton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
TextInput . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
AccessingUserInputWithrefs . . . . . . . . . . . . . . . . . . . . . . . 227
UsingUserInput . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Uncontrolledvs.ControlledComponents . . . . . . . . . . . . . . . . . 233
AccessingUserInputWithstate . . . . . . . . . . . . . . . . . . . . . . 234
MultipleFields. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
OnValidation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
AddingValidationtoOurApp . . . . . . . . . . . . . . . . . . . . . . . . 243
CreatingtheFieldComponent . . . . . . . . . . . . . . . . . . . . . . . . 248
UsingournewFieldComponent. . . . . . . . . . . . . . . . . . . . . . . 252
RemoteData . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
BuildingtheCustomComponent . . . . . . . . . . . . . . . . . . . . . . 260
AddingCourseSelect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
SeparationofViewandState . . . . . . . . . . . . . . . . . . . . . . . . . 270
AsyncPersistence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
FormComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
ConnecttheStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
FormModules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
formsy-react . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
react-input-enhancements . . . . . . . . . . . . . . . . . . . . . . . . . . 294
tcomb-form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
winterfell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
CONTENTS
react-redux-form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
UsingWebpackwithCreateReactApp . . . . . . . . . . . . . . . . . . . . . . . 296
JavaScriptmodules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
CreateReactApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
ExploringCreateReactApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
public/index.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
package.json . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
src/ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
index.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Bootingtheapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Webpackbasics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Makingmodificationstothesampleapp . . . . . . . . . . . . . . . . . . . . . 318
Hotreloading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Auto-reloading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Creatingaproductionbuild . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
Ejecting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Buckleup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
UsingCreateReactAppwithanAPIserver. . . . . . . . . . . . . . . . . . . 328
Thecompletedapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Howtheappisorganized . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Theserver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Client. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
Concurrently. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
UsingtheWebpackdevelopmentproxy . . . . . . . . . . . . . . . . . . 341
Webpackatlarge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
WhentouseWebpack/CreateReactApp . . . . . . . . . . . . . . . . . 343
UnitTesting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Writingtestswithoutaframework . . . . . . . . . . . . . . . . . . . . . . . . 345
PreparingModash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Writingthefirstspec . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
TheassertEqual()function . . . . . . . . . . . . . . . . . . . . . . . . . 352
WhatisJest? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
UsingJest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
expect() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
CONTENTS
ThefirstJesttestforModash . . . . . . . . . . . . . . . . . . . . . . . . . 361
Theothertruncate()spec . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Therestofthespecs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
TestingstrategiesforReactapplications . . . . . . . . . . . . . . . . . . . . . 366
IntegrationvsUnitTesting . . . . . . . . . . . . . . . . . . . . . . . . . . 366
Shallowrendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Enzyme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
TestingabasicReactcomponentwithEnzyme . . . . . . . . . . . . . . . . . 369
Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
TheAppcomponent. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
ThefirstspecforApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
MoreassertionsforApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
UsingbeforeEach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Simulatingachange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Clearingtheinputfield . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394
Simulatingaformsubmission . . . . . . . . . . . . . . . . . . . . . . . . 396
Writingtestsforthefoodlookupapp . . . . . . . . . . . . . . . . . . . . . . . 405
FoodSearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
ExploringFoodSearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
WritingFoodSearch.test.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Ininitialstate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
Auserhastypedavalueintothesearchfield . . . . . . . . . . . . . . . 421
MockingwithJest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426
MockingClient . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
TheAPIreturnsresults . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Theuserclicksonafooditem . . . . . . . . . . . . . . . . . . . . . . . . 441
TheAPIreturnsemptyresultset . . . . . . . . . . . . . . . . . . . . . . 447
Furtherreading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
What’sinaURL? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
ReactRouter’scorecomponents . . . . . . . . . . . . . . . . . . . . . . . 458
Buildingthecomponentsof react-router . . . . . . . . . . . . . . . . . . . 459
Thecompletedapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459
BuildingRoute. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461
BuildingLink . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
