Pro MERN Stack. Full Stack Web App Development with Mongo, Express, React, and Node. Vasan Subramanian

Transcription

1 Pro MERN Stack Full Stack Web App Development with Mongo, Express, React, and Node Vasan Subramanian

2 Pro MERN Stack Vasan Subramanian Bangalore, Karnataka, India ISBN-13 (pbk): ISBN-13 (electronic): DOI / Library of Congress Control Number: 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 Phone SPRINGER, fax (201) , orders-ny@springer-sbm.com, 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 rights@apress.com, or visit 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 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 For more detailed information, please visit Printed on acid-free paper

3 To Sandeep and Fazle.

4 Contents at a Glance About the Author... xvii Chapter 1: Introduction... 1 Chapter 2: Hello World Chapter 3: React Components Chapter 4: React State Chapter 5: Express REST APIs Chapter 6: Using MongoDB Chapter 7: Modularization and Webpack Chapter 8: Routing with React Router Chapter 9: Forms Chapter 10: React-Bootstrap Chapter 11: Server Rendering Chapter 12: Advanced Features Chapter 13: Looking Ahead Index v

5 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? JavaScript Everywhere...13 JSON Everywhere...14 Node.js Performance...14 The npm Ecosystem...14 Isomorphic...14 It s not a Framework!...15 Summary vii

6 Chapter 2: Hello World Server-Less Hello World Server Setup nvm...21 Node.js...21 Project...22 npm...22 Express...24 Build-Time JSX Compilation Separate Script File...27 Transform...28 Automate...29 React Library...30 ES Summary Answers to Exercises Exercise: JSX...34 Exercise: npm...34 Exercise: Express...35 Exercise: Babel...35 Exercise: ES Chapter 3: React Components Issue Tracker React Classes Composing Components viii

7 Passing Data Using Properties...42 Property Validation...44 Using Children...45 Dynamic Composition Summary Answers to Exercises Exercise: React Classes...51 Exercise: Passing Data...52 Exercise: Dynamic Composition Chapter 4: React State Setting State Async State Initialization Event Handling Communicating from Child to Parent Stateless Components Designing Components State vs. props...65 Component Hierarchy...65 Communication...66 Stateless Components...66 Summary Answers to Exercises Exercise: Setting State...67 Exercise: Communicate Child to Parent...68 ix

8 Chapter 5: Express REST APIs REST Resource Based...69 HTTP Methods as Actions...70 JSON...71 Express Routing...72 Handler Function...73 Middleware...75 The List API Automatic Server Restart...77 Testing...77 The Create API Using the List API Using the Create API Error Handling Summary Answers to Exercises 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 MongoDB Basics Documents...93 Collections...94 Query Language...94 x

9 Installation...95 The mongo Shell...95 Shell Scripting...99 Schema Initialization MongoDB Node.js Driver Callbacks Promises Generator and co Module The async Module Reading from MongoDB Writing to MongoDB Summary Answers to Exercises Exercise: Mongo Shell Exercise: Schema Initialization Exercise: Reading from MongoDB Exercise: Writing to MongoDB Chapter 7: Modularization and Webpack Server-Side Modules Introduction to Webpack Using Webpack Manually Transform and Bundle Libraries Bundle Hot Module Replacement HMR Using Middleware Comparison of HMR Alternatives Debugging Server-Side ES xi

10 ESLint Environment Summary Answers to Exercises Exercise: Transform and Bundle Exercise: Hot Module Replacement Exercise: Server-Side ES Exercise: ESLint Chapter 8: Routing with React Router Routing Techniques Simple Routing Route Parameters Route Query String Programmatic Navigation Nested Routes Browser History Summary Answers to Exercises Exercise: Route Parameters Exercise: Route Query String Exercise: Programmatic Navigation Chapter 9: Forms More Filters in the List API Filter Form The Get API Edit Page xii

11 UI Components Number Input Date Input Update API Using Update API Delete API Using the Delete API Summary Answers to Exercises Exercise: More Filters in List API Exercise: Filter Form Exercise: Edit Page Exercise: Date Input Exercise: Update API Chapter 10: React-Bootstrap Bootstrap Installation Navigation Table and Panel Forms Grid-Based Forms Inline Forms Horizontal Forms Alerts Validations Results Modals Summary xiii

12 Answers to Exercises Exercise: Navigation Exercise: Grid-Based Forms Exercise: Inline Forms Exercise: Modals Chapter 11: Server Rendering Basic Server Rendering Handling State Initial State Server-Side Bundle Back-End HMR Routed Server Rendering Encapsulated Fetch Summary Answers to Exercises Back-End HMR Routed Server Rendering Chapter 12: Advanced Features MongoDB Aggregate Pagination Higher Order Components Search Bar Google Sign-In Session Handling Summary xiv

13 Chapter 13: Looking Ahead Mongoose Flux Deployment mern.io That s All, Folks! Index xv

14 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