پرو MERN استک: توسعهٔ وب اپلیکیشن کامل با مانگو، اکسپرس، ری‌اکت و نود

Assemble the complete stack required to build a modern web app using MongoDB, Express, React, and Node. This book also covers many other complementary tools: React Router, GraphQL, React-Bootstrap, Babel, and Webpack. This new edition will use the latest version of React (React 16) and the latest React Router (React Router 4), which has a significantly different approach to routing compared to React Router 2 which was used in the first edition of the book.Though the primary focus of Pro MERN Stack is to equip you with all that is required to build a full-fledged web application, a large portion of the book will be devoted to React 16. The popular MEAN (MongoDB, Express, AngularJS, Node) stack introduced Single Page Apps (SPAs) and front-end Model-View-Controller (MVC) as new and efficient paradigms. Facebook's React is a technology that competes indirectly with AngularJS. It is not a full-fledged MVC framework. It is a JavaScript library for building user interfaces (in some sense the View part). Yet, it is possible to build a web app by replacing AngularJS with React – hence the term MERN stack**What You Will Learn** * Discover the features of React 16 to get the maximum out of this library * Gain the basics of MongoDB, Express, and Node to build a web app * Work with other libraries complementary to React, including React-Bootstrap, React Router, and GraphQL * Use tools such as Babel and Webpack required to build JavaScript-based SPAs * Tie all the components together to build a complete web app. **Who This Book Is For**Developers and architects who have prior experience in any web app stack other than the MERN stack will find the book useful to learn about this modern stack. Prior knowledge of JavaScript, HTML, and CSS is required. Table of Contents 5 About the Author 16 About the Technical Reviewer 17 Acknowledgments 18 Preface 19 Chapter 1: Introduction 20 What’s MERN? 20 Who Should Read This Book 21 Structure of the Book 21 Conventions 22 What You Need 24 MERN Components 24 React 24 Why Facebook Invented React 24 Declarative 25 Component-Based 25 No Templates 26 Isomorphic 26 Node.js 26 Node.js Modules 26 Node.js and npm 27 Node.js is Event Driven 28 Express 28 MongoDB 29 NoSQL 29 Document-Oriented 29 Schema-Less 30 JavaScript Based 30 Tools and Libraries 30 React-Router 30 React-Bootstrap 30 Webpack 31 Other Libraries 31 Other Popular Libraries 31 Versions 31 Why MERN? 32 JavaScript Everywhere 33 JSON Everywhere 33 Node.js Performance 33 The npm Ecosystem 33 Isomorphic 34 It’s Not a Framework! 34 Summary 35 Chapter 2: Hello World 36 Server-Less Hello World 36 JSX 39 Project Setup 41 nvm 42 Node.js 42 Project 43 npm 43 Express 45 Separate Script File 49 JSX Transform 50 Older Browsers Support 51 Automate 55 Summary 57 Answers to Exercises 57 Exercise: Server-less Hello World 57 Exercise: JSX 57 Exercise: Project Setup 58 Exercise: Express 58 Exercise: JSX Transform 58 Exercise: Older Browsers Support 58 Chapter 3: React Components 59 Issue Tracker 59 React Classes 60 Composing Components 62 Passing Data Using Properties 66 Passing Data Using Children 71 Dynamic Composition 73 Summary 77 Answers to Exercises 77 Exercise: React Classes 77 Exercise: Composing Components 77 Exercise: Passing Data Using Properties 78 Exercise: Passing Data Using Children 78 Exercise: Dynamic Composition 78 Chapter 4: React State 79 Initial State 79 Async State Initialization 81 Updating State 84 Lifting State Up 87 Event Handling 92 Stateless Components 97 Designing Components 99 State vs. Props 99 Component Hierarchy 100 Communication 100 Stateless Components 100 Summary 101 Answers to Exercises 101 Exercise: Initial State 101 Exercise: Updating State 101 Exercise: Lifting State Up 101 Exercise: Event Handling 102 Chapter 5: Express and GraphQL 103 Express 103 Routing 103 Request Matching 104 Route Parameters 104 Route Lookup 104 Handler Function 105 Request Object 105 Response Object 106 Middleware 106 REST API 107 Resource Based 107 HTTP Methods as Actions 107 GraphQL 108 Field Specification 109 Graph Based 109 Single Endpoint 109 Strongly Typed 109 Introspection 110 Libraries 110 The About API 110 GraphQL Schema File 118 The List API 119 List API Integration 122 Custom Scalar Types 126 The Create API 130 Create API Integration 135 Query Variables 137 Input Validations 140 Displaying Errors 147 Summary 151 Answers to Exercises 151 Exercise: The About API 151 Exercise: The List API 151 Exercise: Custom Scalar Types 152 Exercise: The Create API 152 Exercise: Create API Integration 153 Exercise: Query Variables 153 Chapter 6: MongoDB 154 MongoDB Basics 154 Documents 154 Collections 155 Databases 156 Query Language 156 Installation 156 The Mongo Shell 158 MongoDB CRUD Operations 161 Create 161 Read 163 Projection 165 Update 166 Delete 167 Aggregate 168 MongoDB Node.js Driver 170 Schema Initialization 177 Reading from MongoDB 178 Writing to MongoDB 182 Summary 184 Answers to Exercises 185 Exercise: MongoDB Basics 185 Exercise: MongoDB CRUD Operations 185 Exercise: Schema Initialization 186 Exercise: Reading from MongoDB 186 Exercise: Writing to MongoDB 186 Chapter 7: Architecture and ESLint 187 UI Server 187 Multiple Environments 194 Proxy-Based Architecture 200 ESLint 203 Stylistic Issues 205 Best Practices 205 Possible Errors 206 ESLint for the Front-End 210 Stylistic Issues 212 Best Practices 212 Possible Errors 213 React PropTypes 216 Summary 217 Answers to Exercises 217 Exercise: UI Server 217 Exercise: Multiple Environments 217 Chapter 8: Modularization and Webpack 218 Back-End Modules 218 Front-End Modules and Webpack 223 Transform and Bundle 227 Libraries Bundle 232 Hot Module Replacement 236 Debugging 241 DefinePlugin: Build Configuration 243 Production Optimization 244 Summary 245 Answers to Exercises 246 Exercise: Transform and Bundle 246 Exercise: Hot Module Replacement 246 Chapter 9: React Router 247 Simple Routing 248 Route Parameters 253 Query Parameters 255 Links 260 Programmatic Navigation 263 Nested Routes 267 Browser History Router 273 Summary 276 Answers to Exercises 276 Exercise: Simple Routing 276 Exercise: Query Parameters 277 Exercise: Links 277 Exercise: Programmatic Navigation 278 Exercise: Nested Routes 278 Exercise: Browser History Router 279 Chapter 10: React Forms 280 Controlled Components 280 Controlled Components in Forms 281 More Filters 287 Typed Input 289 Edit Form 293 Specialized Input Components 301 Number Input 302 Date Input 306 Text Input 311 Update API 314 Updating an Issue 316 Updating a Field 317 Delete API 320 Deleting an Issue 322 Summary 324 Answers to Exercises 324 Exercise: More Filters 324 Exercise: Typed Inputs 325 Exercise: Edit Page 326 Exercise: Updating a Field 326 Chapter 11: React-Bootstrap 327 Bootstrap Installation 327 Buttons 331 Navigation Bar 335 Panels 339 Tables 342 Forms 347 The Grid System 350 Inline Forms 355 Horizontal Forms 357 Validation Alerts 365 Toasts 369 Modals 379 Summary 386 Answers to Exercises 387 Exercise: Navigation Bar 387 Exercise: Panels 387 Exercise: Grid System 387 Exercise: Inline Forms 387 Exercise: Horizontal Forms 388 Chapter 12: Server Rendering 389 New Directory Structure 390 Basic Server Rendering 392 Webpack for the Server 399 HMR for the Server 406 Server Router 408 Hydrate 410 Data from API 412 Syncing Initial Data 416 Common Data Fetcher 417 Generated Routes 419 Data Fetcher with Parameters 423 Data Fetcher with Search 427 Nested Components 431 Redirects 436 Summary 437 Answers to Exercises 437 Exercise: Basic Server Rendering 437 Exercise: Server Router 437 Exercise: Data Fetcher with Parameters 437 Exercise: Nested Components 438 Chapter 13: Advanced Features 439 Higher Order Component for Toast 439 MongoDB Aggregate 448 Issue Counts API 451 Report Page 455 List API with Pagination 461 Pagination UI 465 Pagination Performance 471 Undo Delete API 471 Undo Delete UI 473 Text Index API 474 Search Bar 476 Summary 481 Answers to Exercises 481 Exercise: Issue Counts API 481 Exercise: Report Page 482 Exercise: Pagination UI 482 Chapter 14: Authentication 483 Sign-In UI 483 Google Sign-In 486 Verifying the Google Token 491 JSON Web Tokens 496 Signing Out 502 Authorization 503 Authorization-Aware UI 506 React Context 509 CORS with Credentials 512 Server Rendering with Credentials 516 Cookie Domain 522 Summary 524 Answers to Exercises 524 Exercise: Google Sign-In 524 Exercise: Authorization 524 Exercise: React Context 525 Chapter 15: Deployment 526 Git Repositories 526 MongoDB 528 Heroku 528 The API Application 529 The UI Application 532 Proxy Mode 535 Non-Proxy Mode 536 Summary 538 Chapter 16: Looking Ahead 539 Mongoose 539 Flux 540 Create React App 541 mern.io 542 Passport 543 That’s All Folks! 543 Index 545 Assemble the complete stack required to build a modern web app using MongoDB, Express, React, and Node. This book also covers many other complementary tools: React Router, GraphQL, React-Bootstrap, Babel, and Webpack. This new edition will use the latest version of React (React 16) and the latest React Router (React Router 4), which has a significantly different approach to routing compared to React Router 2 which was used in the first edition of the book. Though the primary focus of Pro MERN Stack is to equip you with all that is required to build a full-fledged web application, a large portion of the book will be devoted to React 16. The popular MEAN (MongoDB, Express, AngularJS, Node) stack introduced Single Page Apps (SPAs) and front-end Model-View-Controller (MVC) as new and efficient paradigms. Facebook's React is a technology that competes indirectly with AngularJS. It is not a full-fledged MVC framework. It is a JavaScript library for building user interfaces (in some sense the View part). Yet, it is possible to build a web app by replacing AngularJS with React – hence the term MERN stack What You Will Learn Discover the features of React 16 to get the maximum out of this library Gain the basics of MongoDB, Express, and Node to build a web app Work with other libraries complementary to React, including React-Bootstrap, React Router, and GraphQL Use tools such as Babel and Webpack required to build JavaScript-based SPAs Tie all the components together to build a complete web app. Who This Book Is For Developers and architects who have prior experience in any web app stack other than the MERN stack will find the book useful to learn about this modern stack. Prior knowledge of JavaScript, HTML, and CSS is required. "Assemble the complete stack required to build a modern web app using MongoDB, Express, React, and Node. This book also covers many other complementary tools: React Router, GraphQL, React-Bootstrap, Babel, and Webpack. This new edition will use the latest version of React (React 16) and the latest React Router (React Router 4), which has a significantly different approach to routing compared to React Router 2 which was used in the first edition of the book. Though the primary focus of "Pro MERN stack" is to equip you with all that is required to build a full-fledged web application, a large portion of the book will be devoted to React 16. The popular MEAN (MongoDB, Express, AngularJS, Node) stack introduced Single Page Apps (SPAs) and front-end Model-view-controller (MVC) as new and efficient paradigms. Facebook's React is a technology that competes indirectly with AngularJS. It is not a full-fledged MVC framework, It is a JavaScript library for building user interfaces (in some sense the View part). Yet, it is possible to build a web app by replacing AngularJS with React-- hence the term MERN stack."-- Provided by publisher Front Matter ....Pages i-xxiii Introduction (Vasan Subramanian)....Pages 1-16 Hello World (Vasan Subramanian)....Pages 17-39 React Components (Vasan Subramanian)....Pages 41-60 React State (Vasan Subramanian)....Pages 61-84 Express and GraphQL (Vasan Subramanian)....Pages 85-135 MongoDB (Vasan Subramanian)....Pages 137-169 Architecture and ESLint (Vasan Subramanian)....Pages 171-201 Modularization and Webpack (Vasan Subramanian)....Pages 203-231 React Router (Vasan Subramanian)....Pages 233-265 React Forms (Vasan Subramanian)....Pages 267-313 React-Bootstrap (Vasan Subramanian)....Pages 315-376 Server Rendering (Vasan Subramanian)....Pages 377-426 Advanced Features (Vasan Subramanian)....Pages 427-470 Authentication (Vasan Subramanian)....Pages 471-513 Deployment (Vasan Subramanian)....Pages 515-527 Looking Ahead (Vasan Subramanian)....Pages 529-534 Back Matter ....Pages 535-542