Full-Stack React, TypeScript, and Node: Build cloud-ready web applications using React 17 with Hooks and GraphQL

648 Pages·2020·27.739 MB·English

by  David Choi

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
[e-mail] 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