About the Author

CHRIS MINNICK is an accomplished author, trainer, and web developer with experience working on web and mobile projects with both small and large companies.

The companion website at [...] provides code listings for each chapter, plus examples and downloads that can be used to test out the various ReactJS techniques in the book.

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

[...].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

[...] 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

[...] 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,...