Details

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

<p><b>About the Author</b></p> <p><b>CHRIS MINNICK</b> is an accomplished author, trainer, and web developer with experience working on web and mobile projects with both small and large companies. <p>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.

<p><b>An easy-to-use guide to the most popular JavaScript library in the world</b></p> <p>In <i>ReactJS Foundations: Building User Interfaces with ReactJS – An Approachable Guide,</i> 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. <p>In 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. <p>Perfect for readers new to JavaScript and front-end development, including those who are coming to programming for the first time, <i>ReactJS Foundations</i> 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. <p>This handy guide includes: <ul><li>Guides to understanding the JavaScript features used by React</li> <li>A step-by-step tutorial in writing your first React application</li> <li>How to write JSX code</li> <li>How to write class and function components</li> <li>How to use advanced features of React version 17+, including hooks, error boundaries, refs, and portals</li></ul> <p><b>Wrox Beginning guides</b> 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.

US