React Design Patterns and Best Practices: Design, build & deploy production-ready web apps using standard industry practices

338 Pages·2019·7.171 MB·English

by  Carlos Santana Roldán

React Design Patterns and
Best Practices
Second Edition
Design, build and deploy production-ready web applications
using standard industry practices
Carlos Santana Roldán
BIRMINGHAM - MUMBAI
mapt.io
Mapt is an online digital library that gives you full access to over 5,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
Mapt is fully searchable
Copy and paste, print, and bookmark content
Packt.com
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 www.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.
React Design Patterns and Best Practices
Second Edition
Copyright © 2019 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, 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: Kunal Chaudhari
Acquisition Editor: Larissa Pinto
Content Development Editor: Mohammed Yusuf Imaratwale
Technical Editor: Leena Patil
Copy Editor: Safis Editing
Project Coordinator: Pragati Shukla
Proofreader: Safis Editing
Indexer: Tejal Daruwale Soni
Graphics: Alishon Mendonsa
Production Coordinator: Tom Scaria
First published: January 2017
Second edition: March 2019
Production reference: 1290319
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-78953-017-9
www.packtpub.com
Contributors
About the author
Carlos Santana Roldán is a senior web developer with more than 12 years of experience.
Currently, he is working as a Senior React Developer at MindBody Inc. He is the founder of
Dev Education, one of the most popular developer communities in Latin America, training
people in web technologies such as React, Node.js, GraphQL, and JavaScript in general.
About the reviewer
Mayur Tanna is a senior software consultant with over 10 years of experience. He has
worked on various high-value projects with international clients such as the World Bank
and the United Nations, and played a key role in creating the architecture of those projects
using the latest technologies, including React, Angular, Node.js, MongoDB, Spring Boot,
Firebase, Amazon Web Services, and Google Cloud Platform. Mayur is the coauthor of
Serverless Web Applications with React and Firebase by Packt Publishing. He holds a master's
degree in computer applications and has trained lot of engineering students through tech
workshops. In his free time, he plays table tennis and cricket.
I want to thank my wife, Dr. Purna; my parents, Mr. Ratilal and Mrs. Nirmala; my little
child, Dhyey; and the rest of my family for their valuable support. Without their support,
the review of this book would not have been possible. I would also like to thank the Packt
team for giving me the opportunity to review this book.
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 1
Section 1: Hello React!
Chapter 1: Taking Your First Steps with React 9
Declarative programming 10
React elements 11
Unlearning everything 13
Common misconceptions 16
Summary 19
Chapter 2: Clean Up Your Code 20
JSX 20
Babel 7 21
Hello, World! 23
DOM elements and React components 23
Props 24
Children 24
Differences with HTML 25
Attributes 26
Style 26
Root 26
Spaces 28
Boolean attributes 29
Spread attributes 29
JavaScript templating 30
Common patterns 30
Multi-line 31
Multi-properties 32
Conditionals 32
Loops 37
Control statements 37
Sub-rendering 39
Code style 40
EditorConfig 40
Configuring EditorConfig 40
ESLint 41
Installation 41
Configuration 42
Git hooks 44
React plugin 45
Airbnb React/JSX style guide 47
Table of Contents
The basics of functional programming 49
First-class objects 49
Purity 50
Immutability 50
Currying 51
Composition 52
FP and user interfaces 52
Summary 53
Section 2: How React works
Chapter 3: Creating Truly Reusable Components 55
Creating classes 56
The createClass factory 56
Extending React.Component 57
The main differences 57
Props 57
State 59
Autobinding 60
Stateless components 62
Props and context 63
The this keyword 64
State 64
Life cycle 64
Refs and event handlers 64
Optimization 65
Layout components 65
The state 70
External libraries 70
How it works 71
Asynchronous 72
Using the state 73
Derivables 74
The render method 75
React hooks 76
Prop types 77
React Docgen 80
Reusable components 82
Fragments 86
Summary 88
Chapter 4: Compose All the Things 89
Communication between components 90
Children 91
The container and presentational pattern 93
Mixins 98
Higher order components 102
[ ii ]
Table of Contents
Recompose 105
Context 108
FunctionAsChild 110
Summary 112
Chapter 5: Proper Data Fetching 113
Data flow 114
Child-parent communication (callbacks) 115
Common parent 117
Data fetching 118
React-refetch 123
Context API 129
Summary 132
Chapter 6: Write Code for the Browser 134
Forms 135
Uncontrolled components 135
Controlled components 140
JSON schema 142
Handling events 144
Refs 147
Animations 151
React motion 153
Scalable Vector Graphics 155
Summary 157
Section 3: Performance, Improvements and
Production!
Chapter 7: Make Your Components Look Beautiful 159
CSS in JavaScript 160
Inline styles 162
Radium 166
CSS modules 170
Webpack 4 171
Setting up a project 171
Locally scoped CSS 175
Atomic CSS modules 180
React CSS modules 182
Styled components 184
Summary 187
Chapter 8: Server-Side Rendering for Fun and Profit 188
Universal applications 189
Reasons to implement SSR 190
[ iii ]
Table of Contents
SEO 190
A common code base 191
Better performance 192
Don't underestimate the complexity 192
A basic example 193
A data fetching example 199
Next.js 203
Summary 207
Chapter 9: Improve the Performance of Your Applications 208
Reconciliation 209
Keys 210
Optimization techniques 211
shouldComponentUpdate 213
Stateless functional components 216
Common solutions 216
Why did you update? 217
Creating functions inside the render method 219
Constants props 222
Refactoring and good design 224
Tools and libraries 230
Immutability 230
Babel plugins 231
Summary 232
Chapter 10: About Testing and Debugging 234
The benefits of testing 235
Painless JavaScript testing with Jest 236
Testing events 242
React DevTools 245
Redux DevTools 246
Summary 247
Chapter 11: React Router 248
Installation and configuration 249
Creating our sections 249
Adding parameters to the routes 255
Summary 265
Chapter 12: Anti-Patterns to be Avoided 266
Initializing the state using properties 266
Mutating the state 269
Using indexes as a key 272
Spreading properties on DOM elements 275
Summary 276
[ iv ]