{"product_id":"beginning-reactjs-foundations-building-user-interfaces-with-reactjs-isbn-9781119685548","title":"Beginning ReactJS Foundations Building User Interfaces with ReactJS","description":"\u003cp\u003e\u003cb\u003eQuickly learn the most widely used front-end development language with ease and confidence\u003c\/b\u003e \u003c\/p\u003e\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\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\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\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\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 \u003cp\u003e\u003cb\u003eAbout the Author\u003c\/b\u003e\u003c\/p\u003e \u003cp\u003e\u003cb\u003eCHRIS MINNICK\u003c\/b\u003e is an accomplished author, trainer, and web developer with experience working on web and mobile projects with both small and large companies. \u003c\/p\u003e\u003cp\u003eThe 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.  \u003c\/p\u003e\u003cp\u003e\u003cb\u003eAn easy-to-use guide to the most popular JavaScript library in the world\u003c\/b\u003e\u003c\/p\u003e  \u003cp\u003eIn \u003ci\u003eReactJS Foundations: Building User Interfaces with ReactJS – An Approachable Guide,\u003c\/i\u003e author and full-stack developer Chris Minnick walks readers through foundational programming concepts using the explosively popular front-end tool known as ReactJS. The book teaches you how to understand React and how to immediately begin building applications with it. \u003c\/p\u003e\u003cp\u003eIn the book, you’ll learn the technical terminology used by ReactJS developers and work with relevant and modern examples perfect for React and programming newbies and veterans alike. It assumes no prior software engineering knowledge or experience, explaining and clarifying terms of art as they’re introduced. \u003c\/p\u003e\u003cp\u003ePerfect for readers new to JavaScript and front-end development, including those who are coming to programming for the first time, \u003ci\u003eReactJS Foundations\u003c\/i\u003e is a fantastic resource for recent bootcamp grads, self-taught programmers making a career switch, and developers migrating from WordPress, Drupal, or other programming languages. It’s also a must-read for veteran JavaScript developers looking for a skimmable and accessible React guide to get them up to speed quickly. \u003c\/p\u003e\u003cp\u003eThis handy guide includes: \u003c\/p\u003e\u003cul\u003e\n\u003cli\u003eGuides to understanding the JavaScript features used by React\u003c\/li\u003e \u003cli\u003eA step-by-step tutorial in writing your first React application\u003c\/li\u003e \u003cli\u003eHow to write JSX code\u003c\/li\u003e \u003cli\u003eHow to write class and function components\u003c\/li\u003e \u003cli\u003eHow to use advanced features of React version 17+, including hooks, error boundaries, refs, and portals\u003c\/li\u003e\n\u003c\/ul\u003e \u003cp\u003e\u003cb\u003eWrox Beginning guides\u003c\/b\u003e are crafted to make learning programming languages and technologies easier than you think, providing a structured, tutorial format that guides you through all the techniques involved.\u003c\/p\u003e","brand":"Wiley","offers":[{"title":"Default Title","offer_id":47988799373541,"sku":"NP9781119685548","price":50.0,"currency_code":"USD","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1842\/7735\/files\/9781119685548.jpg?v=1761781635","url":"https:\/\/k12savings.com\/es\/products\/beginning-reactjs-foundations-building-user-interfaces-with-reactjs-isbn-9781119685548","provider":"K12savings","version":"1.0","type":"link"}