Learn React with TypeScript 3: Beginner’s guide to modern React web development with TypeScript 3

Cover
......Page 1
Title Page......Page 2
Copyright and Credits......Page 3
About Packt......Page 4
Contributors......Page 5
Table of Contents......Page 8
Preface......Page 16
Chapter 1: TypeScript Basics......Page 22
Technical requirements......Page 23
Catching coding errors early......Page 24
Using future JavaScript features......Page 26
Primitive types......Page 27
Type annotations......Page 28
Type inference......Page 30
Any......Page 31
Never......Page 32
Enumerations......Page 34
Objects......Page 36
Arrays......Page 38
Creating interfaces, types aliases, and classes......Page 40
Properties......Page 42
Method signatures......Page 44
Optional properties and parameters......Page 47
Readonly properties......Page 49
Extending interfaces......Page 50
Type aliases......Page 51
Basic classes......Page 52
Constructors......Page 54
Extending classes......Page 56
Abstract classes......Page 57
Access modifiers......Page 59
Property setters and getters......Page 60
Static......Page 61
Structuring code into modules......Page 63
Exporting......Page 64
Importing......Page 66
Configuring compilation......Page 67
Common options......Page 68
--outDir......Page 69
--watch......Page 70
--noImplicitAny......Page 71
--sourceMap......Page 72
tsconfig.json......Page 73
Specifying files for compilation......Page 74
Installing TSLint......Page 75
Configuring rules......Page 76
Built-in rules......Page 78
Code formatting......Page 79
Summary......Page 80
Questions......Page 81
Further reading......Page 82
Technical requirements......Page 83
Tuples......Page 84
JavaScript rest and spread syntax......Page 86
Open-ended tuples......Page 88
Tuple function parameters......Page 89
Spread expressions......Page 90
Empty tuples......Page 91
Optional tuple elements......Page 92
The unknown type......Page 95
Type checking with a type predicate......Page 96
Type narrowing with a type assertion......Page 98
Setting up an example......Page 99
Referencing projects ......Page 101
Additions to compiler options......Page 102
Cross-project Go to Definition......Page 103
Build mode......Page 105
Default JSX properties......Page 106
Summary......Page 108
Questions......Page 109
Further reading......Page 110
Chapter 3: Getting Started with React and TypeScript......Page 111
Using create-react-app......Page 112
Creating package.json......Page 116
Creating tsconfig.json......Page 117
Creating a root web page......Page 118
Creating a simple React component......Page 119
Adding webpack......Page 120
Project folders and files......Page 121
Creating start and build scripts......Page 122
Creating a class component......Page 123
Creating a basic class component......Page 125
JSX......Page 129
Component props......Page 132
Optional props......Page 133
Default prop values......Page 135
Basic event handlers......Page 136
The this problem......Page 137
Function props......Page 139
Class component states......Page 140
Defining state type......Page 142
Changing state......Page 143
Class component life cycle methods......Page 146
componentDidMount ......Page 147
getDerivedStateFromProps......Page 151
getSnapshotBeforeUpdate and componentDidUpdate......Page 152
shouldComponentUpdate......Page 154
Creating a basic function component......Page 156
Stateful function components......Page 159
Function component life cycle hooks......Page 161
Optimizing function component rendering......Page 163
Questions......Page 164
Further reading......Page 165
Chapter 4: Routing with React Router......Page 166
Installing React Router with routing types......Page 167
Declaring routes......Page 169
Using the Link component......Page 174
Using the NavLink component......Page 177
Route parameters......Page 179
Handling not found routes......Page 184
Implementing page redirects......Page 186
Conditional redirect......Page 187
Query parameters......Page 189
Route prompts......Page 194
Nested routes......Page 195
Animated transitions......Page 201
Lazy loading routes......Page 204
Summary......Page 206
Questions......Page 207
Further reading......Page 208
Chapter 5: Advanced Types......Page 209
String literal types......Page 210
String literal union types......Page 211
Discriminated union pattern......Page 212
Using the typeof keyword ......Page 215
Using the instanceof keyword ......Page 218
Using the in keyword ......Page 219
Using a user-defined type guard......Page 220
Generics......Page 221
Generic functions......Page 222
Generic classes......Page 223
Overload signatures......Page 226
Lookup and mapped types......Page 228
Summary......Page 233
Questions......Page 234
Further reading......Page 235
Technical requirements......Page 236
Container and presentational components......Page 237
Adding reviews to a product......Page 241
Creating a basic tab component......Page 244
Leveraging the compound component pattern......Page 248
Sharing state with React context......Page 251
Render props pattern......Page 255
Completing Tabs with render props......Page 256
Using render prop for tab headings......Page 257
Using children prop for tab content ......Page 258
Higher-order components......Page 263
Adding asynchronous data fetching......Page 264
Implementing the withLoader HOC......Page 266
Consuming the withLoader HOC......Page 269
Summary......Page 271
Questions......Page 272
Further reading......Page 273
Technical requirements......Page 274
Adding a Contact Us page......Page 275
Creating controlled inputs......Page 277
Reducing boilerplate code with generic components......Page 285
Creating a basic form component......Page 286
Adding a basic Field component......Page 287
Sharing state with React context......Page 290
Implementing our new ContactUs component......Page 294
Validating forms......Page 295
Adding a validation rules prop to form......Page 296
Tracking validation error messages......Page 298
Invoking validation rules......Page 300
Triggering validation rule execution from field......Page 303
Rendering validation error messages......Page 305
Form submission......Page 307
Adding a onSubmit form prop......Page 308
Consuming the onSubmit form prop......Page 311
Questions......Page 315
Further reading......Page 316
Chapter 8: React Redux......Page 317
Principles and key concepts......Page 318
Key concepts......Page 319
Installing Redux......Page 321
Creating actions......Page 322
Creating state and action types......Page 323
Creating actions......Page 324
Creating reducers......Page 327
Creating a store......Page 328
Adding the store Provider component......Page 330
Connecting ProductsPage to the store......Page 331
Connecting ProductsPage to the loading store state......Page 334
Adding product state and actions to the store......Page 337
Adding basket state and actions to the store......Page 339
Connecting ProductPage to the store......Page 341
Creating and connecting BasketSummary to the store......Page 344
Managing state with useReducer......Page 346
Summary......Page 350
Questions......Page 351
Further reading......Page 352
Technical requirements......Page 353
Callback execution......Page 354
Handling callback errors......Page 355
Creating a promised based function......Page 357
async and await......Page 359
Getting data with fetch......Page 360
Getting response status......Page 361
Basic POST request......Page 362
Request HTTP headers......Page 363
Basic PUT request......Page 364
Deleting data with fetch......Page 365
Installing axios......Page 366
Basic GET request......Page 367
Handling errors......Page 370
Timeouts......Page 372
Canceling requests......Page 373
Creating data with axios......Page 376
Updating data with axios......Page 379
Deleting data with axios......Page 381
Using axios with function components......Page 382
Summary......Page 387
Questions......Page 388
Further reading......Page 389
Chapter 10: Interacting with GraphQL APIs......Page 390
Reading GraphQL data......Page 391
Basic query......Page 392
Returning nested data......Page 394
Query parameters......Page 396
Writing GraphQL data......Page 397
Using axios as a GraphQL client......Page 399
Creating our app......Page 400
Querying the GraphQL server......Page 403
Installing Apollo client......Page 406
Adding an Apollo provider......Page 407
Using the query component to query GraphQL......Page 408
Adding a repository search component......Page 411
Implementing the search form......Page 412
Implementing the search query......Page 414
Rendering the search result......Page 418
Implementing a mutation with Apollo......Page 420
Working with cached data in Apollo......Page 422
Clearing the caching using refetchQueries......Page 423
Updating the cache after a Mutation......Page 424
Summary......Page 427
Further reading......Page 428
Chapter 11: Unit Testing with Jest......Page 429
Testing pure functions......Page 430
Creating a basic pure function test......Page 431
Understanding Jest watch options......Page 434
Adding structure to unit test results......Page 435
Creating a basic component test......Page 437
Removing CSS class references from our tests......Page 440
Using fireEvent for user interaction......Page 442
Creating a second test for a valid form submission......Page 443
Using Jest snapshot tests......Page 446
Using a mock function in Jest......Page 450
Mocking Axios with axios-mock-adapter......Page 452
Getting code coverage......Page 455
Summary......Page 458
Questions......Page 459
Further reading......Page 460
Chapter 1: TypeScript Basics......Page 461
Chapter 2: What is New in TypeScript 3......Page 462
Chapter 3:  Getting Started with React and TypeScript......Page 464
Chapter 4: Routing with React Router......Page 466
Chapter 5: Advanced Types......Page 468
Chapter 6: Component Patterns......Page 470
Chapter 7:  Working with Forms......Page 473
Chapter 8: React Redux......Page 476
Chapter 9: Interacting with RESTful APIs......Page 477
Chapter 10: Interacting with GraphQL APIs......Page 480
Chapter 11: Unit Testing with Jest......Page 481
Other Books You May Enjoy......Page 484
Index......Page 487