Functional Web Development with React and Redux
Copyright © 2017 Alex Banks and Eve Porcello
If you want to learn how to build efficient user interfaces with React, this is your book Authors Alex Banks and Eve Porcello show you how to create UIs with this small JavaScript library that can deftly display data changes on large-scale, data-driven websites without page reloads Along the way, you’ll learn how to work with functional programming and the latest ECMAScript features
Developed by Facebook, and used by companies including Netflix, Walmart, and The New York Times for large parts of their web interfaces, React is quickly growing in use By learning how to build React components with this hands-on guide, you’ll fully understand how useful React can be in your organization
■■ Learn key functional programming concepts with JavaScript
■■ Peek under the hood to understand how React runs in the browser
■■ Create application presentation layers by mounting and composing React components
■■ Use component trees to manage data and reduce the time you spend debugging applications
■■ Explore React’s component lifecycle and use it to load data and improve UI performance
■■ Use a routing solution for browser history, bookmarks, and other features of single-page applications
■■ Learn how to structure React applications with servers in mind
“ Learning React takes the functional programming ideas behind React and makes them accessible, and immediately useful for anyone who wants to build modern JavaScript applications It's a great guide to the common challenges and solutions associated with React applications”
— Bonnie EisenmanSoftware Engineer,
Twitter and author of Learning React Native
Contents
1 Welcome to React 1
Obstacles and Roadblocks 1
React Is a Library 2
New ECMAScript Syntax 2
Popularity of Functional JavaScript 2
JavaScript Tooling Fatigue 2
Why React Doesn’t Have to Be Hard to Learn 3
React’s Future 3
Keeping Up with the Changes 4
Working with the Files 4
File Repository 4
React Developer Tools 5
Installing Nodejs 6
2 Emerging JavaScript 9
Declaring Variables in ES6 10
const 10
let 10
Template Strings 12
Default Parameters 13
Arrow Functions 14
Transpiling ES6 17
ES6 Objects and Arrays 19
Destructuring Assignment 19
Object Literal Enhancement 20
The Spread Operator 22
Promises 24
Classes 25
ES6 Modules 27
CommonJS 28
What It Means to Be Functional 32
Imperative Versus Declarative 34
Functional Concepts 36
Immutability 36
Pure Functions 38
Data Transformations 41
Higher-Order Functions 48
Recursion 49
Composition 52
Putting It All Together 53
4 Pure React 59
Page Setup 59
The Virtual DOM 60
React Elements 62
ReactDOM 64
Children 65
Constructing Elements with Data 67
React Components 68
createClass 69
ES6 Classes 72
Stateless Functional Components 73
DOM Rendering 74
Factories 77
React Elements as JSX 81
JSX Tips 82
Babel 84
Recipes as JSX 85
Intro to Webpack 93
Webpack Loaders 94
Recipes App with a Webpack Build 94
6 Props, State, and the Component Tree 109
Property Validation 109
Validating Props with createClass 110
Default Props 114
Custom Property Validation 115
ES6 Classes and Stateless Functional Components 116
Refs 119
Inverse Data Flow 121
Refs in Stateless Functional Components 123
React State Management 123
Introducing Component State 124
Initializing State from Properties 128
State Within the Component Tree 130
Color Organizer App Overview 130
Passing Properties Down the Component Tree 131
Passing Data Back Up the Component Tree 134
Component Lifecycles 141
Mounting Lifecycle 142
Updating Lifecycle 146
ReactChildren 157
JavaScript Library Integration 158
Making Requests with Fetch 159
Incorporating a D3 Timeline 160
Higher-Order Components 166
Managing State Outside of React 172
Rendering a Clock 173
Flux 174
Views 176
Actions and Action Creators 177
Dispatcher 178
Stores 178
Putting It All Together 179
Flux Implementations 180
8 Redux 183
State 184
Actions 187
Action Payload Data 189
Reducers 190
The Color Reducer 193
The Colors Reducer 195
The Sort Reducer 197
The Store 198
Subscribing to Stores 201
Saving to localStorage 202
Action Creators 203
Middleware 206
Applying Middleware to the Store 207
Explicitly Passing the Store 213
Passing the Store via Context 216
Presentational Versus Container Components 220
The React Redux Provider 223
React Redux connect 224
10 Testing 229
ESLint 229
Testing Redux 233
Test-Driven Development 233
Testing Reducers 234
Testing the Store 242
Testing React Components 245
Setting Up the Jest Environment 245
Enzyme 247
Mocking Components 249
Snapshot Testing 258
Using Code Coverage 262
Incorporating the Router 274
Router Properties 277
Nesting Routes 279
Using a Page Template 279
Subsections and Submenus 281
Router Parameters 286
Adding Color Details Page 286
Moving Color Sort State to Router 292
Isomorphism versus Universalism 297
Server Rendering React 301
Universal Color Organizer 306
Universal Redux 308
Universal Routing 310
Communicating with the Server 318
Completing Actions on the Server 318
Actions with Redux Thunks 321
Index 329
Preface
This book is for developers who want to learn the React library while learning the latest techniques currently emerging in the JavaScript language. This is an exciting time to be a JavaScript developer. The ecosystem is exploding with new tools, syntax, and best practices that promise to solve many of our development problems. Our aim with this book is to organize these techniques, so you can get to work with React right away. We’ll get into Redux, React Router, and build tooling, so we promise not to introduce only the basics and then throw you to the wolves.
This book does not assume any knowledge of React at all. We’ll introduce all of React’s basics from scratch. Similarly, we won’t assume that you’ve worked with ES6 or any of the latest JavaScript syntax. This will be introduced in Chapter 2 as foundation for the rest of the chapters.
You’ll be better prepared for the contents of the book if you’re comfortable with HTML, CSS, and JavaScript. It’s almost always best to be comfortable with these big three before diving into a JavaScript library.
Along the way, check out the GitHub repository. All of the examples are there and will allow you to practice with hands-on examples.
Conventions Used in This Book
The following typographical conventions are used in this book:
Italic : Indicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width : Used for program listings, as well as within paragraphs to refer to program elements
such as variable or function names, databases, data types, environment variables, statements, and keywords.
Acknowledgments
Our journey with React wouldn’t have started without some good old fashioned luck. We used YUI when we created the training materials for the full stack JavaScript program that we taught internally at Yahoo. Then in August 2014, development on YUI ended. We had to change all of our course files, but to what? What were we supposed to use on the front end now? The answer: React. We didn’t fall in love with React immediately, it took us couple of hours to get hooked. It looked like React could potentially change everything. We got in early and got really lucky.
This book would not have been possible without the support of Ally MacDonald who helped us every step of the way and was monumentally patient with us through several library updates. We’re grateful to Melanie Yarbrough, Colleen Toporek, and Rachel Head for their amazing attention to detail. Thanks to Sarah Ronau for proofreading this book well before it was ready for human eyes and to Bonnie Eisenman for her great advice and overall delightfulness. Thanks also to Stoyan Stefanov, who was nice enough to provide a technical review even though he’s really busy building cool stuff at Facebook.
There’s also no way this book could have existed without the Sharon Adams and Marilyn Messineo. They conspired to purchase Alex’s first computer, a Tandy TRS 80 Color Computer. It also wouldn’t have made it to book form without the love, support, and encouragement of Jim and Lorri Porcello, and Mike and Sharon Adams.
We’d also like to acknowledge Coffee Connexion in Tahoe City, California for giving s the coffee we needed to finish this book, and its owner, Robin, who gave us the timeless advice: “A book on programming? Sounds boring!”
CHAPTER 1
Welcome to React
React is a popular library used to create user interfaces. It was built at Facebook to address some of the challenges associated with large-scale, data-driven websites.
When React was released in 2013, the project was initially viewed with some skepticism because the conventions of React are quite unique.
In an attempt to not intimidate new users, the core React team wrote an article called “Why React?” that recommended that you “Give It [React] Five Minutes.” They wanted to encourage people to work with React first before thinking that their approach was too crazy.
Yes, React is a small library that doesn’t come with everything you might need out of the box to build your application. Give it five minutes. Yes, in React, you write code that looks like HTML right in your JavaScript. And yes, those tags require preprocessing to run in a browser. And you’ll probably need a build tool like webpack for that. Give it five minutes.
If you read that article—as we did—you may have been dazzled by the promise of a new JavaScript library—a library that would solve all of our problems with the DOM; a library that would always be easy to work with and would never hurt us.
Then the questions start to arise: how do I convert this JSX? How do I load data? Where does the CSS go? What is declarative programming? Every path leads to more questions about how to incorporate this library in your actual day to day work. Every conversation introduces new terminology, new techniques, and more questions.
Obstacles and Roadblocks
By taking a few minutes to learn about React components, you’ve opened a door to a different way of thinking about and approaching web development. However, there are some learning obstacles that you’ll have to overcome to begin writing production code with React.
React Is a Library
First, the React library is small and it is only used for one part of the job. It doesn’t ship with all of the tools that you’d expect from a traditional JavaScript framework. A lot of the decisions about which tools from the ecosystem to use are left up to the developer. Also, new tools emerge all the time, and old ones are cast aside. There are so many different library names continually being added to the discussion that it may feel like it’s impossible to keep up.
