react_js.pdf - Pro React Build complex front-end...

Info icon This preview shows page 1. Sign up to view the full content.

This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: Pro React Build complex front-end applications in a composable way with React — Cássio de Sousa Antonio Pro React Cássio de Sousa Antonio 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 . 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 . 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 . Any source code or other supplementary material referenced by the author in this text is available to readers at . For detailed information about how to locate your book’s source code, go to . To my wife, Mel, for all the support, inspiration, and love. You make it all worthwhile. 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 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 ■ 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 ■ 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 ■ 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������������������������������������������������������������...
View Full Document

  • Spring '12
  • Dung
  • Math, Springer Science+Business Media, spi global, Kanban App

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern