React Native Development Fundamentals

CONTENT

1. Section 1: React
1.1. Chapter 1: Why React?
1.2. What is React?
1.3. React Features 16
1.4. What’s new in React? 20

2. Chapter 2: Rendering with JSX 23
2.1. Technical requirements 23
2.2. Your first JSX content 23
2.3 Rendering HTML 25
2.4. Describing UI structures 27
2.5. Creating your own JSX elements 28
2.6. Namespaced components 31
2.7. Using JavaScript expressions 33
2.8. Fragments of JSX 36

3. Chapter 3: Component Properties, State, and Context 41
3.1. Technical requirements 42
3.2. What is component state? 42
3.3. What are component properties? 43
3.4. Setting a component state 44
3.5. Passing property values 49
3.6. Stateless components 53
3.7. Container components 55
3.8. Providing and consuming context 57

4. Chapter 4: Getting Started with Hooks 62
4.1. Technical requirements 62
4.2. Maintaining state using Hooks 62
4.3. Performing initialization and cleanup actions 66
4.4. Sharing data using context Hooks 73
4.5 Using reducer Hooks to scale state management 81

5. Chapter 5: Event Handling – The React Way 91
5.1. Technical requirements 91
5.2. Declaring event handlers 92
5.3. Using event handler context and parameters 95
5.4. Declaring inline event handlers 99
5.5. Binding handlers to elements 99
5.6. Using synthetic event objects 100
5.7. Understanding event pooling 101

6. Chapter 6: Crafting Reusable Components 104
6.1. Technical requirements 105
6.2. Reusable HTML elements 105
6.3. The difficulty with monolithic components 105
6.4. Refactoring component structures 111
6.5. Render props 120
6.6. Refactoring class components using Hooks 122
6.7. Rendering component trees 126
6.8. Feature components and utility components 127

7. Chapter 7: The React Component Life Cycle 129
7.1. Technical requirements 129
7.2. Why components need a life cycle 130
7.3. Initializing properties and state 131
7.4. Optimizing rendering efficiency 138Table of Contents
7.5. Rendering imperative components 143
7.6. Cleaning up after components 146
7.7. Containing errors with error boundaries 149

8. Chapter 8: Validating Component Properties 155
8.1. Technical requirements 155
8.2. Knowing what to expect 156
8.3. Promoting portable components 156
8.4. Simple property validators 157
8.5. Type and value validators 164
8.6. Writing custom property validators 170

9. Chapter 9: Handling Navigation with Routes 173
9.1. Technical requirements 173
9.2. Declaring routes 174
9.3. Handling route parameters 179
9.4. Using link components 186

10. Chapter 10: Code Splitting Using Lazy Components and Suspense 191
10.1. Technical requirements 192
10.2. Using the lazy API 192
10.3. Using the Suspense component 194
10.4. When to avoid lazy components 198
10.5. Lazy pages and routes 200

11. Chapter 11: Server-Side React Components 203
11.1. Technical requirements 203
11.2. What is isomorphic JavaScript? 203
11.3. Rendering to strings 206
11.4. Backend routing 208
11.5. Frontend reconciliation 211
11.6. Fetching data 214

12. Chapter 12: User Interface Framework Components 219
12.1. Technical requirements 219
12.2. Layout and organization 220
12.3. Using navigation components 225
12.4. Collecting user input 232
12.5. Working with styles and themes 237

13. Section 2: React Native
13.1. Chapter 13: Why React Native? 243
13.2. Technical requirements 243
13.3. What is React Native? 243
13.4. React and JSX are familar 245Table of Contents
13.5. The mobile browser experience 245
13.6. Android and iOS – different yet the same 246
13.7. The case for mobile web apps 247

14. Chapter 14: Kick-Starting React Native Projects 249
14.1. Technical requirements 249
14.2. Installing and using the Expo command-line tool 250
14.3. Viewing your app on your phone 251
14.4. Viewing your app on Expo Snack 257

15. Chapter 15: Building Responsive Layouts with Flexbox 262
15.1. Technical requirements 262
15.2. Flexbox is the new layout standard 263
15.3. Introducing React Native styles 264
15.4. Building Flexbox layouts 266

16. Chapter 16: Navigating Between Screens 283
16.1. Technical requirements 283
16.2. Navigation basics 284
16.3. Route parameters 287
16.4. The navigation header 290
16.5. Tab and drawer navigation 294
16.6. Handling state 298

17. Chapter 17: Rendering Item Lists 306
17.1. Technical requirements 307
17.2. Rendering data collections 307
17.3. Sorting and filtering lists 309
17.4. Fetching list data 316
17.5. Lazy list loading 318

18. Chapter 18: Showing Progress 321
18.1. Technical requirements 321
18.2. Progress and usability 321
18.3. Indicating progress 322
18.4. Measuring progress 325
18.5. Navigation indicators 330
18.6. Step progress 332

19. Chapter 19: Geolocation and Maps 338
19.1. Technical requirements 338
19.2. Where am I? 338
19.3. What’s around me? 341
19.4. Annotating points of interest 342
19.5. Plotting points 342
19.6. Plotting overlays 344

20. Chapter 20: Collecting User Input 348
20.1. Technical requirements 348
20.2. Collecting text input 348
20.3. Selecting from a list of options 351
20.4. Toggling between on and off 355
20.5. Collecting date/time input 358

21. Chapter 21: Displaying Modal Screens 364
21.1. Technical requirements 364
21.2. Important information 365
21.3. Getting user confirmation 365
21.4. Displaying a success confirmation 366
21.5. Error confirmation 371
21.6. Passive notifications 375
21.7. Activity modals 379

22. Chapter 22: Responding to User Gestures 383
22.1. Technical requirements 383
22.2. Scrolling with your fingers 384
22.3. Giving touch feedback 386
22.4. Swipeable and cancellable 389Table of Contents

23. Chapter 23: Controlling Image Display 395
23.1. Technical requirements 395
23.2. Loading images 396
23.3. Resizing images 398
23.4. Lazy image loading 402
23.5. Rendering icons 405

24. Chapter 24: Going Offline 409
24.1. Technical requirements 409
24.2. Detecting the state of the network 409
24.3. Storing application data 413
24.4. Synchronizing application data 416

25. Section 3: React Architecture
25.1. Chapter 25: Native UI Components Using NativeBase 423
25.2. Technical requirements 424
25.3. Application containers 424
25.4. Headers, footers, and navigation 427
25.5. Using layout components 431
25.6. Collecting input using form components 434
25.7. Displaying data using lists 437
25.8. Showing user notifications 440

26. Chapter 26: Handling Application State 443
26.1. Technical requirements 443
26.2. Information architecture and Flux 444
26.3 Unified information architecture 446
26.4. Implementing Redux 446
26.5. Scaling the architecture 457

27. Chapter 27: Why Apollo? 459
27.1. Yet another approach? 460
27.2. Verbose vernacular 460
27.3. Declarative data fetching 461
27.4. Mutating application state 464

28. Chapter 28: Building an Apollo React App 467
28.1. Technical requirements 467
28.2. Todo and Apollo Client 467
28.3. The GraphQL schema 469
28.4. Bootstrapping Apollo Client 470
28.5. Adding todo items 474
28.6. Rendering todo items 478
28.7. Completing todo items 479