React. Up & Running. Building Web Applications

221 Pages·2016·10.8 MB·English

by  Stoyan Stefanov

React

Up & Running
BUILDING WEB APPLICATIONS
Stoyan Stefanov

React: Up & Running
Building Web Applications
Stoyan Stefanov
BBeeiijjiinngg BBoossttoonn FFaarrnnhhaamm SSeebbaassttooppooll TTookkyyoo
React: Up & Running
by Stoyan Stefanov
Copyright © 2016 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 (http://safaribooksonline.com). For more information, contact our corporate/
institutional sales department: 800-998-9938 or [email protected].
Editor: Meg Foley Indexer: Wendy Catalano
Production Editor: Nicole Shelby Interior Designer: David Futato
Copyeditor: Kim Cofer Cover Designer: Randy Comer
Proofreader: Jasmine Kwityn Illustrator: Rebecca Demarest
July 2016: First Edition
Revision History for the First Edition
2016-07-12: First Release
See http://oreilly.com/catalog/errata.csp?isbn=9781491931820 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-491-93182-0
[LSI]
To Eva, Zlatina, and Nathalie

Table of Contents
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
1. Hello World. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Setup 1
Hello React World 2
What Just Happened? 4
React.DOM.* 5
Special DOM Attributes 8
React DevTools Browser Extension 9
Next: Custom Components 10
2. The Life of a Component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Bare Minimum 11
Properties 13
propTypes 14
Default Property Values 17
State 18
A Stateful Textarea Component 18
A Note on DOM Events 22
Event Handling in the Olden Days 22
Event Handling in React 24
Props Versus State 24
Props in Initial State: An Anti-Pattern 24
Accessing the Component from the Outside 25
Changing Properties Mid-Flight 27
Lifecycle Methods 28
Lifecycle Example: Log It All 29
Lifecycle Example: Use a Mixin 32
v
Lifecycle Example: Using a Child Component 33
Performance Win: Prevent Component Updates 36
PureRenderMixin 39
3. Excel: A Fancy Table Component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Data First 41
Table Headers Loop 42
Debugging the Console Warning 44
Adding <td> Content 46
How Can You Improve the Component? 48
Sorting 48
How Can You Improve the Component? 50
Sorting UI Cues 50
Editing Data 51
Editable Cell 52
Input Field Cell 54
Saving 54
Conclusion and Virtual DOM Diffs 55
Search 56
State and UI 58
Filtering Content 60
How Can You Improve the Search? 62
Instant Replay 63
How Can You Improve the Replay? 64
An Alternative Implementation? 64
Download the Table Data 65
4. JSX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Hello JSX 67
Transpiling JSX 68
Babel 69
Client Side 69
About the JSX transformation 71
JavaScript in JSX 73
Whitespace in JSX 75
Comments in JSX 76
HTML Entities 77
Anti-XSS 78
Spread Attributes 79
Parent-to-Child Spread Attributes 79
Returning Multiple Nodes in JSX 81
JSX Versus HTML Differences 83
vi | Table of Contents
No class, What for? 83
style Is an Object 83
Closing Tags 83
camelCase Attributes 84
JSX and Forms 84
onChange Handler 84
value Versus defaultValue 84
<textarea> Value 85
<select> Value 86
Excel Component in JSX 88
5. Setting Up for App Development. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
A Boilerplate App 89
Files and Folders 90
index.html 91
CSS 92
JavaScript 92
JavaScript: Modernized 93
Installing Prerequisites 96
Node.js 96
Browserify 97
Babel 97
React, etc. 97
Let’s Build 98
Transpile JavaScript 98
Package JavaScript 98
Package CSS 98
Results! 99
Windows Version 99
Building During Development 99
Deployment 100
Moving On 101
6. Building an App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Whinepad v.0.0.1 103
Setup 103
Start Coding 104
The Components 106
Setup 106
Discover 106
<Button> Component 108
Button.css 109
Table of Contents | vii
Button.js 109
Forms 113
<Suggest> 113
<Rating> Component 116
A <FormInput> “Factory” 119
<Form> 121
<Actions> 124
Dialogs 125
App Config 128
<Excel>: New and Improved 129
<Whinepad> 138
Wrapping It All Up 142
7. Lint, Flow, Test, Repeat. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
package.json 143
Configure Babel 144
scripts 144
ESLint 145
Setup 145
Running 145
All the Rules 147
Flow 147
Setup 147
Running 148
Signing Up for Typechecking 148
Fixing <Button> 149
app.js 150
More on Typechecking props and state 152
Export/Import Types 153
Typecasting 154
Invariants 155
Testing 156
Setup 156
First Test 158
First React Test 158
Testing the <Button> Component 159
Testing <Actions> 163
More Simulated Interactions 165
Testing Complete Interactions 166
Coverage 169
viii | Table of Contents