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

Reply to topic
DL-List and Torrent activity
Size:  151 MB   |    Registered:  3 years 9 months   |    Completed:  8 times
Seeders:  305  [  0 KB/s  ]   Leechers:  32  [  0 KB/s  ]   Show peers in full details
 
   
 
 
Author Message

Download WYSIWYG ®

Gender: Male

Longevity: 10 years

Posts: 1546

Post 30-Sep-2021 09:40

[Quote]

Fullstack React: The Complete Guide to ReactJS and Friends (Revision 42)
Год издания: 2021
Автор: Accomazzo A., Murray N., Lerner A. et al.
Издательство: \newline (Fullstack.io)
ISBN: 978-0991344626
Язык: Английский
Формат: PDF/ePub/MOBI
Качество: Издательский макет или текст (eBook)
Интерактивное оглавление: Да
Количество страниц: 1030
Описание: Update 2021-09-13
Revision 42 – Supports React 16.12.0 (2021-09-13)
Stop wasting your time learning React with incomplete and confusing tutorials.
There are so many incorrect, confusing, and out-of-date blog articles
One tutorial says one thing and another says something completely different.
There are too many options
There are fifty different boilerplates and a dozen different Flux implementations. Which one is best?
What if you could master the entire framework in less time, with solid foundations, without beating your head against the wall? Imagine how quickly you can get all of your work done with the right tools and best practices.
Seriously, let’s stop wasting time scouring Google, searching through incorrect, out-of-date, blog posts and get everything you need to be productive in one, well-organized place, complete with both simple and complex examples to get your app up and running.
You’ll learn what you need to know to work professionally and build solid, well-tested, optimized apps with ReactJS. This book is your definitive guide.

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

Оглавление

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
[only-soft.org].t149470.torrent
Torrent: Registered [ 2021-09-30 09:40 ] · D92AB4C4DEE2D465DB7CDA20F9246A8D2C3384E6

219 KB

Status: checked
Completed: 8 times
Size: 151 MB
Rate: 
(Vote: 0)
Have thanked: 0  Thanks
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 download torrent for free and without registration
[Profile] [PM]
Display posts:    
Reply to topic

Current time is: 11-Jul 06:50

All times are UTC + 2



You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum