Full-Stack React, TypeScript, and Node Build cloud-ready web applications using React 17 with Hooks and GraphQL David Choi BIRMINGHAM—MUMBAI Full-Stack React, TypeScript, and Node Copyright © 2020 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author(s), nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. Commissioning Editor: Pavan Ramchandani Acquisition Editor: Ashitosh Gupta Senior Editor: Hayden Edwards Content Development Editor: Divya Vijayan Technical Editor: Deepesh Patel and Saurabh Kadave Copy Editor: Safis Editing Project Coordinator: Kinjal Bari Proofreader: Safis Editing Indexer: Pratik Shirodkar Production Designer: Jyoti Chauhan First published: December 2020 Production reference: 1181220 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-83921-993-1 www.packt.com To my beautiful wife, Eun. Thank you for your faith and love. I made it because of you. – David Choi Packt.com Subscribe to our online digital library for full access to over 7,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website. Why subscribe? • Spend less time learning and more time coding with practical eBooks and videos from over 4,000 industry professionals • Improve your learning with Skill Plans built especially for you • Get a free eBook or video every month • Fully searchable for easy access to vital information • Copy and paste, print, and bookmark content Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at packt.com and, as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details. At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks. Contributors About the author David Choi is a developer with over 10 years' experience in building enterprise-class applications using a variety of frameworks and languages. Most of his professional development experience has involved working in finance for companies such as JPMorgan, CSFB, and Franklin Templeton. He currently works at his own start-up, DzHaven, building an application to help devs help other devs. You can find David on YouTube at the David Choi channel, or on Twitter at jsoneaday. I would like to thank the good people at Packt, and Mike Rourke, without whose help this book would not have been possible. About the reviewer Mike Rourke is a software engineer based in Chicago who works primarily with web technologies and the Node.js ecosystem. He has been writing code for over 10 years. Mike started out writing VB and switched to JavaScript about 2 years ago. He loves all aspects of programming and spends most of his free time learning new technologies and improving his skills. Packt is searching for authors like you If you're interested in becoming an author for Packt, please visit authors. packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea. Table of Contents Preface Section 1: Understanding TypeScript and How It Can Improve Your JavaScript 1 Understanding TypeScript Technical requirements 20 Dynamic versus static typing 23 What is TypeScript? 20 Object-oriented programming 29 Why is TypeScript necessary? 21 Summary 33 2 Exploring TypeScript Technical requirements 36 Functions as types 46 What are types? 36 The never type 47 How do types work? 36 Understanding classes and interfaces 48 Exploring TypeScript types 38 Classes 48 The any type 38 Interfaces 56 The unknown type 39 Intersection and union types 42 Understanding inheritance 58 Literal types 43 Abstract classes 62 Type aliases 44 Interface 65 Function return types 45 Learning generics 67 ii Table of Contents Learning the latest features Nullish coalescing 72 and configuring the compiler 70 TypeScript configuration 72 Optional chaining 70 Summary 73 3 Building Better Apps with ES6+ Features Technical requirements 76 find 89 Learning about ES6 variable filter 90 types and JavaScript scoping 76 map 91 reduce 92 Learning about arrow functions 79 some and every 93 Changing the this context 81 Learning about spread, Learning about new collection destructuring, and rest 84 types 94 Spread, Object.assign, and Array.concat 84 Set 94 Rest 88 Map 95 Learning about new array Learning about async await 96 functions 89 Summary 102 Section 2: Learning Single-Page Application Development Using React 4 Learning Single-Page Application Concepts and How React Enables Them Technical requirements 106 Understanding how React helps Understanding how websites build SPAs 109 were built in Attributes of a React application 110 the past 106 Summary 122 Understanding SPA benefits and attributes 107 Table of Contents iii 5 React Development with Hooks Technical requirements 123 improvement over class-style Understanding the limitations components 143 and issues with the old class- Comparing and contrasting the style components 124 class way versus the Hooks way 158 State 125 Lifecycle methods 126 Code reuse 158 Simplicity 159 Learning React Hooks and understanding how it is an Summary 159 6 Setting Up Our Project Using create-react-app and Testing with Jest Technical requirements 162 Mocking with jest.fn 191 Learning React development Component mocking 198 methods and about the build Learning common tools system 162 and practices for React Project tools 162 development 207 Transpilation 170 VS Code 207 Code repositories 172 Prettier 209 Understanding client-side Chrome Debugger 209 testing for React 175 Alternative IDEs 213 Mocking 190 Summary 214 7 Learning Redux and React Router Technical requirements 215 Learning about React Router 241 Learning about Redux state 216 Summary 253 Reducers and actions 217 React Context 232