Learning React Functional Web Development with React and Redux Alex Banks and Eve Porcello Beijing Boston Farnham Sebastopol Tokyo Learning React by Alex Banks and Eve Porcello Copyright © 2017 Alex Banks and Eve Porcello. 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://oreilly.com/safari). For more information, contact our corporate/insti‐ tutional sales department: 800-998-9938 or [email protected]. Editor: Allyson MacDonald Indexer: WordCo Indexing Services Production Editor: Melanie Yarbrough Interior Designer: David Futato Copyeditor: Colleen Toporek Cover Designer: Karen Montgomery Proofreader: Rachel Head Illustrator: Rebecca Demarest May 2017: First Edition Revision History for the First Edition 2017-04-26: First Release See http://oreilly.com/catalog/errata.csp?isbn=9781491954621 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Learning React, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. While the publisher and the authors have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the authors 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-95462-1 [LSI] Table of Contents Preface. ix 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 Node.js 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 iii Promises 24 Classes 25 ES6 Modules 27 CommonJS 28 3. Functional Programming with JavaScript. 31 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 54 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 React.createClass 69 React.Component 72 Stateless Functional Components 73 DOM Rendering 74 Factories 77 5. React with JSX. 81 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 iv | Table of Contents 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 7. Enhancing Components. 141 Component Lifecycles 141 Mounting Lifecycle 142 Updating Lifecycle 146 React.Children 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 177 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 Table of Contents | v The Store 198 Subscribing to Stores 201 Saving to localStorage 202 Action Creators 203 Middleware 206 Applying Middleware to the Store 207 9. React Redux. 211 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 11. React Router. 273 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 12. React and the Server. 297 Isomorphism versus Universalism 297 Server Rendering React 301 Universal Color Organizer 306 Universal Redux 308 vi | Table of Contents Universal Routing 310 Communicating with the Server 318 Completing Actions on the Server 318 Actions with Redux Thunks 321 Index. 329 Table of Contents | vii 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 founda‐ tion 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 ele‐ ments such as variable or function names, databases, data types, environment variables, statements, and keywords. ix Constant width bold Shows commands or other text that should be typed literally by the user. Constant width italic Shows text that should be replaced with user-supplied values or by values deter‐ mined by context. This element signifies a tip or suggestion. This element signifies a general note. This element indicates a warning or caution. Using Code Examples Supplemental material (code examples, exercises, etc.) is available for download at https://github.com/moonhighway/learning-react. This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a signifi‐ cant amount of example code from this book into your product’s documentation does require permission. We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Learning React by Alex Banks and Eve Porcello (O’Reilly). Copyright 2017 Alex Banks, Eve Porcello, 978-1-491-95462-1.” x | Preface If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [email protected]. O’Reilly Safari Safari (formerly Safari Books Online) is a membership-based training and reference platform for enterprise, government, educators, and individuals. Members have access to thousands of books, training videos, Learning Paths, interac‐ tive tutorials, and curated playlists from over 250 publishers, including O’Reilly Media, Harvard Business Review, Prentice Hall Professional, Addison-Wesley Profes‐ sional, Microsoft Press, Sams, Que, Peachpit Press, Adobe, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, and Course Technology, among others. For more information, please visit http://oreilly.com/safari. How to Contact Us Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-998-9938 (in the United States or Canada) 707-829-0515 (international or local) 707-829-0104 (fax) We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://bit.ly/learning-react-2e.