Learning React : Modern Patterns for Developing React Apps

If you want to learn how to build efficient React applications, this is your book. Ideal for web developers and software engineers who understand how JavaScript, CSS, and HTML work in the browser, this updated edition provides best practices and patterns for writing modern React code. No prior knowledge of React or functional JavaScript is necessary. With their learning road map, authors Alex Banks and Eve Porcello show you how to create UIs that can deftly display changes without page reloads on large-scale, data-driven websites. You’ll also discover how to work with functional programming and the latest ECMAScript features. Once you learn how to build React components with this hands-on guide, you’ll understand just how useful React can be in your organization. • Understand key functional programming concepts with JavaScript • Look under the hood to learn how React runs in the browser • Create application presentation layers with React components • Manage data and reduce the time you spend debugging applications • Incorporate React Hooks to manage state and fetch data • Use a routing solution for single-page application features • Learn how to structure React applications with servers in mind Copyright 4 Table of Contents 5 Preface 11 Conventions Used in This Book 11 Using Code Examples 12 O’Reilly Online Learning 13 How to Contact Us 13 Acknowledgments 13 Chapter 1. Welcome to React 15 A Strong Foundation 16 React’s Past and Future 16 Learning React: Second Edition Changes 17 Working with the Files 18 File Repository 18 React Developer Tools 18 Installing Node.js 19 Chapter 2. JavaScript for React 21 Declaring Variables 22 The const Keyword 22 The let Keyword 23 Template Strings 25 Creating Functions 26 Function Declarations 26 Function Expressions 26 Default Parameters 28 Arrow Functions 28 Compiling JavaScript 31 Objects and Arrays 32 Destructuring Objects 32 Destructuring Arrays 34 Object Literal Enhancement 34 The Spread Operator 35 Asynchronous JavaScript 37 Simple Promises with Fetch 38 Async/Await 39 Building Promises 40 Classes 41 ES6 Modules 42 CommonJS 44 Chapter 3. Functional Programming with JavaScript 45 What It Means to Be Functional 46 Imperative Versus Declarative 47 Functional Concepts 50 Immutability 50 Pure Functions 52 Data Transformations 54 Higher-Order Functions 61 Recursion 62 Composition 65 Putting It All Together 66 Chapter 4. How React Works 71 Page Setup 71 React Elements 72 ReactDOM 75 Children 75 React Components 79 React Components: A Historical Tour 83 Chapter 5. React with JSX 85 React Elements as JSX 85 JSX Tips 86 Mapping Arrays with JSX 87 Babel 87 Recipes as JSX 89 React Fragments 96 Intro to webpack 98 Creating the Project 99 Loading the Bundle 108 Source Mapping 108 Create React App 109 Chapter 6. React State Management 111 Building a Star Rating Component 112 The useState Hook 113 Refactoring for Advanced Reusability 118 State in Component Trees 120 Sending State Down a Component Tree 120 Sending Interactions Back up a Component Tree 123 Building Forms 127 Using Refs 128 Controlled Components 129 Creating Custom Hooks 131 Adding Colors to State 133 React Context 134 Placing Colors in Context 136 Retrieving Colors with useContext 137 Stateful Context Providers 139 Custom Hooks with Context 140 Chapter 7. Enhancing Components with Hooks 143 Introducing useEffect 143 The Dependency Array 146 Deep Checking Dependencies 150 When to useLayoutEffect 155 Rules to Follow with Hooks 157 Improving Code with useReducer 160 useReducer to Handle Complex State 162 Improving Component Performance 164 shouldComponentUpdate and PureComponent 167 When to Refactor 168 Chapter 8. Incorporating Data 169 Requesting Data 169 Sending Data with a Request 171 Uploading Files with fetch 171 Authorized Requests 172 Saving Data Locally 173 Handling Promise States 176 Render Props 179 Virtualized Lists 181 Creating a Fetch Hook 186 Creating a Fetch Component 188 Handling Multiple Requests 190 Memozing Values 191 Waterfall Requests 195 Throttling the Network Speed 198 Parallel Requests 199 Waiting for Values 201 Canceling Requests 202 Introducing GraphQL 205 GitHub GraphQL API 205 Making a GraphQL Request 207 Chapter 9. Suspense 213 Error Boundaries 215 Code Splitting 219 Introducing: The Suspense Component 221 Using Suspense with Data 222 Throwing Promises 226 Building Suspenseful Data Sources 230 Fiber 234 Chapter 10. React Testing 237 ESLint 237 ESLint Plug-Ins 241 Prettier 243 Configuring Prettier by Project 243 Prettier in VSCode 244 Typechecking for React Applications 245 PropTypes 245 Flow 249 TypeScript 252 Test-Driven Development 255 TDD and Learning 255 Incorporating Jest 256 Create React App and Testing 256 Testing React Components 260 Queries 263 Testing Events 264 Using Code Coverage 266 Chapter 11. React Router 269 Incorporating the Router 270 Router Properties 273 Nesting Routes 275 Using Redirects 278 Routing Parameters 279 Chapter 12. React and the Server 285 Isomorphic Versus Universal 285 Client and Server Domains 286 Server Rendering React 288 Server Rendering with Next.js 294 Gatsby 299 React in the Future 301 Index 303 About the Authors 309 Colophon 309 If You Want To Learn How To Build Efficient React Applications, This Is Your Book. Ideal For Web Developers And Software Engineers Who Understand How Javascript, Css, And Html Work In The Browser, This Updated Edition Provides Best Practices And Patterns For Writing Modern React Code. No Prior Knowledge Of React Or Functional Programming Is Necessary. Authors Alex Banks And Eve Porcello Show You How To Create Uis That Can Deftly Display Changes Without Page Reloads On Large-scale Data-driven Websites. You'll Also Discover How To Work With Functional Programming And The Latest Ecmascript Features. Once You Learn How To Build React Components With This Hands-on Guide, You'll Understand Just How Useful React Can Be In Your Organization. Understand Key Functional Programming Concepts With Javascript Look Under The Hood To Learn How React Runs In The Browser Create Application Presentation Layers With React Components Manage Data And Reduce The Time You Spend Debugging Applications Explore React's Component Lifecycle To Improve Ui Performance Use A Routing Solution For Single-page Application Features Learn How To Structure React Applications With Servers In Mind This book is for developers who want to learn the React library while learning the latest techniques currently emerging in the JavaScript language. This book does not assume any knowledge of React at all, but you will be better prepared for the contents of this book if you are comfortable with HTML, CSS, and JavaScript.