d BOOKS FOR PROFESSIONALS BY PROFESSIONALS® e S o u s a Pro React A n This book teaches you how to successfully structure increasingly complex front-end applications to Pro n and interfaces. You’ll explore the React library in depth, as well as detailing additional tools and i o libraries in the React ecosystem, enabling you to create complete, complex applications. You will learn how to use React completely, and learn best practices for creating interfaces in P a composable way. You will also cover additional tools and libraries in the React ecosystem r o (such as React Router and Flux architecture). Each topic is covered clearly and concisely and is React packed with the details you need to learn to be truly eff ective. The most important features R are given no-nonsense, in-depth treatment, and every chapter details common problems and e how to avoid them. a c If you already have experience creating front-end apps using jQuery or perhaps other JavaScript t frameworks, but need to solve the increasingly common problem of structuring complex front- end applications, then this book is for you. Start working with React like a pro - add Pro React Build complex front-end applications to your library today. in a composable way with React — Cássio de Sousa Antonio Shelve in: ISBN 978-1-4842-1261-5 53999 Web Development/JavaScript User level: Intermediate 9781484212615 SOURCE CODE ONLINE www.apress.com www.it-ebooks.info Pro React Cássio de Sousa Antonio www.it-ebooks.info Pro React Copyright © 2015 by Cássio de Sousa Antonio This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher’s location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law. ISBN-13 (pbk): 978-1-4842-1261-5 ISBN-13 (electronic): 978-1-4842-1260-8 Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director: Welmoed Spahr Lead Editor: Louise Corrigan Technical Reviewer: Jack Franklin and Tyler Merry Editorial Board: Steve Anglin, Louise Corrigan, Jim DeWolf, Jonathan Gennick, Robert Hutchinson, Michelle Lowman, James Markham, Susan McDermott, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Gwenan Spearing Coordinating Editor: Melissa Maldonado Copy Editor: Mary Behr Compositor: SPi Global Indexer: SPi Global Artist: SPi Global Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springer.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail [email protected], or visit www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this text is available to readers at www.apress.com. For detailed information about how to locate your book’s source code, go to www.apress.com/source-code/. www.it-ebooks.info To my wife, Mel, for all the support, inspiration, and love. You make it all worthwhile. www.it-ebooks.info Contents at a Glance About the Author ���������������������������������������������������������������������������������������������������xiii About the Technical Reviewers �������������������������������������������������������������������������������xv Acknowledgments �������������������������������������������������������������������������������������������������xvii Introduction ������������������������������������������������������������������������������������������������������������xix ■ Chapter 1: Getting Started �������������������������������������������������������������������������������������1 ■ Chapter 2: Inside the DOM Abstraction ���������������������������������������������������������������25 ■ Chapter 3: Architecting Applications with Components ��������������������������������������51 ■ Chapter 4: Sophisticated Interactions �����������������������������������������������������������������91 ■ Chapter 5: Routing ���������������������������������������������������������������������������������������������131 ■ Chapter 6: Architecting React Applications with Flux ���������������������������������������167 ■ Chapter 7: Performance Tuning �������������������������������������������������������������������������243 ■ Chapter 8: Isomorphic React Applications ��������������������������������������������������������257 ■ Chapter 9: Testing React Components ���������������������������������������������������������������281 Index ���������������������������������������������������������������������������������������������������������������������293 v www.it-ebooks.info Contents About the Author ���������������������������������������������������������������������������������������������������xiii About the Technical Reviewers �������������������������������������������������������������������������������xv Acknowledgments �������������������������������������������������������������������������������������������������xvii Introduction ������������������������������������������������������������������������������������������������������������xix ■ Chapter 1: Getting Started �������������������������������������������������������������������������������������1 Before You Get Started �����������������������������������������������������������������������������������������������������1 Node�js and npm �������������������������������������������������������������������������������������������������������������������������������������1 JavaScript ES6 ����������������������������������������������������������������������������������������������������������������������������������������1 Defining React ������������������������������������������������������������������������������������������������������������������2 React’s Benefits ���������������������������������������������������������������������������������������������������������������2 Reactive Rendering is Simple �����������������������������������������������������������������������������������������������������������������2 Component-Oriented Development Using Pure JavaScript ��������������������������������������������������������������������3 Flexible Abstraction of the Document Model ������������������������������������������������������������������������������������������3 Building Your First React App �������������������������������������������������������������������������������������������4 React Development Workflow �����������������������������������������������������������������������������������������������������������������4 Creating Your First Component ���������������������������������������������������������������������������������������������������������������8 Saving a little typing �������������������������������������������������������������������������������������������������������������������������������9 Dynamic Values ��������������������������������������������������������������������������������������������������������������������������������������9 Composing Components ��������������������������������������������������������������������������������������������������9 Props ����������������������������������������������������������������������������������������������������������������������������������������������������10 Presenting the Kanban Board App ��������������������������������������������������������������������������������������������������������11 Defining Component Hierarchy �������������������������������������������������������������������������������������������������������������13 vii www.it-ebooks.info ■ Contents The Importance of Props ����������������������������������������������������������������������������������������������������������������������13 Building the Components ���������������������������������������������������������������������������������������������������������������������13 Introducing State ������������������������������������������������������������������������������������������������������������21 Kanban App: Togglable Cards ���������������������������������������������������������������������������������������������������������������21 Summary ������������������������������������������������������������������������������������������������������������������������23 ■ Chapter 2: Inside the DOM Abstraction ���������������������������������������������������������������25 Events in React ���������������������������������������������������������������������������������������������������������������25 DOM Event Listeners ����������������������������������������������������������������������������������������������������������������������������25 Kanban App: Managing the DOM Event ������������������������������������������������������������������������������������������������26 Digging Deeper in JSX ����������������������������������������������������������������������������������������������������27 JSX vs� HTML ����������������������������������������������������������������������������������������������������������������������������������������28 Differences Between JSX and HTML ����������������������������������������������������������������������������������������������������28 JSX Quirks ��������������������������������������������������������������������������������������������������������������������������������������������29 Kanban App: Indicating Whether a Card Is Open or Closed ��������������������������������������������32 Blank Space ������������������������������������������������������������������������������������������������������������������������������������������33 Comments in JSX ���������������������������������������������������������������������������������������������������������������������������������33 Rendering Dynamic HTML ��������������������������������������������������������������������������������������������������������������������34 Kanban App: Rendering Markdown ������������������������������������������������������������������������������������������������������34 React Without JSX ����������������������������������������������������������������������������������������������������������36 React Elements in Plain JavaScript ������������������������������������������������������������������������������������������������������37 Element Factories ���������������������������������������������������������������������������������������������������������������������������������37 Custom Factories ����������������������������������������������������������������������������������������������������������������������������������38 Inline Styling �������������������������������������������������������������������������������������������������������������������38 Defining Inline Styles ����������������������������������������������������������������������������������������������������������������������������38 Kanban App: Card Color via Inline Styling ���������������������������������������������������������������������������������������������39 Working With Forms �������������������������������������������������������������������������������������������������������41 Controlled Components ������������������������������������������������������������������������������������������������������������������������41 Special Cases ���������������������������������������������������������������������������������������������������������������������������������������43 Uncontrolled Components ��������������������������������������������������������������������������������������������������������������������43 Kanban App: Creating a Task Form �������������������������������������������������������������������������������������������������������45 viii www.it-ebooks.info ■ Contents Virtual DOM Under the Hood �������������������������������������������������������������������������������������������45 Keys ������������������������������������������������������������������������������������������������������������������������������������������������������46 Kanban App: Keys ���������������������������������������������������������������������������������������������������������������������������������46 Refs ������������������������������������������������������������������������������������������������������������������������������������������������������48 Summary ������������������������������������������������������������������������������������������������������������������������49 ■ Chapter 3: Architecting Applications with Components ��������������������������������������51 Prop Validation ���������������������������������������������������������������������������������������������������������������51 Default Prop Values ������������������������������������������������������������������������������������������������������������������������������52 Built-in propType Validators ������������������������������������������������������������������������������������������������������������������53 Kanban App: Defining Prop Types ���������������������������������������������������������������������������������������������������������54 Custom PropType Validators �����������������������������������������������������������������������������������������������������������������55 Component Composition Strategies and Best Practices ������������������������������������������������57 Stateful and Pure Components �������������������������������������������������������������������������������������������������������������57 Which Components Should Be Stateful? ����������������������������������������������������������������������������������������������57 Data Flow and Component Communication �����������������������������������������������������������������������������������������61 Component Lifecycle ������������������������������������������������������������������������������������������������������65 Lifecycle Phases and Methods �������������������������������������������������������������������������������������������������������������65 Lifecycle Functions in Practice: Data Fetching �������������������������������������������������������������������������������������67 A Brief Talk About Immutability ��������������������������������������������������������������������������������������69 Immutability in Plain JavaScript �����������������������������������������������������������������������������������������������������������70 Nested Objects �������������������������������������������������������������������������������������������������������������������������������������71 React Immutability Helper ��������������������������������������������������������������������������������������������������������������������73 Kanban App: Adding (a Little) Complexity �����������������������������������������������������������������������76 Summary ������������������������������������������������������������������������������������������������������������������������89 ■ Chapter 4: Sophisticated Interactions �����������������������������������������������������������������91 Animation in React ���������������������������������������������������������������������������������������������������������91 CSS Transition and Animation 101 ��������������������������������������������������������������������������������������������������������91 React CSSTransitionGroup ��������������������������������������������������������������������������������������������������������������������97 ix www.it-ebooks.info ■ Contents Drag and Drop ��������������������������������������������������������������������������������������������������������������103 React DnD Implementation Overview �������������������������������������������������������������������������������������������������103 A React DnD Sample Implementation �������������������������������������������������������������������������������������������������103 Kanban App: Animations and Drag-and-Drop Support �������������������������������������������������115 Card Toggle Animation ������������������������������������������������������������������������������������������������������������������������115 Card Dragging �������������������������������������������������������������������������������������������������������������������������������������117 Summary ����������������������������������������������������������������������������������������������������������������������130 ■ Chapter 5: Routing ���������������������������������������������������������������������������������������������131 Implementing Routing the “Naive” Way �����������������������������������������������������������������������131 React Router �����������������������������������������������������������������������������������������������������������������135 Index Route �����������������������������������������������������������������������������������������������������������������������������������������138 Routes with Parameters ���������������������������������������������������������������������������������������������������������������������140 Setting Active Links ����������������������������������������������������������������������������������������������������������������������������144 Passing Props �������������������������������������������������������������������������������������������������������������������������������������145 Decoupling the UI from the URL ���������������������������������������������������������������������������������������������������������147 Changing Routes Programmatically ���������������������������������������������������������������������������������������������������149 Histories ���������������������������������������������������������������������������������������������������������������������������������������������152 Kanban App: Routing ��������������������������������������������������������������������������������������������������������������������������153 Summary ����������������������������������������������������������������������������������������������������������������������166 ■ Chapter 6: Architecting React Applications with Flux ���������������������������������������167 What Is Flux? ����������������������������������������������������������������������������������������������������������������167 Stores �������������������������������������������������������������������������������������������������������������������������������������������������168 Actions ������������������������������������������������������������������������������������������������������������������������������������������������168 Dispatcher ������������������������������������������������������������������������������������������������������������������������������������������169 The Unrealistic, Minimal Flux App ��������������������������������������������������������������������������������170 The Bank Account Application ������������������������������������������������������������������������������������������������������������170 Flux Utils �����������������������������������������������������������������������������������������������������������������������178 Flux Utils Stores ����������������������������������������������������������������������������������������������������������������������������������178 Container Component Higher Order Function �������������������������������������������������������������������������������������180 x www.it-ebooks.info ■ Contents Asynchronous Flux �������������������������������������������������������������������������������������������������������182 waitFor: Coordinating Store Update Order ������������������������������������������������������������������������������������������182 Asynchronous Data Fetching ��������������������������������������������������������������������������������������������������������������184 AirCheap Application ����������������������������������������������������������������������������������������������������185 Setup: Project Organization and Basic Files ���������������������������������������������������������������������������������������185 Creating the API Helper and ActionCreators for Fetching Airports ������������������������������������������������������187 AirportStore ����������������������������������������������������������������������������������������������������������������������������������������189 App Component ����������������������������������������������������������������������������������������������������������������������������������190 Finishing the AirCheap application: Loading Tickets ��������������������������������������������������������������������������195 Evolving Your Async Data Fetching Implementation�����������������������������������������������������205 AppDispatcher’s dispatchAsync ���������������������������������������������������������������������������������������������������������205 Kanban App: Moving to a Flux Architecture ������������������������������������������������������������������207 Refactor: Creating Flux Basic Structure and Moving Files������������������������������������������������������������������208 Moving the Data Fetching to the Flux Architecture�����������������������������������������������������������������������������212 Implementing the FetchCards Action, API Method Call, and Store Callback������������������������������������������������������������������������������������������������������������������������������214 Moving All Card and Task Manipulations to the Flux Architecture ������������������������������������������������������216 Preparing for the Functionality Migration �������������������������������������������������������������������������������������������217 Components ����������������������������������������������������������������������������������������������������������������������������������������225 Removing All Component State ����������������������������������������������������������������������������������������������������������232 Summary ����������������������������������������������������������������������������������������������������������������������241 ■ Chapter 7: Performance Tuning �������������������������������������������������������������������������243 How the Reconciliation Process Works ������������������������������������������������������������������������243 Batching ���������������������������������������������������������������������������������������������������������������������������������������������243 Sub-Tree Rendering ����������������������������������������������������������������������������������������������������������������������������244 React Perf ���������������������������������������������������������������������������������������������������������������������244 The Performance Test Application ������������������������������������������������������������������������������������������������������245 Installing and Using ReactPerf �����������������������������������������������������������������������������������������������������������248 shouldComponentUpdate ���������������������������������������������������������������������������������������������252 shallowCompare Add-on ��������������������������������������������������������������������������������������������������������������������254 Summary ����������������������������������������������������������������������������������������������������������������������255 xi www.it-ebooks.info
Description: