React: Up & Running. Building Web Applications

233 Pages·2022·5.615 MB·English

by  Stoyan Stefanov

SECOND EDITION
React: Up & Running
Building Web Applications
Stoyan Stefanov
BBeeiijjiinngg BBoossttoonn FFaarrnnhhaamm SSeebbaassttooppooll TTookkyyoo
React: Up & Running
by Stoyan Stefanov
Copyright © 2022 Stoyan Stefanov. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are
also available for most titles (https://oreilly.com). For more information, contact our corporate/institu‐
tional sales department: 800-998-9938 or [email protected].
Acquisitions Editor: Jennifer Pollock Indexer: Sam Arnold-Boyd
Development Editor: Angela Rufino Interior Designer: David Futato
Production Editor: Kristen Brown Cover Designer: Karen Montgomery
Copyeditor: Justin Billing Illustrator: Kate Dullea
Proofreader: Piper Editorial Consulting, LLC
July 2016: First Edition
November 2021: Second Edition
Revision History for the Second Edition
2021-11-11: First Release
See https://oreilly.com/catalog/errata.csp?isbn=9781492051466 for release details.
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. React: Up & Running, the cover image,
and related trade dress are trademarks of O’Reilly Media, Inc.
While the publisher and the author have used good faith efforts to ensure that the information and
instructions contained in this work are accurate, the publisher and the author disclaim all responsibility
for errors or omissions, including without limitation responsibility for damages resulting from the use of
or reliance on this work. Use of the information and instructions contained in this work is at your own
risk. If any code samples or other technology this work contains or describes is subject to open source
licenses or the intellectual property rights of others, it is your responsibility to ensure that your use
thereof complies with such licenses and/or rights.
978-1-492-05146-6
[LSI]
To Eva, Zlatina, and Nathalie

Table of Contents
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
1. Hello World. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Setup 1
Hello React World 2
What Just Happened? 3
React.createElement() 5
JSX 6
Setup Babel 7
Hello JSX World 8
On Transpilation 8
Next: Custom Components 9
2. The Life of a Component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
A Custom Function Component 11
A JSX Version 12
A Custom Class Component 13
Which Syntax to Use? 13
Properties 14
Properties in Function Components 15
Default Properties 16
State 17
A textarea Component 18
Make It Stateful 19
A Note on DOM Events 21
Event Handling in the Olden Days 21
Event Handling in React 23
v
Event-Handling Syntax 23
Props Versus State 24
Props in Initial State: an Antipattern 25
Accessing the Component from the Outside 25
Lifecycle Methods 26
Lifecycle Example: Log It All 27
Paranoid State Protection 29
Lifecycle Example: Using a Child Component 30
Performance Win: Prevent Component Updates 33
Whatever Happened to Function Components? 34
3. Excel: A Fancy Table Component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Data First 35
Table Headers Loop 36
Table Headers Loop, a Terse Version 37
Debugging the Console Warning 39
Adding <td> Content 40
Prop Types 42
Can You Improve the Component? 44
Sorting 44
Can You Improve the Component? 46
Sorting UI Cues 46
Editing Data 48
Editable Cell 49
Input Field Cell 51
Saving 51
Conclusion and Virtual DOM Diffs 52
Search 53
State and UI 54
Filtering Content 57
Update the save() Method 59
Can You Improve the Search? 59
Instant Replay 60
Cleaning Up Event Handlers 62
Cleaning Solution 63
Can You Improve the Replay? 64
An Alternative Implementation? 64
Download the Table Data 64
Fetching Data 66
vi | Table of Contents
4. Functional Excel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
A Quick Refresher: Function versus Class Components 69
Rendering the Data 70
The State Hook 71
Sorting the Table 73
Editing Data 75
Searching 76
Lifecycles in a World of Hooks 77
Troubles with Lifecycle Methods 77
useEffect() 78
Cleaning Up Side Effects 79
Trouble-Free Lifecycles 80
useLayoutEffect() 81
A Custom Hook 83
Wrapping up the Replay 85
useReducer 86
Reducer Functions 87
Actions 87
An Example Reducer 88
Unit Testing Reducers 90
Excel Component with a Reducer 91
5. JSX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
A Couple Tools 95
Whitespace in JSX 97
Comments in JSX 99
HTML Entities 100
Anti-XSS 101
Spread Attributes 101
Parent-to-Child Spread Attributes 102
Returning Multiple Nodes in JSX 104
A Wrapper 104
A Fragment 105
An Array 105
Differences Between JSX and HTML 106
No class, What for? 106
style Is an Object 107
Closing Tags 107
camelCase Attributes 108
Namespaced Components 108
JSX and Forms 109
Table of Contents | vii
onChange Handler 109
value Versus defaultValue 111
<textarea> Value 111
<select> Value 112
Controlled and Uncontrolled Components 113
6. Setting Up for App Development. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Create React App 119
Node.js 120
Hello CRA 120
Build and Deploy 122
Mistakes Were Made 123
package.json and node_modules 123
Poking Around the Code 124
Indices 124
JavaScript: Modernized 124
CSS 125
Moving On 126
7. Building the App’s Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Setup 127
Start Coding 127
Refactoring the Excel Component 129
Version 0.0.1 of the New App 130
CSS 131
Local Storage 132
The Components 133
Discovery 134
Logo and a Body 136
Logo 136
Body 136
Discoverable 136
<Button> Component 137
Button.js 138
classnames Package 139
Forms 140
<Suggest> 140
<Rating> Component 142
A <FormInput> “Factory” 144
<Form> 147
<Actions> 151
viii | Table of Contents