React Quickly: Painless web apps with React, JSX, Redux, and GraphQL

React Quickly....1 brief contents....9 contents....11 foreword....19 preface....21 acknowledgments....23 about this book....25 Roadmap....25 Who this book is for (read this!)....26 What this book is not (read this too!)....26 How to use this book....27 Source code....27 Errata....28 Book forum....28 about the author....29 about the cover....31 Part 1: React foundation....33 Chapter 1: Meeting React....35 1.1 What is React?....37 1.2 The problem that React solves....37 1.3 Benefits of using React....38 1.3.1 Simplicity....39 1.3.2 Speed and testability....45 1.3.3 Ecosystem and community....46 1.4 Disadvantages of React....47 1.5 How React can fit into your web applications....47 1.5.1 React libraries and rendering targets....48 1.5.2 Single-page applications and React....50 1.5.3 The React stack....51 1.6 Your first React code: Hello World....53 1.7 Quiz....57 1.8 Summary....57 1.9 Quiz answers....58 Chapter 2: Baby steps with React....59 2.1 Nesting elements....59 2.2 Creating component classes....63 2.3 Working with properties....66 2.4 Quiz....71 2.5 Summary....72 2.6 Quiz answers....72 Chapter 3: Introduction to JSX....73 3.1 What is JSX, and what are its benefits?....74 3.2 Understanding JSX....77 3.2.1 Creating elements with JSX....77 3.2.2 Working with JSX in components....78 3.2.3 Outputting variables in JSX....80 3.2.4 Working with properties in JSX....81 3.2.5 Creating React component methods....85 3.2.6 if/else in JSX....87 3.2.7 Comments in JSX....90 3.3 Setting up a JSX transpiler with Babel....91 3.4 React and JSX gotchas....95 3.4.1 Special characters....96 3.4.2 data- attributes....97 3.4.3 style attribute....97 3.4.4 class and for....98 3.4.5 Boolean attribute values....98 3.5 Quiz....99 3.6 Summary....100 3.7 Quiz answers....100 Chapter 4: Making React interactive with states....101 4.1 What are React component states?....103 4.2 Working with states....104 4.2.1 Accessing states....104 4.2.2 Setting the initial state....106 4.2.3 Updating states....108 4.3 States and properties....112 4.4 Stateless components....113 4.5 Stateful vs. stateless components....115 4.6 Quiz....120 4.7 Summary....121 4.8 Quiz answers....121 Chapter 5: React component lifecycle events....122 5.1 A bird’s-eye view of React component lifecycle events....123 5.2 Categories of events....123 5.3 Implementing an event....127 5.4 Executing all events together....129 5.5 Mounting events....131 5.5.1 componentWillMount()....131 5.5.2 componentDidMount()....132 5.6 Updating events....135 5.6.1 componentWillReceiveProps(newProps)....136 5.6.2 shouldComponentUpdate()....136 5.6.3 componentWillUpdate()....137 5.6.4 componentDidUpdate()....137 5.7 Unmounting event....137 5.7.1 componentWillUnmount()....137 5.8 A simple example....138 5.9 Quiz....142 5.10 Summary....142 5.11 Quiz answers....142 Chapter 6: Handling events in React....143 6.1 Working with DOM events in React....144 6.1.1 Capture and bubbling phases....146 6.1.2 React events under the hood....149 6.1.3 Working with the React SyntheticEvent event object....152 6.1.4 Using events and state....156 6.1.5 Passing event handlers as properties....158 6.1.6 Exchanging data between components....161 6.2 Responding to DOM events not supported by React....163 6.3 Integrating React with other libraries: jQuery UI events....166 6.3.1 Integrating buttons....167 6.3.2 Integrating labels....168 6.4 Quiz....170 6.5 Summary....170 6.6 Quiz answers....171 Chapter 7: Working with forms in React....172 7.1 The recommended way to work with forms in React....173 7.1.1 Defining a form and its events in React....175 7.1.2 Defining form elements....177 7.1.3 Capturing form changes....183 7.1.4 Account field example....185 7.2 Alternative ways to work with forms....187 7.2.1 Uncontrolled elements with change capturing....188 7.2.2 Uncontrolled elements without capturing changes....190 7.2.3 Using references to access values....191 7.2.4 Default values....193 7.3 Quiz....194 7.4 Summary....195 7.5 Quiz answers....195 Chapter 8: Scaling React components....196 8.1 Default properties in components....197 8.2 React property types and validation....199 8.3 Rendering children....206 8.4 Creating React higher-order components for code reuse....209 8.4.1 Using displayName: distinguishing child components from their parent....211 8.4.2 Using the spread operator: passing all of your attributes....213 8.4.3 Using higher-order components....213 8.5 Best practices: presentational vs. container components....216 8.6 Quiz....217 8.7 Summary....217 8.8 Quiz answers....217 Chapter 9: Project: Menu component....218 9.1 Project structure and scaffolding....219 9.2 Building the menu without JSX....220 9.2.1 The Menu component....221 9.2.2 The Link component....224 9.2.3 Getting it running....226 9.3 Building the menu in JSX....227 9.3.1 Refactoring the Menu component....229 9.3.2 Refactoring the Link component....230 9.3.3 Running the JSX project....231 9.4 Homework....232 9.5 Summary....232 Chapter 10: Project: Tooltip component....233 10.1 Project structure and scaffolding....234 10.2 The Tooltip component....236 10.2.1 The toggle() function....237 10.2.2 The render() function....238 10.3 Getting it running....240 10.4 Homework....241 10.5 Summary....241 Chapter 11: Project: Timer component....242 11.1 Project structure and scaffolding....243 11.2 App architecture....245 11.3 The TimerWrapper component....247 11.4 The Timer component....251 11.5 The Button component....252 11.6 Getting it running....254 11.7 Homework....255 11.8 Summary....255 Part 2: React architecture....257 Chapter 12: The Webpack build tool....259 12.1 What does Webpack do?....260 12.2 Adding Webpack to a project....261 12.2.1 Installing Webpack and its dependencies....263 12.2.2 Configuring Webpack....265 12.3 Modularizing your code....266 12.4 Running Webpack and testing the build....268 12.5 Hot module replacement....271 12.5.1 Configuring HMR....272 12.5.2 Hot module replacement in action....275 12.6 Quiz....277 12.7 Summary....277 12.8 Quiz answers....277 Chapter 13: React routing....278 13.1 Implementing a router from scratch....279 13.1.1 Setting up the project....280 13.1.2 Creating the route mapping in app.jsx....282 13.1.3 Creating the Router component in router.jsx....282 13.2 React Router....284 13.2.1 React Router’s JSX style....288 13.2.2 Hash history....289 13.2.3 Browser history....290 13.2.4 React Router development setup with Webpack....291 13.2.5 Creating a layout component....294 13.3 React Router features....297 13.3.1 Accessing router with the withRouter higher-order component....297 13.3.2 Navigating programmatically....298 13.3.3 URL parameters and other route data....299 13.3.4 Passing properties in React Router....300 13.4 Routing with Backbone....301 13.5 Quiz....304 13.6 Summary....305 13.7 Quiz answers....305 Chapter 14: Working with data using Redux....306 14.1 React support for unidirectional data flow....307 14.2 Understanding the Flux data architecture....310 14.3 Using the Redux data library....311 14.3.1 Redux Netflix clone....313 14.3.2 Dependencies and configs....315 14.3.3 Enabling Redux....318 14.3.4 Routes....319 14.3.5 Combining reducers....321 14.3.6 Reducer for movies....322 14.3.7 Actions....324 14.3.8 Action creators....325 14.3.9 Connecting components to the store....326 14.3.10 Dispatching an action....329 14.3.11 Passing action creators into component properties....330 14.3.12 Running the Netflix clone....335 14.3.13 Redux wrap-up....335 14.4 Quiz....336 14.5 Summary....336 14.6 Quiz answers....336 Chapter 15: Working with data using GraphQL....337 15.1 GraphQL....338 15.2 Adding a server to the Netflix clone....340 15.2.1 Installing GraphQL on a server....342 15.2.2 Data structure....345 15.2.3 GraphQL schema....346 15.2.4 Querying the API and saving the response into the store....348 15.2.5 Showing the list of movies....353 15.2.6 GraphQL wrap-up....355 15.3 Quiz....355 15.4 Summary....356 15.5 Quiz answers....356 Chapter 16: Unit testing React with Jest....357 16.1 Types of testing....358 16.2 Why Jest (vs. Mocha or others)?....359 16.3 Unit testing with Jest....361 16.3.1 Writing unit tests in Jest....362 16.3.2 Jest assertions....364 16.4 UI testing React with Jest and TestUtils....365 16.4.1 Finding elements with TestUtils....368 16.4.2 UI-testing the password widget....369 16.4.3 Shallow rendering....374 16.5 TestUtils wrap-up....375 16.6 Quiz....376 16.7 Summary....376 16.8 Quiz answers....376 Chapter 17: React on Node and Universal JavaScript....377 17.1 Why React on the server? And what is Universal JavaScript?....378 17.1.1 Proper page indexing....378 17.1.2 Better performance with faster loading times....380 17.1.3 Better code maintainability....380 17.1.4 Universal JavaScript with React and Node....380 17.2 React on Node....383 17.3 React and Express: rendering on the server side from components....386 17.3.1 Rendering simple text on the server side....386 17.3.2 Rendering an HTML page....387 17.4 Universal JavaScript with Express and React....395 17.4.1 Project structure and configuration....397 17.4.2 Setting up the server....398 17.4.3 Server-side layout templates with Handlebars....403 17.4.4 Composing React components on the server....405 17.4.5 Client-side React code....407 17.4.6 Setting up Webpack....408 17.4.7 Running the app....410 17.5 Quiz....414 17.6 Summary....415 17.7 Quiz answers....415 Chapter 18: Project: Building a bookstore with React Router....416 18.1 Project structure and Webpack configuration....419 18.2 The host HTML file....422 18.3 Creating components....423 18.3.1 Main file: app.jsx....423 18.3.2 The Cart component....430 18.3.3 The Checkout component....432 18.3.4 The Modal component....433 18.3.5 The Product component....435 18.4 Launching the project....436 18.5 Homework....436 18.6 Summary....437 Chapter 19: Project: Checking passwords with Jest....438 19.1 Project structure and Webpack configuration....440 19.2 The host HTML file....443 19.3 Implementing a strong password module....444 19.3.1 The tests....444 19.3.2 The code....445 19.4 Implementing the Password component....447 19.4.1 The tests....447 19.4.2 The code....448 19.5 Putting it into action....454 19.6 Homework....456 19.7 Summary....456 Chapter 20: Project: Implementing autocomplete with Jest, Express, and MongoDB....457 20.1 Project structure and Webpack configuration....460 20.2 Implementing the web server....464 20.2.1 Defining the RESTful APIs....465 20.2.2 Rendering React on the server....466 20.3 Adding the browser script....467 20.4 Creating the server template....467 20.5 Implementing the Autocomplete component....468 20.5.1 The tests for Autocomplete....468 20.5.2 The code for the Autocomplete component....470 20.6 Putting it all together....473 20.7 Homework....476 20.8 Summary....477 Appendix A: Installing applications used in this book....479 Installing React....479 Installing Node.js....480 Installing Express....481 Installing Bootstrap....482 Installing Browserify....483 Installing MongoDB....483 Using Babel to compile JSX and ES6....485 Node.js and ES6....486 Standalone browser Babel....486 Appendix B: React cheatsheet....487 Installation....488 React....488 React DOM....488 Rendering....488 ES5....488 ES5+JSX....488 Server-side rendering....488 Components....488 ES5....488 ES5 + JSX....489 ES6 + JSX....489 Advanced components....489 Options (ES5)....489 ES5....489 ES5 + JSX....489 ES6 + JSX....490 Lifecycle events....490 Sequence of lifecycle events (inspired by http://react.tips)....491 Special properties....492 propTypes....492 Custom validation....492 Component properties and methods....493 Properties....493 Methods....493 React add-ons....493 React components....493 Appendix C: Express.js cheatsheet....495 Installing Express.js....496 Generator....496 Usage....496 Options....496 Basics....496 HTTP verbs and routes....496 Requests....497 Request-header shortcuts....497 Response....497 Handler signatures....498 Stylus and Jade....498 Body....498 Static....498 Connect middleware....498 Other popular middleware....499 Resources....499 Appendix D: MongoDB and Mongoose cheatsheet....500 MongoDB....501 MongoDB console....501 Installing Mongoose....501 Mongoose basic usage....501 Mongoose schema....502 Create, read, update, delete (CRUD) Mongoose example....502 Mongoose model methods....502 Mongoose document methods....503 Appendix E: ES6 for success....504 Default parameters....504 Template literals....505 Multiline strings....506 Destructuring assignment....506 Enhanced object literals....507 Arrow functions....509 Promises....511 Block-scoped constructs: let and const....512 Classes....513 Modules....515 Using ES6 today with Babel....516 Other ES6 features....516 index....517 Symbols....517 A....517 B....517 C....518 D....519 E....520 F....521 G....521 H....521 I....522 J....522 K....522 L....522 M....523 N....523 O....523 P....524 Q....524 R....524 S....526 T....526 U....527 V....527 W....528 X....528 Z....528