Accomazzo A., Murray N., Lerner A. et al. - Fullstack React: The Complete Guide to ReactJS and Friends (Revision 42) [2021, PDF/EPUB/MOBI, ENG] + code

Примеры страниц

Оглавление

Part I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Your first React Web Application . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Building Product Hunt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Setting up your development environment . . . . . . . . . . . . . . . . . . . 9
Code editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Node.js and npm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Install Git . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Special instruction for Windows users . . . . . . . . . . . . . . . . . . . . . . 11
Ensure IIS is installed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
JavaScript ES6/ES7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Sample Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Previewing the application . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Prepare the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
What’s a component? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Our first component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
The developer console . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Babel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
ReactDOM.render() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Building Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Making Product data-driven . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
The data model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Using props . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Rendering multiple products . . . . . . . . . . . . . . . . . . . . . . . . . 39
React the vote (your app’s first interaction) . . . . . . . . . . . . . . . . . . . 44
Propagating the event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Binding custom component methods . . . . . . . . . . . . . . . . . . . . 48
Using state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Setting state with this.setState() . . . . . . . . . . . . . . . . . . . . . 54
Updating state and immutability . . . . . . . . . . . . . . . . . . . . . . . . . 56
Refactoring with the Babel plugin transform-class-properties . . . . . . 63
Babel plugins and presets . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Property initializers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Refactoring Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Refactoring ProductList . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Congratulations! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
A time-logging app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Previewing the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Prepare the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Breaking the app into components . . . . . . . . . . . . . . . . . . . . . . . . 77
The steps for building React apps from scratch . . . . . . . . . . . . . . . . . 85
Step 2: Build a static version of the app . . . . . . . . . . . . . . . . . . . . . 87
TimersDashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
EditableTimer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
TimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
ToggleableTimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Timer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Render the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Step 3: Determine what should be stateful . . . . . . . . . . . . . . . . . . . . 96
State criteria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Applying the criteria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Step 4: Determine in which component each piece of state should live . . 98
The list of timers and properties of each timer . . . . . . . . . . . . . . 99
Whether or not the edit form of a timer is open . . . . . . . . . . . . . 99
Visibility of the create form . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Step 5: Hard-code initial states . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Adding state to TimersDashboard . . . . . . . . . . . . . . . . . . . . . . 100
Receiving props in EditableTimerList . . . . . . . . . . . . . . . . . . . 102
Props vs. state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Adding state to EditableTimer . . . . . . . . . . . . . . . . . . . . . . . . 104
Timer remains stateless . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Adding state to ToggleableTimerForm . . . . . . . . . . . . . . . . . . . 105
Adding state to TimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Step 6: Add inverse data flow . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
TimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
ToggleableTimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
TimersDashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Updating timers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Adding editability to Timer . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Updating EditableTimer . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Updating EditableTimerList . . . . . . . . . . . . . . . . . . . . . . . . . 120
Defining onEditFormSubmit() in TimersDashboard . . . . . . . . . . . 121
Deleting timers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Adding the event handler to Timer . . . . . . . . . . . . . . . . . . . . . 124
Routing through EditableTimer . . . . . . . . . . . . . . . . . . . . . . . 125
Routing through EditableTimerList . . . . . . . . . . . . . . . . . . . . 126
Implementing the delete function in TimersDashboard . . . . . . . . . 127
Adding timing functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Adding a forceUpdate() interval to Timer . . . . . . . . . . . . . . . . . 129
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Add start and stop functionality . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Add timer action events to Timer . . . . . . . . . . . . . . . . . . . . . . 131
Create TimerActionButton . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Run the events through EditableTimer and EditableTimerList . . . 134
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Methodology review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Components & Servers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
server.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
The Server API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
text/html endpoint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
JSON endpoints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Playing with the API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Loading state from the server . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Fetch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Sending starts and stops to the server . . . . . . . . . . . . . . . . . . . . . . 156
Sending creates, updates, and deletes to the server . . . . . . . . . . . . . . . 159
Give it a spin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Next up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
JSX and the Virtual DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
React Uses a Virtual DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Why Not Modify the Actual DOM? . . . . . . . . . . . . . . . . . . . . . . . . 162
What is a Virtual DOM? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Virtual DOM Pieces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
ReactElement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Experimenting with ReactElement . . . . . . . . . . . . . . . . . . . . . 165
Rendering Our ReactElement . . . . . . . . . . . . . . . . . . . . . . . . . 167
Adding Text (with children) . . . . . . . . . . . . . . . . . . . . . . . . . 169
ReactDOM.render() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
JSX Creates Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
JSX Attribute Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
JSX Conditional Child Expressions . . . . . . . . . . . . . . . . . . . . . 175
JSX Boolean Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
JSX Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
JSX Spread Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
JSX Gotchas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
JSX Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Advanced Component Configuration with props, state, and children . . . 183
Intro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
How to use this chapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Creating Components - ES6 Classes or Functional Components . . . . 185
render() Returns a ReactElement Tree . . . . . . . . . . . . . . . . . . . 186
Getting Data into render() . . . . . . . . . . . . . . . . . . . . . . . . . . 187
props are the parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
PropTypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Default props with getDefaultProps() . . . . . . . . . . . . . . . . . . . . . 191
Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Default value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Multiple contexts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Using state: Building a Custom Radio Button . . . . . . . . . . . . . . 197
Stateful components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
State updates that depend on the current state . . . . . . . . . . . . . . 206
Thinking About State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Stateless Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Switching to Stateless . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Stateless Encourages Reuse . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Talking to Children Components with props.children . . . . . . . . . . . . 213
React.Children.map() & React.Children.forEach() . . . . . . . . . 216
React.Children.toArray() . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Forms 101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
The Basic Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Events and Event Handlers . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Back to the Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Text Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Accessing User Input With refs . . . . . . . . . . . . . . . . . . . . . . . 228
Using User Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Uncontrolled vs. Controlled Components . . . . . . . . . . . . . . . . . 234
Accessing User Input With state . . . . . . . . . . . . . . . . . . . . . . 235
Multiple Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
On Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Adding Validation to Our App . . . . . . . . . . . . . . . . . . . . . . . . 244
Creating the Field Component . . . . . . . . . . . . . . . . . . . . . . . . 249
Using our new Field Component . . . . . . . . . . . . . . . . . . . . . . . 253
Remote Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Building the Custom Component . . . . . . . . . . . . . . . . . . . . . . 261
Adding CourseSelect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Separation of View and State . . . . . . . . . . . . . . . . . . . . . . . . . 271
Async Persistence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Form Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Connect the Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Form Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
formsy-react . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
react-input-enhancements . . . . . . . . . . . . . . . . . . . . . . . . . . 295
tcomb-form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
winterfell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
react-redux-form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Using Webpack with Create React App . . . . . . . . . . . . . . . . . . . . . . . 297
JavaScript modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Create React App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Exploring Create React App . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
public/index.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
package.json . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
src/ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
index.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Booting the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Webpack basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Making modifications to the sample app . . . . . . . . . . . . . . . . . . . . . 320
Hot reloading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Auto-reloading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Creating a production build . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Ejecting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
Buckle up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Using Create React App with an API server . . . . . . . . . . . . . . . . . . . 330
The completed app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
How the app is organized . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
The server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Concurrently . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Using the Webpack development proxy . . . . . . . . . . . . . . . . . . 343
Webpack at large . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
When to use Webpack/Create React App . . . . . . . . . . . . . . . . . 345
Unit Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Writing tests without a framework . . . . . . . . . . . . . . . . . . . . . . . . 347
Preparing Modash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Writing the first spec . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
The assertEqual() function . . . . . . . . . . . . . . . . . . . . . . . . . 354
What is Jest? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Using Jest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
expect() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
The first Jest test for Modash . . . . . . . . . . . . . . . . . . . . . . . . . 363
The other truncate() spec . . . . . . . . . . . . . . . . . . . . . . . . . . 365
The rest of the specs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
Testing strategies for React applications . . . . . . . . . . . . . . . . . . . . . 368
Integration vs Unit Testing . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Shallow rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
Enzyme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
Testing a basic React component with Enzyme . . . . . . . . . . . . . . . . . 371
Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
The App component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
The first spec for App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
More assertions for App . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
Using beforeEach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Simulating a change . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Clearing the input field . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
Simulating a form submission . . . . . . . . . . . . . . . . . . . . . . . . 398
Writing tests for the food lookup app . . . . . . . . . . . . . . . . . . . . . . . 407
FoodSearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
Exploring FoodSearch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Writing FoodSearch.test.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
In initial state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
A user has typed a value into the search field . . . . . . . . . . . . . . . 423
Mocking with Jest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
Mocking Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431
The API returns results . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
The user clicks on a food item . . . . . . . . . . . . . . . . . . . . . . . . 443
The API returns empty result set . . . . . . . . . . . . . . . . . . . . . . 449
Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454
Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
What’s in a URL? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
React Router’s core components . . . . . . . . . . . . . . . . . . . . . . . 460
Building the components of react-router . . . . . . . . . . . . . . . . . . . 461
The completed app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461
Building Route . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Building Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Building Router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Building Redirect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483
Using react-router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488
More Route . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
Using Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Dynamic routing with React Router . . . . . . . . . . . . . . . . . . . . . . . 498
The completed app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
The server’s API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502
Starting point of the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505
Using URL params . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511
Propagating pathnames as props . . . . . . . . . . . . . . . . . . . . . . . 519
Dynamic menu items with NavLink . . . . . . . . . . . . . . . . . . . . . 525
Supporting authenticated routes . . . . . . . . . . . . . . . . . . . . . . . . . . 529
The Client library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530
Implementing login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532
PrivateRoute, a higher-order component . . . . . . . . . . . . . . . . . 539
Redirect state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544
Recap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546
Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546
Part II . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547
Intro to Flux and Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548
Why Flux? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548
Flux is a Design Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549
Flux overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549
Flux implementations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550
Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
Redux’s key ideas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
Building a counter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552
Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552
Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553
The counter’s actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Incrementing the counter . . . . . . . . . . . . . . . . . . . . . . . . . . . 555
Decrementing the counter . . . . . . . . . . . . . . . . . . . . . . . . . . . 556
Supporting additional parameters on actions . . . . . . . . . . . . . . . 558
Building the store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564
The core of Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Next up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566
The beginnings of a chat app . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566
Previewing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566
State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
Building the reducer() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570
Initializing state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570
Handling the ADD_MESSAGE action . . . . . . . . . . . . . . . . . . . . . . 571
Handling the DELETE_MESSAGE action . . . . . . . . . . . . . . . . . . . . 575
Subscribing to the store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577
createStore() in full . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 580
Connecting Redux to React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582
Using store.getState() . . . . . . . . . . . . . . . . . . . . . . . . . . . 583
Using store.subscribe() . . . . . . . . . . . . . . . . . . . . . . . . . . . 583
Using store.dispatch() . . . . . . . . . . . . . . . . . . . . . . . . . . . 584
The app’s components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585
Preparing App.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585
The App component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586
The MessageInput component . . . . . . . . . . . . . . . . . . . . . . . . 588
The MessageView component . . . . . . . . . . . . . . . . . . . . . . . . . 590
Next up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 592
Intermediate Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
Using createStore() from the redux library . . . . . . . . . . . . . . . . . . 596
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596
Representing messages as objects in state . . . . . . . . . . . . . . . . . . . . 597
Updating ADD_MESSAGE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 598
Updating DELETE_MESSAGE . . . . . . . . . . . . . . . . . . . . . . . . . . . 601
Updating the React components . . . . . . . . . . . . . . . . . . . . . . . 602
Introducing threads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604
Supporting threads in initialState . . . . . . . . . . . . . . . . . . . . 606
Supporting threads in the React components . . . . . . . . . . . . . . . 608
Modifying App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609
Turning MessageView into Thread . . . . . . . . . . . . . . . . . . . . . . 610
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611
Adding the ThreadTabs component . . . . . . . . . . . . . . . . . . . . . . . . 612
Updating App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612
Creating ThreadTabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 614
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 614
Supporting threads in the reducer . . . . . . . . . . . . . . . . . . . . . . . . . 615
Updating ADD_MESSAGE in the reducer . . . . . . . . . . . . . . . . . . . . 615
Updating the MessageInput component . . . . . . . . . . . . . . . . . . 622
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624
Updating DELETE_MESSAGE in the reducer . . . . . . . . . . . . . . . . . . 624
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 628
Adding the action OPEN_THREAD . . . . . . . . . . . . . . . . . . . . . . . . . . 628
The action object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 628
Modifying the reducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629
Dispatching from ThreadTabs . . . . . . . . . . . . . . . . . . . . . . . . 630
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631
Breaking up the reducer function . . . . . . . . . . . . . . . . . . . . . . . . . 632
A new reducer() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 632
Updating threadsReducer() . . . . . . . . . . . . . . . . . . . . . . . . . 635
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 640
Adding messagesReducer() . . . . . . . . . . . . . . . . . . . . . . . . . . . . 640
Modifying the ADD_MESSAGE action handler . . . . . . . . . . . . . . . . 641
Creating messagesReducer() . . . . . . . . . . . . . . . . . . . . . . . . . 642
Modifying the DELETE_MESSAGE action handler . . . . . . . . . . . . . . 643
Adding DELETE_MESSAGE to messagesReducer() . . . . . . . . . . . . . . 647
Defining the initial state in the reducers . . . . . . . . . . . . . . . . . . . . . 649
Initial state in reducer() . . . . . . . . . . . . . . . . . . . . . . . . . . . 650
Adding initial state to activeThreadIdReducer() . . . . . . . . . . . . 650
Adding initial state to threadsReducer() . . . . . . . . . . . . . . . . . 651
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653
Using combineReducers() from redux . . . . . . . . . . . . . . . . . . . . . . 653
Next up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654
Using Presentational and Container Components with Redux . . . . . . . . 656
Presentational and container components . . . . . . . . . . . . . . . . . 656
Splitting up ThreadTabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659
Splitting up Thread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665
Removing store from App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 672
Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673
Generating containers with react-redux . . . . . . . . . . . . . . . . . . . . 674
The Provider component . . . . . . . . . . . . . . . . . . . . . . . . . . . 674
Wrapping App in Provider . . . . . . . . . . . . . . . . . . . . . . . . . . 675
Using connect() to generate ThreadTabs . . . . . . . . . . . . . . . . . . 676
Using connect() to generate ThreadDisplay . . . . . . . . . . . . . . . 680
Action creators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691
Asynchronicity and server communication . . . . . . . . . . . . . . . . 692
Using GraphQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693
Your First GraphQL Query . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693
GraphQL Benefits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 696
GraphQL vs. REST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 697
GraphQL vs. SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 698
Relay and GraphQL Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . 699
Chapter Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 700
Consuming GraphQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701
Exploring With GraphiQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701
GraphQL Syntax 101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706
Complex Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 711
Unions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 712
Fragments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 713
Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 714
Exploring a Graph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715
Graph Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 718
Viewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 720
Graph Connections and Edges . . . . . . . . . . . . . . . . . . . . . . . . . . . 722
Mutations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 726
Subscriptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727
GraphQL With JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 729
GraphQL With React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 730
Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 732
GraphQL Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 733
Writing a GraphQL Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 733
Special setup for Windows users . . . . . . . . . . . . . . . . . . . . . . . . . 733
Game Plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735
Express HTTP Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735
Adding First GraphQL Types . . . . . . . . . . . . . . . . . . . . . . . . . 738
Adding GraphiQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741
Introspection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743
Mutation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745
Rich Schemas and SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . 748
Setting Up The Database . . . . . . . . . . . . . . . . . . . . . . . . . . . 749
Schema Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 754
Object and Scalar Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . 756
Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 763
Performance: Look-Ahead Optimizations . . . . . . . . . . . . . . . . . 766
Lists Continued . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 769
Connections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 772
Authentication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 782
Authorization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 784
Rich Mutations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 789
Relay and GraphQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 793
Performance: N+1 Queries . . . . . . . . . . . . . . . . . . . . . . . . . . 795
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 800
Relay Classic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 801
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 801
What We’re Going to Cover . . . . . . . . . . . . . . . . . . . . . . . . . 802
What We’re Building . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 803
Guide to the Code Structure . . . . . . . . . . . . . . . . . . . . . . . . . 807
Relay is a Data Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . 809
Relay GraphQL Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 810
Exploring Relay Conventions in GraphQL . . . . . . . . . . . . . . . . . 811
Fetching Objects By ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . 811
Walking Connections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 816
Changing Data with Mutations . . . . . . . . . . . . . . . . . . . . . . . 821
Relay GraphQL Queries Summary . . . . . . . . . . . . . . . . . . . . . 823
Adding Relay to Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 823
Quick Look at the Goal . . . . . . . . . . . . . . . . . . . . . . . . . . . . 823
A Preview of the Author Page . . . . . . . . . . . . . . . . . . . . . . . . 826
Containers, Queries, and Fragments . . . . . . . . . . . . . . . . . . . . 827
Validating Our Relay Queries at Compile Time . . . . . . . . . . . . . . 828
Setting Up Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 835
Adding Relay to Our Routes . . . . . . . . . . . . . . . . . . . . . . . . . 837
App Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 838
AuthorQueries Component . . . . . . . . . . . . . . . . . . . . . . . . . . 840
AuthorPage Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 841
Try It Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 842
AuthorPage with Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . 845
BooksPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 847
BooksPage Route . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 848
BooksPage Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 849
BooksPage render() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 852
BookItem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 853
BookItem Fragment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 855
Fragment Value Masking . . . . . . . . . . . . . . . . . . . . . . . . . . . 855
Improving the AuthorPage . . . . . . . . . . . . . . . . . . . . . . . . . . 858
Changing Data With Mutations . . . . . . . . . . . . . . . . . . . . . . . . . . 861
Building a Book’s Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 862
Book Page Editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 866
Mutations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 869
Defining a Mutation Object . . . . . . . . . . . . . . . . . . . . . . . . . . 870
Inline Editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 875
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 877
Where to Go From Here . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 878
React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 879
Init . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 880
Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 882
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 886
renderScene() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 887
configureScene() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 890
Web components vs. Native components . . . . . . . . . . . . . . . . . . . . 893
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 894
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 894
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 895
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 895
, , and . . . . . . . . . . . . . . . . . . . . . . . 895
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 896
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 896
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 896
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 897
Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 907
StyleSheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 908
Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 910
HTTP requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 932
What is a promise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 932
Enter Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 935
Single-use guarantee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 937
Creating a promise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 937
Debugging with React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . 939
Where to go from here . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 941
Appendix A: PropTypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 943
Validators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 945
string . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 945
number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 946
boolean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 947
function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 948
object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 949
object shape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 950
multiple types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 951
instanceOf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 952
array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 953
array of type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 954
node . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 955
element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 956
any type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 958
Optional & required props . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 958
custom validator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 959
Appendix B: ES6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 962
Prefer const and let over var . . . . . . . . . . . . . . . . . . . . . . . . 962
Arrow functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 963
Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 966
Object.assign() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 969
Template literals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 970
The spread operator (...) . . . . . . . . . . . . . . . . . . . . . . . . . . . 971
Enhanced object literals . . . . . . . . . . . . . . . . . . . . . . . . . . . . 971
Default arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 972
Destructuring assignments . . . . . . . . . . . . . . . . . . . . . . . . . . 973
Appendix C: React Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 976
Motivation behind Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 976
How Hooks Map to Component Classes . . . . . . . . . . . . . . . . . . . . . 977
Using Hooks Requires react "next" . . . . . . . . . . . . . . . . . . . . . . . 977
useState() Hook Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 977
Our Component is a Function . . . . . . . . . . . . . . . . . . . . . . . . 981
Reading and Writing State . . . . . . . . . . . . . . . . . . . . . . . . . . 981
React Tracks the State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 982
Multiple States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 982
useEffect() Hook Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 983
Fetch Data and Update State . . . . . . . . . . . . . . . . . . . . . . . . . 984
Performance Concerns When Using Effects . . . . . . . . . . . . . . . . 985
useContext() Hook Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . 986
The Point of Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 986
useContext() makes context easier to use . . . . . . . . . . . . . . . . . 986
Getting a Reference to the Context in a Larger App . . . . . . . . . . . 987
useRef() Hook Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 988
useRef() and forms with input . . . . . . . . . . . . . . . . . . . . . . . 988
Using Custom Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 990
Writing Tests for React Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . 992
Writing tests for useState() Hook . . . . . . . . . . . . . . . . . . . . . . 993
Writing tests for useEffect() Hook . . . . . . . . . . . . . . . . . . . . . 994
Writing tests for useRef() Hook . . . . . . . . . . . . . . . . . . . . . . . 996
Community Reaction to Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . 997
References to the Different types of Hooks . . . . . . . . . . . . . . . . . . . 998
Future of Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 999
More Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1000
Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1001
Revision 41 - 2020-07-06 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1001
Revision 40 - 2020-01-13 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1001
Revision 39 - 2019-01-10 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1001
Revision 38 - 2018-12-20 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1001
Revision 37 - 2018-12-19 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1001
Revision 36 - 2018-10-01 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1002
Revision 35 - 2018-04-02 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1002
Revision 34 - 2017-10-17 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1002
Revision 33 - 2017-08-31 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1002
Revision 32 - 2017-06-14 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1002
Revision 31 - 2017-05-18 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1002
Revision 30 - 2017-04-20 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1003
Revision 29 - 2017-04-13 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1003
Revision 28 - 2017-04-10 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1003
Revision 27 - 2017-03-16 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1003
Revision 26 - 2017-02-22 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1003
Revision 25 - 2017-02-17 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1003
Revision 24 - 2017-02-08 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1004
Revision 23 - 2017-02-06 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1004
Revision 22 - 2017-02-01 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1004
Revision 21 - 2017-01-27 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1004
Revision 20 - 2017-01-10 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1004
Revision 19 - 2016-12-20 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1004
Revision 18 - 2016-11-22 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1005
Revision 17 - 2016-11-04 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1005
Revision 16 - 2016-10-12 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1005
Revision 15 - 2016-10-05 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1005
Revision 14 - 2016-08-26 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1005
Revision 13 - 2016-08-02 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1005
Revision 12 - 2016-07-26 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1005
Revision 11 - 2016-07-08 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1006
Revision 10 - 2016-06-24 . . . . . . . . . . . . . . . . . . . . . . . . . . . 1006
Revision 9 - 2016-06-21 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1006
Revision 8 - 2016-06-02 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1006
Revision 7 - 2016-05-13 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1006
Revision 6 - 2016-05-13 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1006
Revision 5 - 2016-04-25 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1006
Revision 4 - 2016-04-22 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1006
Revision 3 - 2016-04-08 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1007
Revision 2 - 2016-03-16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1007
Revision 1 - 2016-02-14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1007