Hari Narayn - Just React!: Learn React the React Way

Just React!Learn React the React WayHari NaraynJust React!: Learn React the React Way Hari Narayn Melbourne, VIC, Australia ISBN-13 (pbk): 978-1-4842-8293-9 ISBN-13 (electronic): 978-1-4842-8294-6 https://doi.org/10.1007/978-1-4842-8294-6 Copyright 2022 by Hari Narayn This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made.

The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Aditee Mirashi Development Editor: James Markham Coordinating Editor: Aditee Mirashi Cover designed by eStudioCalamar Cover image designed by Freepik (www.freepik.com) Distributed to the book trade worldwide by Springer Science+Business Media New York, 1 New York Plaza, Suite 4600, New York, NY 10004-1562, USA. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@ springer-sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail booktranslations@springernature.com; for reprint, paperback, or audio rights, please e-mail bookpermissions@springernature.com.

Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the books product page, located at https://github.com/Apress/Just-React. For more detailed information, please visit http://www.apress.com/source- code. Printed on acid-free paper Dedicated to my precious daughter, Ithal,and all her hilarious reactionsTable of Contents About the Author ix About the Technical Reviewer xi Acknowledgments xiii Introduction xv Chapter 1: Time to React 1 Think (HTML and JavaScript) Before You React 1 How React Reacts Compared with JavaScript 7 React vs Angular 13 Where to React? 13 Summary 16 Chapter 2: JavaScript Before You React 17 Get Started 17 Variables 20 Reference Types 23 Conditionals and Loops 27 Functions 29 Events 33 Arrow Functions 34 Modules 38 Subclassing 41 Async/await 43 Template Literals 48 Summary 50 v Table of ConTenTs Chapter 3: Start Reacting 51 Set Up an Environment to React 51 How to React? 52 create-react-app 66 Introduction to Components 70 JSX 71 Reacting to Inputs 72 Styling Your Component 75 State in React 77 Virtual DOM 82 Props 85 Just React to Child 90 Props and State 96 React on a Condition 97 Summary 101 Chapter 4: Think React 103 VS Code Extensions 103 Restructuring the React Form 104 Combining Reactions 116 Sibling Reactions 122 Component Chat Continues 127 Reacting to Edits 135 More Reactions to the Parent 142 Summary 146 Chapter 5: Rethink React 149 React Lazy and Suspense 150 Props Drilling Issue 154 Multi-view React App 161 vi Table of ConTenTs React Context 185 Summary 189 Chapter 6: React to Bugs 191 Chrome Reacts 191 Dont React, Debug First 195 Console Reactions 197 React to Errors 200 React Developer Tools 205 React to Bugs Within VS Code 209 Summary 214 Chapter 7: Reacting in Style 215 CSS-in-JS 216 Styled Components 217 CSS 219 Sassy CSS (SCSS) 222 CSS Modules 226 CodeSandbox 231 Material UI 233 Responsive React 234 Summary 241 Chapter 8: Hook into React 243 Life of a Class 243 Life of a Function and the Birth of Hooks 250 useState 253 useEffect 256 useRef 262 useReducer 266 useContext 273 vii Table of ConTenTs Remember to React 278 useMemo 285 useCallback 289 Few More Hookies 294 Custom Hookies 295 Summary 298 Chapter 9: React Back 299 React to Routes 299 Manage Access Before We React 304 HTTP Reactions 330 Redux 334 Summary 341 Chapter 10: New Reactions 343 New Root and the New Way to Render 343 React Concurrently 346 React Slowly for Faster Response 347 Server on Suspense 351 Automatic Batching 354 Too Strict Mode 359 New Hookies 360 Summary 361 Index 363 viii About the AuthorHari Narayn is a passionate techie with 12 years of experience in architecting and building web and mobile applications.

He has worked with React, Microsoft 365, SharePoint, Azure, Teams, Power Platform, .Net, Angular, and JavaScript (JS). He has built web and mobile solutions for various clients across the world. He is a Microsoft Certified Power Platform Solutions Architect, Microsoft Certified M365 Developer Associate, and a Microsoft Certified Azure Solutions Architect Expert. He is also the author of the Apress book Building the Modern Workplace with SharePoint Online. He is a native of Kerala, India, and is currently based in Melbourne, Victoria, Australia. ix About the Technical ReviewerFrank W.Zammetti is a lead architect/developer for one of the largest financial firms in the world by day and an author/musician/techie/husband/father by night. ix About the Technical ReviewerFrank W.Zammetti is a lead architect/developer for one of the largest financial firms in the world by day and an author/musician/techie/husband/father by night.

He is the author of 13 books for Apress on various topics in software development, as well as several independent articles for various publications. He has served as a technical reviewer on several other books and has been a speaker at various technical conferences and meetups. Frank is a contributor to several open source projects and founder of a few as well. In addition to technical writing, his first novel, The Darkness Beyond the Light, is now available for free online. And if all that isnt enough, Frank is also exceptionally good at finding the corner of furniture with his toes in the middle of the night. Like, seriously, why does this keep happening to Frank?! xi Acknowledgments First, Id like to say thanks to my wonderful wife, Divya, for keeping me motivated and helping me through this writing process.

Without her constant support, this book would not have been possible. Thanks to my adorable daughter, Ithal, for all her cute interruptions. Thanks to my mom for her endless support and care. Id like to thank my coordinating editor, Aditee Mirashi, for making my job easy by providing continuous support. My sincere thanks go out to the development editor, James Markham, the production editor Dulcy Chellappa, the production coordinator Krishnan R S, and the entire team at Apress and Springer Nature who worked on this book. Frank W.