{"product_id":"beginning-reactjs-foundations-building-user-interfaces-with-reactjs-an-approachable-guide-paperback-softback-9781119685548","title":"Beginning ReactJS Foundations Building User Interfaces with ReactJS; An Approachable Guide (Paperback \/ softback) 9781119685548","description":"\u003cfont face=\"Georgia\"\u003e\r\n\u003cp\u003e\u003cfont size=\"6\"\u003eBeginning ReactJS Foundations Building User Interfaces with ReactJS\u003c\/font\u003e\u003cbr\u003e\r\n\u003cfont size=\"5\"\u003eAn Approachable Guide\u003c\/font\u003e\u003c\/p\u003e\r\n\r\n\r\n\r\n\r\n\u003cp\u003e\u003cfont size=\"4\"\u003eChris Minnick (Author)\u003c\/font\u003e\u003c\/p\u003e\r\n\r\n\u003cp\u003e\u003cfont size=\"3\"\u003e9781119685548, Wiley\u003c\/font\u003e\u003c\/p\u003e\r\n\r\n\u003cp\u003e\u003cfont size=\"3\"\u003ePaperback \/ softback, published 5 May 2022\u003c\/font\u003e\u003c\/p\u003e\r\n\r\n\u003cp\u003e\u003cfont size=\"3\"\u003e512 pages\u003cbr\u003e23.1 x 18.8 x 3.6 cm, 0.816 kg\u003c\/font\u003e\u003c\/p\u003e\r\n\r\n\r\n\r\n\r\n\r\n\u003cp align=\"justify\"\u003e\u003cstrong\u003e\u003cfont size=\"3\"\u003e\u003cp\u003e\u003cb\u003eQuickly learn the most widely used front-end development language with ease and confidence\u003c\/b\u003e \u003c\/p\u003e\n\u003cp\u003e\u003ci\u003eReact JS Foundations: Building User Interfaces with ReactJS - An Approachable Guide \u003c\/i\u003ewalks readers through the fundamental concepts of programming with the explosively popular front-end tool known as React JS. \u003c\/p\u003e\n\u003cp\u003eWritten by an accomplished full-stack engineer, speaker, and community organizer, \u003ci\u003eReact JS Foundations\u003c\/i\u003e teaches readers how to understand React and how to begin building applications with it. The book: \u003c\/p\u003e\n\u003cul\u003e \u003cli\u003eExplains and clarifies technical terminology with relevant and modern examples to assist people new to programming understand the language\u003c\/li\u003e \u003cli\u003eHelps experienced programmers quickly get up to speed with React\u003c\/li\u003e \u003cli\u003eIs stocked throughout with practical and applicable examples of day-to-day React work\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003ePerfect for beginner, intermediate, and advanced programmers alike, \u003ci\u003eReact JS Foundations\u003c\/i\u003e 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.\u003c\/p\u003e\u003c\/font\u003e\u003c\/strong\u003e\u003c\/p\u003e\r\n\r\n\u003cp\u003e\u003cfont size=\"3\"\u003e\u003cp\u003eIntroduction Xxvii\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 1: Hello, World! 1\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eReact without a Build Toolchain 1\u003c\/p\u003e \u003cp\u003eInteractive “Hello, World” with Create React App and JSX 7\u003c\/p\u003e \u003cp\u003eSummary 9\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 2: The Foundation of React 11\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eWhat’s in a Name? 11\u003c\/p\u003e \u003cp\u003eUI Layer 12\u003c\/p\u003e \u003cp\u003eVirtual DOM 13\u003c\/p\u003e \u003cp\u003eThe Philosophy of React 14\u003c\/p\u003e \u003cp\u003eThinking in Components 15\u003c\/p\u003e \u003cp\u003eComposition vs. Inheritance 15\u003c\/p\u003e \u003cp\u003eReact Is Declarative 16\u003c\/p\u003e \u003cp\u003eReact Is Idiomatic 17\u003c\/p\u003e \u003cp\u003eWhy Learn React? 17\u003c\/p\u003e \u003cp\u003eReact vs.... 18\u003c\/p\u003e \u003cp\u003eReact vs. Angular 18\u003c\/p\u003e \u003cp\u003eReact vs. Vue 19\u003c\/p\u003e \u003cp\u003eWhat React Is \u003ci\u003eNot \u003c\/i\u003e19\u003c\/p\u003e \u003cp\u003eReact Is Not a Web Server 20\u003c\/p\u003e \u003cp\u003eReact Is Not a Programming Language 20\u003c\/p\u003e \u003cp\u003eReact Is Not a Database Server 21\u003c\/p\u003e \u003cp\u003eReact Is Not a Development Environment 21\u003c\/p\u003e \u003cp\u003eReact Is Not the Perfect Solution to Every Problem 21\u003c\/p\u003e \u003cp\u003eSummary 21\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 3: JSX 23\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eJSX Is Not HTML 23\u003c\/p\u003e \u003cp\u003eWhat Is JSX? 30\u003c\/p\u003e \u003cp\u003eHow JSX Works 30\u003c\/p\u003e \u003cp\u003eTranspiler . . . Huh? 31\u003c\/p\u003e \u003cp\u003eCompilation vs. Transpilation 31\u003c\/p\u003e \u003cp\u003eJSX Transform 31\u003c\/p\u003e \u003cp\u003eIntroducing Babel 31\u003c\/p\u003e \u003cp\u003eEliminating Browser Incompatibilities 33\u003c\/p\u003e \u003cp\u003eSyntax Basics of JSX 33\u003c\/p\u003e \u003cp\u003eJSX Is JavaScript XML 33\u003c\/p\u003e \u003cp\u003eBeware of Reserved Words 33\u003c\/p\u003e \u003cp\u003eJSX Uses camelCase 33\u003c\/p\u003e \u003cp\u003ePreface Custom Attributes in DOM Elements with data-34\u003c\/p\u003e \u003cp\u003eJSX Boolean Attributes 34\u003c\/p\u003e \u003cp\u003eUse Curly Braces to Include Literal JavaScript 35\u003c\/p\u003e \u003cp\u003eRemember to Use Double Curly Braces with Objects 35\u003c\/p\u003e \u003cp\u003ePut Comments in Curly Braces 35\u003c\/p\u003e \u003cp\u003eWhen to Use JavaScript in JSX 36\u003c\/p\u003e \u003cp\u003eConditionals in JSX 36\u003c\/p\u003e \u003cp\u003eConditional Rendering with if\/else and Element Variables 36\u003c\/p\u003e \u003cp\u003eConditional Rendering with the \u0026amp;\u0026amp; Operator 37\u003c\/p\u003e \u003cp\u003eConditional Rendering with the Conditional Operator 38\u003c\/p\u003e \u003cp\u003eExpressions in JSX 38\u003c\/p\u003e \u003cp\u003eUsing Children in JSX 40\u003c\/p\u003e \u003cp\u003eReact Fragments 40\u003c\/p\u003e \u003cp\u003eSummary 41\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 4: All About Components 43\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eWhat Is a Component? 43\u003c\/p\u003e \u003cp\u003eComponents vs. Elements 44\u003c\/p\u003e \u003cp\u003eComponents Define Elements 44\u003c\/p\u003e \u003cp\u003eElements Invoke Components 45\u003c\/p\u003e \u003cp\u003eBuilt-in Components 47\u003c\/p\u003e \u003cp\u003eHTML Element Components 47\u003c\/p\u003e \u003cp\u003eAttributes vs. Props 52\u003c\/p\u003e \u003cp\u003ePassing Props 52\u003c\/p\u003e \u003cp\u003eAccessing Props 52\u003c\/p\u003e \u003cp\u003eStandard HTML Attributes 54\u003c\/p\u003e \u003cp\u003eNon-Standard Attributes 56\u003c\/p\u003e \u003cp\u003eCustom Attributes 56\u003c\/p\u003e \u003cp\u003eUser-Defined\u003c\/p\u003e \u003cp\u003eComponents 56\u003c\/p\u003e \u003cp\u003eTypes of Components 56\u003c\/p\u003e \u003cp\u003eClass Components 57\u003c\/p\u003e \u003cp\u003eStepping through a React Class Component 68\u003c\/p\u003e \u003cp\u003eReact.Component 68\u003c\/p\u003e \u003cp\u003eImporting React.Component 68\u003c\/p\u003e \u003cp\u003eThe Class Header 69\u003c\/p\u003e \u003cp\u003eThe Constructor Function 69\u003c\/p\u003e \u003cp\u003eManaging State in Class Components 71\u003c\/p\u003e \u003cp\u003eThe Render Function 73\u003c\/p\u003e \u003cp\u003eCreating and Using Props 74\u003c\/p\u003e \u003cp\u003eFunction Components 76\u003c\/p\u003e \u003cp\u003eWhat Are Function Components? 79\u003c\/p\u003e \u003cp\u003eHow to Write Function Components 79\u003c\/p\u003e \u003cp\u003eOptimizations and Function Component Shortcuts 80\u003c\/p\u003e \u003cp\u003eManaging State in Function Components 83\u003c\/p\u003e \u003cp\u003eDifferences between Function and Class Components 84\u003c\/p\u003e \u003cp\u003eReact Component Children 84\u003c\/p\u003e \u003cp\u003ethis.props.children 85\u003c\/p\u003e \u003cp\u003eManipulating Children 86\u003c\/p\u003e \u003cp\u003eReact.Children 86\u003c\/p\u003e \u003cp\u003eisValidElement 87\u003c\/p\u003e \u003cp\u003ecloneElement 87\u003c\/p\u003e \u003cp\u003eThe Component Lifecycle 89\u003c\/p\u003e \u003cp\u003eMounting 90\u003c\/p\u003e \u003cp\u003econstructor() 90\u003c\/p\u003e \u003cp\u003estatic getDerivedStateFromProps 90\u003c\/p\u003e \u003cp\u003erender 90\u003c\/p\u003e \u003cp\u003ecomponentDidMount() 90\u003c\/p\u003e \u003cp\u003eUpdating 90\u003c\/p\u003e \u003cp\u003eshouldComponentUpdate 91\u003c\/p\u003e \u003cp\u003egetSnapshotBeforeUpdate 91\u003c\/p\u003e \u003cp\u003ecomponentDidUpdate 92\u003c\/p\u003e \u003cp\u003eUnmounting 92\u003c\/p\u003e \u003cp\u003ecomponentWillUnmount 92\u003c\/p\u003e \u003cp\u003eError Handling 92\u003c\/p\u003e \u003cp\u003egetDerivedStateFromError 92\u003c\/p\u003e \u003cp\u003ecomponentDidCatch 92\u003c\/p\u003e \u003cp\u003eImproving Performance and Avoiding Errors 92\u003c\/p\u003e \u003cp\u003eAvoiding Memory Leaks 93\u003c\/p\u003e \u003cp\u003eReact.PureComponent 96\u003c\/p\u003e \u003cp\u003eReact.memo 97\u003c\/p\u003e \u003cp\u003eReact.StrictMode 98\u003c\/p\u003e \u003cp\u003eRendering Components 98\u003c\/p\u003e \u003cp\u003eRendering with ReactDOM 98\u003c\/p\u003e \u003cp\u003eVirtual DOM 100\u003c\/p\u003e \u003cp\u003eOther Rendering Engines 101\u003c\/p\u003e \u003cp\u003eReact Native 101\u003c\/p\u003e \u003cp\u003eReactDOMServer 102\u003c\/p\u003e \u003cp\u003eReact Konsul 103\u003c\/p\u003e \u003cp\u003ereact-pdf 103\u003c\/p\u003e \u003cp\u003eComponent Terminology 103\u003c\/p\u003e \u003cp\u003eSummary 104\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 5: React Devtools 105\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eInstallation and Getting Started 105\u003c\/p\u003e \u003cp\u003eInspecting Components 107\u003c\/p\u003e \u003cp\u003eWorking with the Component Tree 108\u003c\/p\u003e \u003cp\u003eSearching for Components 110\u003c\/p\u003e \u003cp\u003eUsing the Search Input Box 110\u003c\/p\u003e \u003cp\u003eUsing Regular Expressions 110\u003c\/p\u003e \u003cp\u003eFiltering Components 112\u003c\/p\u003e \u003cp\u003eSelecting Components 114\u003c\/p\u003e \u003cp\u003eEditing Component Data in DevTools 114\u003c\/p\u003e \u003cp\u003eWorking with Additional DevTools Functionality 118\u003c\/p\u003e \u003cp\u003eProfiling 119\u003c\/p\u003e \u003cp\u003eSummary 121\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 6: React Data Flow 123\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eOne-Way\u003c\/p\u003e \u003cp\u003eData Flow 123\u003c\/p\u003e \u003cp\u003eUnderstanding One-Way\u003c\/p\u003e \u003cp\u003eData Flow 124\u003c\/p\u003e \u003cp\u003eWhy One-Way\u003c\/p\u003e \u003cp\u003eData Flow? 125\u003c\/p\u003e \u003cp\u003eProps 126\u003c\/p\u003e \u003cp\u003eComponents Receive Props 126\u003c\/p\u003e \u003cp\u003eProps Can Be Any Data Type 126\u003c\/p\u003e \u003cp\u003eProps Are Read-Only 127\u003c\/p\u003e \u003cp\u003eValidating Incoming Props with PropTypes 129\u003c\/p\u003e \u003cp\u003eWhat Is PropTypes? 130\u003c\/p\u003e \u003cp\u003eGetting Started with PropTypes 131\u003c\/p\u003e \u003cp\u003eWhat Can PropTypes Validate? 133\u003c\/p\u003e \u003cp\u003eDefault Props 141\u003c\/p\u003e \u003cp\u003eReact State 145\u003c\/p\u003e \u003cp\u003eWhat Is state? 146\u003c\/p\u003e \u003cp\u003eInitializing state 146\u003c\/p\u003e \u003cp\u003eInitializing state in Class Components 146\u003c\/p\u003e \u003cp\u003eInitializing State in Function Components 147\u003c\/p\u003e \u003cp\u003eThe Difference between state and props 149\u003c\/p\u003e \u003cp\u003eUpdating state 149\u003c\/p\u003e \u003cp\u003eUpdating a Class Component’s state with setState 150\u003c\/p\u003e \u003cp\u003eUpdating state with Function Components 154\u003c\/p\u003e \u003cp\u003eWhat to Put in State 161\u003c\/p\u003e \u003cp\u003eBuilding the Reminders App 161\u003c\/p\u003e \u003cp\u003eWhat Not to Put in State 168\u003c\/p\u003e \u003cp\u003eWhere to Put State 168\u003c\/p\u003e \u003cp\u003eLifting State Up 170\u003c\/p\u003e \u003cp\u003eAbout the key Prop 177\u003c\/p\u003e \u003cp\u003eFiltering the Reminders 183\u003c\/p\u003e \u003cp\u003eImplementing the isComplete Changing Functionality 188\u003c\/p\u003e \u003cp\u003eConverting to Class Components 190\u003c\/p\u003e \u003cp\u003eSummary 198\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 7: Events 199\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eHow Events Work in React 199\u003c\/p\u003e \u003cp\u003eWhat Is SyntheticEvent? 201\u003c\/p\u003e \u003cp\u003eUsing Event Listener Attributes 202\u003c\/p\u003e \u003cp\u003eThe Event Object 203\u003c\/p\u003e \u003cp\u003eSupported Events 204\u003c\/p\u003e \u003cp\u003eEvent Handler Functions 211\u003c\/p\u003e \u003cp\u003eWriting Inline Event Handlers 211\u003c\/p\u003e \u003cp\u003eWriting Event Handlers in Function Components 212\u003c\/p\u003e \u003cp\u003eWriting Event Handlers in Class Components 213\u003c\/p\u003e \u003cp\u003eBinding Event Handler Functions 214\u003c\/p\u003e \u003cp\u003eUsing bind 215\u003c\/p\u003e \u003cp\u003eUsing Arrow Functions 216\u003c\/p\u003e \u003cp\u003ePassing Data to Event Handlers 218\u003c\/p\u003e \u003cp\u003eSummary 219\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 8: Forms 221\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eForms Have State 221\u003c\/p\u003e \u003cp\u003eControlled Inputs vs. Uncontrolled Inputs 222\u003c\/p\u003e \u003cp\u003eUpdating a Controlled Input 223\u003c\/p\u003e \u003cp\u003eControlling an Input in a Function Component 224\u003c\/p\u003e \u003cp\u003eControlling an Input in a Class Component 224\u003c\/p\u003e \u003cp\u003eLifting Up Input State 226\u003c\/p\u003e \u003cp\u003eUsing Uncontrolled Inputs 228\u003c\/p\u003e \u003cp\u003eUsing Different Form Elements 229\u003c\/p\u003e \u003cp\u003eControlling the Input Element 230\u003c\/p\u003e \u003cp\u003eControlling a textarea 230\u003c\/p\u003e \u003cp\u003eControlling a Select Element 231\u003c\/p\u003e \u003cp\u003ePreventing Default Actions 231\u003c\/p\u003e \u003cp\u003eSummary 232\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 9: Refs 233\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eWhat Refs Are 233\u003c\/p\u003e \u003cp\u003eHow to Create a Ref in a Class Component 234\u003c\/p\u003e \u003cp\u003eHow to Create a Ref in a Function Component 234\u003c\/p\u003e \u003cp\u003eUsing Refs 234\u003c\/p\u003e \u003cp\u003eCreating a Callback Ref 236\u003c\/p\u003e \u003cp\u003eWhen to Use Refs 238\u003c\/p\u003e \u003cp\u003eWhen Not to Use Refs 238\u003c\/p\u003e \u003cp\u003eExamples 239\u003c\/p\u003e \u003cp\u003eManaging Focus 239\u003c\/p\u003e \u003cp\u003eAutomatically Selecting Text 239\u003c\/p\u003e \u003cp\u003eControlling Media Playback 241\u003c\/p\u003e \u003cp\u003eSetting Scroll Position 241\u003c\/p\u003e \u003cp\u003eSummary 242\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 10: Styling React 243\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eThe Importance of Styles 243\u003c\/p\u003e \u003cp\u003eImporting CSS into the HTML File 244\u003c\/p\u003e \u003cp\u003eUsing Plain Old CSS in Components 245\u003c\/p\u003e \u003cp\u003eWriting Inline Styles 247\u003c\/p\u003e \u003cp\u003eJavaScript Style Syntax 248\u003c\/p\u003e \u003cp\u003eWhy to Use Inline Styles 249\u003c\/p\u003e \u003cp\u003eWhy Not to Use Inline Styles 249\u003c\/p\u003e \u003cp\u003eImproving Inline Styles with Style Modules 249\u003c\/p\u003e \u003cp\u003eCSS Modules 250\u003c\/p\u003e \u003cp\u003eNaming CSS Module Files 251\u003c\/p\u003e \u003cp\u003eAdvanced CSS Modules Functionality 252\u003c\/p\u003e \u003cp\u003eGlobal Classes 252\u003c\/p\u003e \u003cp\u003eClass Composition 252\u003c\/p\u003e \u003cp\u003eCSS-in- JS and Styled Components 253\u003c\/p\u003e \u003cp\u003eSummary 255\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 11: Introducing Hooks 257\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eWhat Are Hooks? 257\u003c\/p\u003e \u003cp\u003eWhy Were Hooks Introduced? 257\u003c\/p\u003e \u003cp\u003eRules of Hooks 259\u003c\/p\u003e \u003cp\u003eThe Built-in Hooks 259\u003c\/p\u003e \u003cp\u003eManaging State with useState 260\u003c\/p\u003e \u003cp\u003eSetting the Initial State 262\u003c\/p\u003e \u003cp\u003eUsing the Setter Function 262\u003c\/p\u003e \u003cp\u003ePassing a Value to a Setter 263\u003c\/p\u003e \u003cp\u003ePassing a Function to a Setter 263\u003c\/p\u003e \u003cp\u003eSetter Function Value Comparison 264\u003c\/p\u003e \u003cp\u003eHooking into the Lifecycle with useEffect 264\u003c\/p\u003e \u003cp\u003eUsing the Default useEffect Behavior 265\u003c\/p\u003e \u003cp\u003eCleaning Up After Effects 265\u003c\/p\u003e \u003cp\u003eCustomizing useEffect 266\u003c\/p\u003e \u003cp\u003eRunning Asynchronous Code with useEffect 270\u003c\/p\u003e \u003cp\u003eSubscribing to Global Data with useContext 272\u003c\/p\u003e \u003cp\u003eCombining Logic and State with useReducer 273\u003c\/p\u003e \u003cp\u003eMemoized Callbacks with useCallback 275\u003c\/p\u003e \u003cp\u003eCaching Computed Values with useMemo 278\u003c\/p\u003e \u003cp\u003eSolving Unnecessary Renders 278\u003c\/p\u003e \u003cp\u003eSolving Performance Problems 279\u003c\/p\u003e \u003cp\u003eAccessing Children Imperatively with useRef 279\u003c\/p\u003e \u003cp\u003eCustomizing Exposed Values with useImperativeHandle 280\u003c\/p\u003e \u003cp\u003eUpdating the DOM Synchronously with useLayoutEffect 281\u003c\/p\u003e \u003cp\u003eWriting Custom Hooks 281\u003c\/p\u003e \u003cp\u003eLabeling Custom Hooks with useDebugValue 283\u003c\/p\u003e \u003cp\u003eFinding and Using Custom Hooks 285\u003c\/p\u003e \u003cp\u003euse-http 285\u003c\/p\u003e \u003cp\u003ereact-fetch-hook 286\u003c\/p\u003e \u003cp\u003eaxios-hooks 286\u003c\/p\u003e \u003cp\u003ereact-hook- form 286\u003c\/p\u003e \u003cp\u003e@rehooks\/local-storage 287\u003c\/p\u003e \u003cp\u003euse-local- storage- state 287\u003c\/p\u003e \u003cp\u003eOther Fun Hooks 288\u003c\/p\u003e \u003cp\u003eLists of Hooks 288\u003c\/p\u003e \u003cp\u003eSummary 288\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 12: Routing 289\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eWhat Is Routing? 289\u003c\/p\u003e \u003cp\u003eHow Routing Works in React 291\u003c\/p\u003e \u003cp\u003eUsing React Router 293\u003c\/p\u003e \u003cp\u003eInstalling and Importing react-router- dom 293\u003c\/p\u003e \u003cp\u003eThe Router Component 294\u003c\/p\u003e \u003cp\u003eSelecting a Router 294\u003c\/p\u003e \u003cp\u003eUsing the Router Component 295\u003c\/p\u003e \u003cp\u003eLinking to Routes 296\u003c\/p\u003e \u003cp\u003eInternal Linking with Link 296\u003c\/p\u003e \u003cp\u003eInternal Navigation with NavLink 298\u003c\/p\u003e \u003cp\u003eAutomatic Linking with Redirect 302\u003c\/p\u003e \u003cp\u003eCreating Routes 302\u003c\/p\u003e \u003cp\u003eRestricting Path Matching 304\u003c\/p\u003e \u003cp\u003eUsing URL Parameters 304\u003c\/p\u003e \u003cp\u003eThe component Prop 305\u003c\/p\u003e \u003cp\u003eRender Props 306\u003c\/p\u003e \u003cp\u003eSwitching Routes 307\u003c\/p\u003e \u003cp\u003eRendering a Default Route 308\u003c\/p\u003e \u003cp\u003eRouting with Redirect 308\u003c\/p\u003e \u003cp\u003eBehind the Scenes: location, history, and match 309\u003c\/p\u003e \u003cp\u003eThe history Object 310\u003c\/p\u003e \u003cp\u003eThe location Object 313\u003c\/p\u003e \u003cp\u003eThe match Object 313\u003c\/p\u003e \u003cp\u003eReact Router Hooks 317\u003c\/p\u003e \u003cp\u003euseHistory 317\u003c\/p\u003e \u003cp\u003euseLocation 317\u003c\/p\u003e \u003cp\u003euseParams 317\u003c\/p\u003e \u003cp\u003euseRouteMatch 317\u003c\/p\u003e \u003cp\u003eSummary 318\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 13: Error Boundaries 319\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eThe Best Laid Plans 319\u003c\/p\u003e \u003cp\u003eWhat Is an Error Boundary? 320\u003c\/p\u003e \u003cp\u003eImplementing an Error Boundary 323\u003c\/p\u003e \u003cp\u003eBuilding Your Own ErrorBoundary Component 323\u003c\/p\u003e \u003cp\u003egetDerivedStateFromErrors Is a Static Method 324\u003c\/p\u003e \u003cp\u003egetDerivedStateFromErrors Runs During the Render Phase 325\u003c\/p\u003e \u003cp\u003egetDerivedStateFromErrors Receives the Error as a Parameter 325\u003c\/p\u003e \u003cp\u003egetDerivedStateFromErrors Should Return an Object for Updating State 325\u003c\/p\u003e \u003cp\u003eTesting Your Boundary 326\u003c\/p\u003e \u003cp\u003eLogging Errors with ComponentDidCatch() 327\u003c\/p\u003e \u003cp\u003eUsing a Logging Service 328\u003c\/p\u003e \u003cp\u003eResetting the State 333\u003c\/p\u003e \u003cp\u003eInstalling a Pre-Built ErrorBoundary Component 334\u003c\/p\u003e \u003cp\u003eWhat Can’t an Error Boundary Catch? 336\u003c\/p\u003e \u003cp\u003eCatching Errors in Error Boundaries with try\/catch 336\u003c\/p\u003e \u003cp\u003eCatching Errors in Event Handlers with react-error- boundary 337\u003c\/p\u003e \u003cp\u003eSummary 338\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 14: Deploying React 339\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eWhat Is Deployment? 339\u003c\/p\u003e \u003cp\u003eBuilding an App 339\u003c\/p\u003e \u003cp\u003eRunning the build Script 340\u003c\/p\u003e \u003cp\u003eExamining the build Directory 340\u003c\/p\u003e \u003cp\u003eThe Built index.html 341\u003c\/p\u003e \u003cp\u003eThe static Directory 342\u003c\/p\u003e \u003cp\u003easset-manifest. json 342\u003c\/p\u003e \u003cp\u003eWhat’s in a Name? 343\u003c\/p\u003e \u003cp\u003eHow Is a Deployed App Different? 343\u003c\/p\u003e \u003cp\u003eDevelopment Mode vs. Production 343\u003c\/p\u003e \u003cp\u003ePutting It on the Web 344\u003c\/p\u003e \u003cp\u003eWeb Server Hosting 344\u003c\/p\u003e \u003cp\u003eNode Hosting 345\u003c\/p\u003e \u003cp\u003eDeploying with Netlify 345\u003c\/p\u003e \u003cp\u003eEnabling Routing with Netlify 347\u003c\/p\u003e \u003cp\u003eEnabling Custom Domains and HTTPS 348\u003c\/p\u003e \u003cp\u003eSummary 349\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 15: Initialize a React Project from Scratch 351\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eBuilding Your Own Toolchain 351\u003c\/p\u003e \u003cp\u003eInitializing Your Project 352\u003c\/p\u003e \u003cp\u003eThe HTML Document 352\u003c\/p\u003e \u003cp\u003eThe Main JavaScript File 353\u003c\/p\u003e \u003cp\u003eThe Root Component 353\u003c\/p\u003e \u003cp\u003eRunning in the Browser 354\u003c\/p\u003e \u003cp\u003eHow Webpack Works 357\u003c\/p\u003e \u003cp\u003eLoaders 358\u003c\/p\u003e \u003cp\u003ePlugins 358\u003c\/p\u003e \u003cp\u003eAutomating Your Build Process 358\u003c\/p\u003e \u003cp\u003eMaking an HTML Template 359\u003c\/p\u003e \u003cp\u003eDevelopment Server and Hot Reloading 360\u003c\/p\u003e \u003cp\u003eTesting Tools 360\u003c\/p\u003e \u003cp\u003eInstalling and Configuring ESLint 360\u003c\/p\u003e \u003cp\u003eESLint Configuration 361\u003c\/p\u003e \u003cp\u003eHow to Fix Errors 362\u003c\/p\u003e \u003cp\u003eTesting with Jest 363\u003c\/p\u003e \u003cp\u003eCreating NPM Scripts 364\u003c\/p\u003e \u003cp\u003eStructuring Your Source Directory 365\u003c\/p\u003e \u003cp\u003eGrouping by File Type 366\u003c\/p\u003e \u003cp\u003eGrouping by Features 367\u003c\/p\u003e \u003cp\u003eSummary 367\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 16: Fetching and Caching Data 369\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eAsynchronous Code: It’s All About Timing 369\u003c\/p\u003e \u003cp\u003eJavaScript Never Sleeps 370\u003c\/p\u003e \u003cp\u003eWhere to Run Async Code in React 374\u003c\/p\u003e \u003cp\u003eWays to Fetch 376\u003c\/p\u003e \u003cp\u003eGetting Data with Fetch 377\u003c\/p\u003e \u003cp\u003eGetting Data with Axios 377\u003c\/p\u003e \u003cp\u003eUsing Web Storage 379\u003c\/p\u003e \u003cp\u003eTwo Types of Web Storage 379\u003c\/p\u003e \u003cp\u003eWhen to Use Web Storage 380\u003c\/p\u003e \u003cp\u003eWhen Not to Use Web Storage 380\u003c\/p\u003e \u003cp\u003eWeb Storage Is Synchronous 380\u003c\/p\u003e \u003cp\u003eWorking with localStorage 381\u003c\/p\u003e \u003cp\u003eStoring Data with localStorage 381\u003c\/p\u003e \u003cp\u003eReading Data from localStorage 382\u003c\/p\u003e \u003cp\u003eRemoving Data from localStorage 384\u003c\/p\u003e \u003cp\u003eSummary 385\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 17: Context Api 387\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eWhat Is Prop Drilling? 387\u003c\/p\u003e \u003cp\u003eHow Context API Solves the Problem 388\u003c\/p\u003e \u003cp\u003eCreating a Context 388\u003c\/p\u003e \u003cp\u003eCreating a Provider 389\u003c\/p\u003e \u003cp\u003eConsuming a Context 390\u003c\/p\u003e \u003cp\u003eUsing Context in a Class Component 390\u003c\/p\u003e \u003cp\u003eUsing Context in a Function Component 391\u003c\/p\u003e \u003cp\u003eCommon Use Cases for Context 391\u003c\/p\u003e \u003cp\u003eWhen Not to Use Context 392\u003c\/p\u003e \u003cp\u003eComposition as an Alternative to Context 392\u003c\/p\u003e \u003cp\u003eExample App: User Preferences 396\u003c\/p\u003e \u003cp\u003eSummary 398\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 18: React Portals 399\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eWhat Is a Portal? 399\u003c\/p\u003e \u003cp\u003eHow to Make a Portal 399\u003c\/p\u003e \u003cp\u003eWhy Not Just Render Multiple Component Trees? 403\u003c\/p\u003e \u003cp\u003eCommon Use Cases 403\u003c\/p\u003e \u003cp\u003eRendering and Interacting with a Modal Dialog 404\u003c\/p\u003e \u003cp\u003eManaging Keyboard Focus with Modals 409\u003c\/p\u003e \u003cp\u003eSummary 411\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 19: Accessibility in React 413\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eWhy Is Accessibility Important? 413\u003c\/p\u003e \u003cp\u003eAccessibility Basics 414\u003c\/p\u003e \u003cp\u003eWeb Content Accessibility Guidelines (WCAG) 414\u003c\/p\u003e \u003cp\u003eWeb Accessibility Initiative –Accessible Rich Internet Applications (WAI-ARIA) 415\u003c\/p\u003e \u003cp\u003eImplementing Accessibility in React Components 415\u003c\/p\u003e \u003cp\u003eARIA Attributes in React 416\u003c\/p\u003e \u003cp\u003eSemantic HTML 416\u003c\/p\u003e \u003cp\u003eForm Accessibility 417\u003c\/p\u003e \u003cp\u003eFocus Control in React 418\u003c\/p\u003e \u003cp\u003eSkip Links 418\u003c\/p\u003e \u003cp\u003eManaging Focus Programmatically 419\u003c\/p\u003e \u003cp\u003eMedia Queries in React 420\u003c\/p\u003e \u003cp\u003eMedia Queries in Included CSS 421\u003c\/p\u003e \u003cp\u003eUsing useMediaQuery 422\u003c\/p\u003e \u003cp\u003eSummary 422\u003c\/p\u003e \u003cp\u003e\u003cb\u003eChapter 20: Going Further 425\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003eTesting 425\u003c\/p\u003e \u003cp\u003eMocha 426\u003c\/p\u003e \u003cp\u003eEnzyme 426\u003c\/p\u003e \u003cp\u003eChai 427\u003c\/p\u003e \u003cp\u003eAssert 427\u003c\/p\u003e \u003cp\u003eExpect 428\u003c\/p\u003e \u003cp\u003eShould 428\u003c\/p\u003e \u003cp\u003eKarma 428\u003c\/p\u003e \u003cp\u003eNightwatch.js 428\u003c\/p\u003e \u003cp\u003eServer-Side\u003c\/p\u003e \u003cp\u003eRendering 429\u003c\/p\u003e \u003cp\u003eFlux 430\u003c\/p\u003e \u003cp\u003eRedux 430\u003c\/p\u003e \u003cp\u003eGraphQL 432\u003c\/p\u003e \u003cp\u003eApollo 433\u003c\/p\u003e \u003cp\u003eReact Native 434\u003c\/p\u003e \u003cp\u003eNext.js 434\u003c\/p\u003e \u003cp\u003eGatsby 434\u003c\/p\u003e \u003cp\u003ePeople to Follow 435\u003c\/p\u003e \u003cp\u003eUseful Links and Resources 435\u003c\/p\u003e \u003cp\u003eSummary 436\u003c\/p\u003e \u003cp\u003eIndex 437 \u003c\/p\u003e\u003c\/font\u003e\u003c\/p\u003e\r\n\r\n\u003cp\u003e\u003cfont size=\"3\"\u003eSubject Areas: Computer science [\u003ca title=\"See our other books on Computer science\" href=\"https:\/\/freshlyprintedbooks.co.uk\/search?q=%22Computer%20science%20%5BUY%5D%22\"\u003eUY\u003c\/a\u003e]\u003c\/font\u003e\u003c\/p\u003e\r\n\r\n\r\n\u003c\/font\u003e","brand":"Wiley","offers":[{"title":"Brand New","offer_id":52509181182232,"sku":"9781119685548","price":25.99,"currency_code":"GBP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0730\/2037\/5320\/files\/9781119685548.jpg?v=1786496579","url":"https:\/\/freshlyprintedbooks.co.uk\/products\/beginning-reactjs-foundations-building-user-interfaces-with-reactjs-an-approachable-guide-paperback-softback-9781119685548","provider":"Freshly Printed Books","version":"1.0","type":"link"}