Beginning ReactJS Foundations Building User Interfaces with ReactJS

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