React JS Foundations: Building User Interfaces with ReactJS - An Approachable Guide walks readers through the fundamental concepts of programming with the explosively popular front-end tool known as React JS.
Written by an accomplished full-stack engineer, speaker, and community organizer, React JS Foundations teaches readers how to understand React and how to begin building applications with it. The book: - Explains and clarifies technical terminology with relevant and modern examples to assist people new to programming understand the language - Helps experienced programmers quickly get up to speed with React - Is stocked throughout with practical and applicable examples of day-to-day React work
Perfect for beginner, intermediate, and advanced programmers alike, React JS Foundations will quickly bring you up to speed on one of the most useful and widely used front-end languages on the web today. You can start building your first application today.
Table of Contents
Introduction Xxvii
Chapter 1: Hello, World! 1
React without a Build Toolchain 1
Interactive “Hello, World” with Create React App and JSX 7
Summary 9
Chapter 2: The Foundation of React 11
What’s in a Name? 11
UI Layer 12
Virtual DOM 13
The Philosophy of React 14
Thinking in Components 15
Composition vs. Inheritance 15
React Is Declarative 16
React Is Idiomatic 17
Why Learn React? 17
React vs.... 18
React vs. Angular 18
React vs. Vue 19
What React Is Not 19
React Is Not a Web Server 20
React Is Not a Programming Language 20
React Is Not a Database Server 21
React Is Not a Development Environment 21
React Is Not the Perfect Solution to Every Problem 21
Summary 21
Chapter 3: JSX 23
JSX Is Not HTML 23
What Is JSX? 30
How JSX Works 30
Transpiler . . . Huh? 31
Compilation vs. Transpilation 31
JSX Transform 31
Introducing Babel 31
Eliminating Browser Incompatibilities 33
Syntax Basics of JSX 33
JSX Is JavaScript XML 33
Beware of Reserved Words 33
JSX Uses camelCase 33
Preface Custom Attributes in DOM Elements with data-34
JSX Boolean Attributes 34
Use Curly Braces to Include Literal JavaScript 35
Remember to Use Double Curly Braces with Objects 35
Put Comments in Curly Braces 35
When to Use JavaScript in JSX 36
Conditionals in JSX 36
Conditional Rendering with if/else and Element Variables 36
Conditional Rendering with the && Operator 37
Conditional Rendering with the Conditional Operator 38
Expressions in JSX 38
Using Children in JSX 40
React Fragments 40
Summary 41
Chapter 4: All About Components 43
What Is a Component? 43
Components vs. Elements 44
Components Define Elements 44
Elements Invoke Components 45
Built-in Components 47
HTML Element Components 47
Attributes vs. Props 52
Passing Props 52
Accessing Props 52
Standard HTML Attributes 54
Non-Standard Attributes 56
Custom Attributes 56
User-Defined
Components 56
Types of Components 56
Class Components 57
Stepping through a React Class Component 68
React.Component 68
Importing React.Component 68
The Class Header 69
The Constructor Function 69
Managing State in Class Components 71
The Render Function 73
Creating and Using Props 74
Function Components 76
What Are Function Components? 79
How to Write Function Components 79
Optimizations and Function Component Shortcuts 80
Managing State in Function Components 83
Differences between Function and Class Components 84
React Component Children 84
this.props.children 85
Manipulating Children 86
React.Children 86
isValidElement 87
cloneElement 87
The Component Lifecycle 89
Mounting 90
constructor() 90
static getDerivedStateFromProps 90
render 90
componentDidMount() 90
Updating 90
shouldComponentUpdate 91
getSnapshotBeforeUpdate 91
componentDidUpdate 92
Unmounting 92
componentWillUnmount 92
Error Handling 92
getDerivedStateFromError 92
componentDidCatch 92
Improving Performance and Avoiding Errors 92
Avoiding Memory Leaks 93
React.PureComponent 96
React.memo 97
React.StrictMode 98
Rendering Components 98
Rendering with ReactDOM 98
Virtual DOM 100
Other Rendering Engines 101
React Native 101
ReactDOMServer 102
React Konsul 103
react-pdf 103
Component Terminology 103
Summary 104
Chapter 5: React Devtools 105
Installation and Getting Started 105
Inspecting Components 107
Working with the Component Tree 108
Searching for Components 110
Using the Search Input Box 110
Using Regular Expressions 110
Filtering Components 112
Selecting Components 114
Editing Component Data in DevTools 114
Working with Additional DevTools Functionality 118
Profiling 119
Summary 121
Chapter 6: React Data Flow 123
One-Way
Data Flow 123
Understanding One-Way
Data Flow 124
Why One-Way
Data Flow? 125
Props 126
Components Receive Props 126
Props Can Be Any Data Type 126
Props Are Read-Only 127
Validating Incoming Props with PropTypes 129
What Is PropTypes? 130
Getting Started with PropTypes 131
What Can PropTypes Validate? 133
Default Props 141
React State 145
What Is state? 146
Initializing state 146
Initializing state in Class Components 146
Initializing State in Function Components 147
The Difference between state and props 149
Updating state 149
Updating a Class Component’s state with setState 150
Updating state with Function Components 154
What to Put in State 161
Building the Reminders App 161
What Not to Put in State 168
Where to Put State 168
Lifting State Up 170
About the key Prop 177
Filtering the Reminders 183
Implementing the isComplete Changing Functionality 188
Converting to Class Components 190
Summary 198
Chapter 7: Events 199
How Events Work in React 199
What Is SyntheticEvent? 201
Using Event Listener Attributes 202
The Event Object 203
Supported Events 204
Event Handler Functions 211
Writing Inline Event Handlers 211
Writing Event Handlers in Function Components 212
Writing Event Handlers in Class Components 213
Binding Event Handler Functions 214
Using bind 215
Using Arrow Functions 216
Passing Data to Event Handlers 218
Summary 219
Chapter 8: Forms 221
Forms Have State 221
Controlled Inputs vs. Uncontrolled Inputs 222
Updating a Controlled Input 223
Controlling an Input in a Function Component 224
Controlling an Input in a Class Component 224
Lifting Up Input State 226
Using Uncontrolled Inputs 228
Using Different Form Elements 229
Controlling the Input Element 230
Controlling a textarea 230
Controlling a Select Element 231
Preventing Default Actions 231
Summary 232
Chapter 9: Refs 233
What Refs Are 233
How to Create a Ref in a Class Component 234
How to Create a Ref in a Function Component 234
Using Refs 234
Creating a Callback Ref 236
When to Use Refs 238
When Not to Use Refs 238
Examples 239
Managing Focus 239
Automatically Selecting Text 239
Controlling Media Playback 241
Setting Scroll Position 241
Summary 242
Chapter 10: Styling React 243
The Importance of Styles 243
Importing CSS into the HTML File 244
Using Plain Old CSS in Components 245
Writing Inline Styles 247
JavaScript Style Syntax 248
Why to Use Inline Styles 249
Why Not to Use Inline Styles 249
Improving Inline Styles with Style Modules 249
CSS Modules 250
Naming CSS Module Files 251
Advanced CSS Modules Functionality 252
Global Classes 252
Class Composition 252
CSS-in- JS and Styled Components 253
Summary 255
Chapter 11: Introducing Hooks 257
What Are Hooks? 257
Why Were Hooks Introduced? 257
Rules of Hooks 259
The Built-in Hooks 259
Managing State with useState 260
Setting the Initial State 262
Using the Setter Function 262
Passing a Value to a Setter 263
Passing a Function to a Setter 263
Setter Function Value Comparison 264
Hooking into the Lifecycle with useEffect 264
Using the Default useEffect Behavior 265
Cleaning Up After Effects 265
Customizing useEffect 266
Running Asynchronous Code with useEffect 270
Subscribing to Global Data with useContext 272
Combining Logic and State with useReducer 273
Memoized Callbacks with useCallback 275
Caching Computed Values with useMemo 278
Solving Unnecessary Renders 278
Solving Performance Problems 279
Accessing Children Imperatively with useRef 279
Customizing Exposed Values with useImperativeHandle 280
Updating the DOM Synchronously with useLayoutEffect 281
Writing Custom Hooks 281
Labeling Custom Hooks with useDebugValue 283
Finding and Using Custom Hooks 285
use-http 285
react-fetch-hook 286
axios-hooks 286
react-hook- form 286
@rehooks/local-storage 287
use-local- storage- state 287
Other Fun Hooks 288
Lists of Hooks 288
Summary 288
Chapter 12: Routing 289
What Is Routing? 289
How Routing Works in React 291
Using React Router 293
Installing and Importing react-router- dom 293
The Router Component 294
Selecting a Router 294
Using the Router Component 295
Linking to Routes 296
Internal Linking with Link 296
Internal Navigation with NavLink 298
Automatic Linking with Redirect 302
Creating Routes 302
Restricting Path Matching 304
Using URL Parameters 304
The component Prop 305
Render Props 306
Switching Routes 307
Rendering a Default Route 308
Routing with Redirect 308
Behind the Scenes: location, history, and match 309
The history Object 310
The location Object 313
The match Object 313
React Router Hooks 317
useHistory 317
useLocation 317
useParams 317
useRouteMatch 317
Summary 318
Chapter 13: Error Boundaries 319
The Best Laid Plans 319
What Is an Error Boundary? 320
Implementing an Error Boundary 323
Building Your Own ErrorBoundary Component 323
getDerivedStateFromErrors Is a Static Method 324
getDerivedStateFromErrors Runs During the Render Phase 325
getDerivedStateFromErrors Receives the Error as a Parameter 325
getDerivedStateFromErrors Should Return an Object for Updating State 325
Testing Your Boundary 326
Logging Errors with ComponentDidCatch() 327
Using a Logging Service 328
Resetting the State 333
Installing a Pre-Built ErrorBoundary Component 334
What Can’t an Error Boundary Catch? 336
Catching Errors in Error Boundaries with try/catch 336
Catching Errors in Event Handlers with react-error- boundary 337
Summary 338
Chapter 14: Deploying React 339
What Is Deployment? 339
Building an App 339
Running the build Script 340
Examining the build Directory 340
The Built index.html 341
The static Directory 342
asset-manifest. json 342
What’s in a Name? 343
How Is a Deployed App Different? 343
Development Mode vs. Production 343
Putting It on the Web 344
Web Server Hosting 344
Node Hosting 345
Deploying with Netlify 345
Enabling Routing with Netlify 347
Enabling Custom Domains and HTTPS 348
Summary 349
Chapter 15: Initialize a React Project from Scratch 351
Building Your Own Toolchain 351
Initializing Your Project 352
The HTML Document 352
The Main JavaScript File 353
The Root Component 353
Running in the Browser 354
How Webpack Works 357
Loaders 358
Plugins 358
Automating Your Build Process 358
Making an HTML Template 359
Development Server and Hot Reloading 360
Testing Tools 360
Installing and Configuring ESLint 360
ESLint Configuration 361
How to Fix Errors 362
Testing with Jest 363
Creating NPM Scripts 364
Structuring Your Source Directory 365
Grouping by File Type 366
Grouping by Features 367
Summary 367
Chapter 16: Fetching and Caching Data 369
Asynchronous Code: It’s All About Timing 369
JavaScript Never Sleeps 370
Where to Run Async Code in React 374
Ways to Fetch 376
Getting Data with Fetch 377
Getting Data with Axios 377
Using Web Storage 379
Two Types of Web Storage 379
When to Use Web Storage 380
When Not to Use Web Storage 380
Web Storage Is Synchronous 380
Working with localStorage 381
Storing Data with localStorage 381
Reading Data from localStorage 382
Removing Data from localStorage 384
Summary 385
Chapter 17: Context Api 387
What Is Prop Drilling? 387
How Context API Solves the Problem 388
Creating a Context 388
Creating a Provider 389
Consuming a Context 390
Using Context in a Class Component 390
Using Context in a Function Component 391
Common Use Cases for Context 391
When Not to Use Context 392
Composition as an Alternative to Context 392
Example App: User Preferences 396
Summary 398
Chapter 18: React Portals 399
What Is a Portal? 399
How to Make a Portal 399
Why Not Just Render Multiple Component Trees? 403
Common Use Cases 403
Rendering and Interacting with a Modal Dialog 404
Managing Keyboard Focus with Modals 409
Summary 411
Chapter 19: Accessibility in React 413
Why Is Accessibility Important? 413
Accessibility Basics 414
Web Content Accessibility Guidelines (WCAG) 414
Web Accessibility Initiative -Accessible Rich Internet Applications (WAI-ARIA) 415
Implementing Accessibility in React Components 415
ARIA Attributes in React 416
Semantic HTML 416
Form Accessibility 417
Focus Control in React 418
Skip Links 418
Managing Focus Programmatically 419
Media Queries in React 420
Media Queries in Included CSS 421
Using useMediaQuery 422
Summary 422
Chapter 20: Going Further 425
Testing 425
Mocha 426
Enzyme 426
Chai 427
Assert 427
Expect 428
Should 428
Karma 428
Nightwatch.js 428
Server-Side
Rendering 429
Flux 430
Redux 430
GraphQL 432
Apollo 433
React Native 434
Next.js 434
Gatsby 434
People to Follow 435
Useful Links and Resources 435
Summary 436
Index 437
