Pro MERN Stack Full Stack Web App Development with Mongo, Express, React, and Node Vasan Subramanian
Pro MERN Stack Vasan Subramanian Bangalore, Karnataka, India ISBN-13 (pbk): 978-1-4842-2652-0 ISBN-13 (electronic): 978-1-4842-2653-7 DOI 10.1007/978-1-4842-2653-7 Library of Congress Control Number: 2017933833 Copyright 2017 by Vasan Subramanian 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. 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 Editorial Director: Todd Green Acquisitions Editor: Pramila Balan Development Editor: Poonam Jain Technical Reviewer: Anshul Chanchlani Coordinating Editor: Prachi Mehta Copy Editor: Mary Behr Compositor: SPi Global Indexer: SPi Global Artist: SPi Global Cover image designed by Freepik 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 orders-ny@springer-sbm.com, or visit www.springeronline.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 rights@apress.com, or visit http://www.apress. com/rights-permissions. Apress titles 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 Print and ebook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book s product page, located at www.apress.com/978-1-4842-2652-0. For more detailed information, please visit http://www.apress.com/source-code. Printed on acid-free paper
To Sandeep and Fazle.
Contents at a Glance About the Author... xvii Chapter 1: Introduction... 1 Chapter 2: Hello World... 17 Chapter 3: React Components... 37 Chapter 4: React State... 55 Chapter 5: Express REST APIs... 69 Chapter 6: Using MongoDB... 93 Chapter 7: Modularization and Webpack... 115 Chapter 8: Routing with React Router... 151 Chapter 9: Forms... 173 Chapter 10: React-Bootstrap... 207 Chapter 11: Server Rendering... 245 Chapter 12: Advanced Features... 275 Chapter 13: Looking Ahead... 319 Index... 325 v
Contents About the Author... xvii Chapter 1: Introduction... 1 What Is MERN?... 1 Who Should Read This Book... 2 Structure of the Book... 2 Conventions... 3 What You Need... 5 MERN Components... 5 React...5 Node.js...7 Express...9 MongoDB...10 Tools and Libraries...12 Why MERN?... 13 JavaScript Everywhere...13 JSON Everywhere...14 Node.js Performance...14 The npm Ecosystem...14 Isomorphic...14 It s not a Framework!...15 Summary... 15 vii
Chapter 2: Hello World... 17 Server-Less Hello World... 17 Server Setup... 20 nvm...21 Node.js...21 Project...22 npm...22 Express...24 Build-Time JSX Compilation... 26 Separate Script File...27 Transform...28 Automate...29 React Library...30 ES2015... 30 Summary... 33 Answers to Exercises... 34 Exercise: JSX...34 Exercise: npm...34 Exercise: Express...35 Exercise: Babel...35 Exercise: ES2015...36 Chapter 3: React Components... 37 Issue Tracker... 37 React Classes... 38 Composing Components... 40 viii
Passing Data... 42 Using Properties...42 Property Validation...44 Using Children...45 Dynamic Composition... 47 Summary... 51 Answers to Exercises... 51 Exercise: React Classes...51 Exercise: Passing Data...52 Exercise: Dynamic Composition... 52 Chapter 4: React State... 55 Setting State... 55 Async State Initialization... 58 Event Handling... 60 Communicating from Child to Parent... 60 Stateless Components... 63 Designing Components... 65 State vs. props...65 Component Hierarchy...65 Communication...66 Stateless Components...66 Summary... 66 Answers to Exercises... 67 Exercise: Setting State...67 Exercise: Communicate Child to Parent...68 ix
Chapter 5: Express REST APIs... 69 REST... 69 Resource Based...69 HTTP Methods as Actions...70 JSON...71 Express... 72 Routing...72 Handler Function...73 Middleware...75 The List API... 76 Automatic Server Restart...77 Testing...77 The Create API... 80 Using the List API... 82 Using the Create API... 84 Error Handling... 85 Summary... 88 Answers to Exercises... 89 Exercise: The List API...89 Exercise: Create API...90 Exercise: Using the List API...90 Exercise: Using the Create API...91 Exercise: Error Handling...91 Chapter 6: Using MongoDB... 93 MongoDB Basics... 93 Documents...93 Collections...94 Query Language...94 x
Installation...95 The mongo Shell...95 Shell Scripting...99 Schema Initialization... 99 MongoDB Node.js Driver... 101 Callbacks...103 Promises...104 Generator and co Module...104 The async Module...105 Reading from MongoDB... 107 Writing to MongoDB... 109 Summary... 111 Answers to Exercises... 112 Exercise: Mongo Shell...112 Exercise: Schema Initialization...112 Exercise: Reading from MongoDB...113 Exercise: Writing to MongoDB...113 Chapter 7: Modularization and Webpack... 115 Server-Side Modules... 115 Introduction to Webpack... 117 Using Webpack Manually... 118 Transform and Bundle... 120 Libraries Bundle... 125 Hot Module Replacement... 129 HMR Using Middleware... 132 Comparison of HMR Alternatives...133 Debugging... 134 Server-Side ES2015... 135 xi
ESLint... 140 Environment...142 Summary... 147 Answers to Exercises... 148 Exercise: Transform and Bundle...148 Exercise: Hot Module Replacement...148 Exercise: Server-Side ES2015...149 Exercise: ESLint...150 Chapter 8: Routing with React Router... 151 Routing Techniques... 152 Simple Routing... 152 Route Parameters... 154 Route Query String... 157 Programmatic Navigation... 161 Nested Routes... 164 Browser History... 167 Summary... 169 Answers to Exercises... 169 Exercise: Route Parameters...169 Exercise: Route Query String...169 Exercise: Programmatic Navigation...170 Chapter 9: Forms... 173 More Filters in the List API... 173 Filter Form... 174 The Get API... 180 Edit Page... 182 xii
UI Components... 186 Number Input...186 Date Input...190 Update API... 195 Using Update API... 198 Delete API... 200 Using the Delete API... 201 Summary... 203 Answers to Exercises... 203 Exercise: More Filters in List API...203 Exercise: Filter Form...203 Exercise: Edit Page...204 Exercise: Date Input...204 Exercise: Update API...205 Chapter 10: React-Bootstrap... 207 Bootstrap Installation... 207 Navigation... 210 Table and Panel... 216 Forms... 218 Grid-Based Forms...218 Inline Forms...222 Horizontal Forms...224 Alerts... 229 Validations...229 Results...231 Modals... 237 Summary... 242 xiii
Answers to Exercises... 243 Exercise: Navigation...243 Exercise: Grid-Based Forms...243 Exercise: Inline Forms...243 Exercise: Modals...244 Chapter 11: Server Rendering... 245 Basic Server Rendering... 245 Handling State... 250 Initial State... 252 Server-Side Bundle... 254 Back-End HMR... 256 Routed Server Rendering... 260 Encapsulated Fetch... 268 Summary... 272 Answers to Exercises... 273 Back-End HMR...273 Routed Server Rendering...273 Chapter 12: Advanced Features... 275 MongoDB Aggregate... 275 Pagination... 284 Higher Order Components... 288 Search Bar... 297 Google Sign-In... 303 Session Handling... 310 Summary... 317 xiv
Chapter 13: Looking Ahead... 319 Mongoose... 319 Flux... 320 Deployment... 322 mern.io... 323 That s All, Folks!... 324 Index... 325 xv
About the Author Vasan Subramanian has experienced all kinds of programming, from 8-bit, hand-assembled code on an 8085 to AWS Lambda. He not only loves to solve problems using software, but he also looks for the right mix of technology and processes to make a software product team most efficient. He learned software development at companies such as Corel, Wipro, and Barracuda Networks, not just as a programmer but also as a leader of teams at those companies. Vasan studied at IIT Madras and IIM Bangalore. In his current job as CTO at Accel, he mentors startups on all things tech. While not mentoring or coding (or writing books!), Vasan runs half marathons and plays 5-a-side soccer. He can be contacted at vasan.promern@gmail.com for boquets, brickbats, or anything in-between. xvii