fullstack-react

Sold to vpicone@gmail.com Fullstack React The Complete Guide to ReactJS and Friends Written by Anthony Accomazzo, Ari Lerner, Nate Murray, Clay Allsopp, David Guttman, and Tyler McGinnis Technical Advisor: Sophia Shoemaker © 2017 Fullstack.io All rights reserved No portion of the book manuscript may be reproduced, stored in a retrieval system, or transmitted in any form or by any means beyond the number of purchased copies, except for a single backup or archival copy The code may be used freely in your projects, commercial or otherwise The authors and publisher have taken care in preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions No liability is assumed for incidental or consequential damagers in connection with or arising out of the use of the information or programs container herein Typeset using Leanpub Published in San Francisco, California by Fullstack.io FULLSTACK io Contents Book Revision Bug Reports Chat With The Community! Be notified of updates via Twitter We’d love to hear from you! 1 1 Foreword How to Get the Most Out of This Book Overview Running Code Examples Project setups Code Blocks and Context Code Block Numbering Getting Help Emailing Us Technical Support Response Time Get excited 1 2 3 5 Part I Your first React Web Application Building Product Hunt Setting up your development environment Code editor Node.js and npm Install Git Browser Special instruction for Windows users Ensure IIS is installed JavaScript ES6/ES7 Getting started Sample Code 7 7 8 8 9 CONTENTS Previewing the application Prepare the app What’s a component? Our first component JSX The developer console Babel ReactDOM.render() Building Product Making Product data-driven The data model Using props Rendering multiple products React the vote (your app’s first interaction) Propagating the event Binding custom component methods Using state Setting state with this.setState() Updating state and immutability Refactoring with the Babel plugin transform-class-properties Babel plugins and presets Property initializers Refactoring Product Refactoring ProductList Congratulations! Components A time-logging app Getting started Previewing the app Prepare the app Breaking the app into components The steps for building React apps from scratch Step 2: Build a static version of the app TimersDashboard EditableTimer TimerForm ToggleableTimerForm Timer Render the app Try it out Step 3: Determine what should be stateful State criteria 11 15 16 18 19 21 23 25 27 28 28 32 37 37 39 42 44 46 51 51 52 53 54 56 57 57 58 58 58 62 69 71 71 73 74 75 76 77 78 79 79 CONTENTS Applying the criteria Step 4: Determine in which component each piece of state should live The list of timers and properties of each timer Whether or not the edit form of a timer is open Visibility of the create form Step 5: Hard-code initial states Adding state to TimersDashboard Receiving props in EditableTimerList Props vs state Adding state to EditableTimer Timer remains stateless Adding state to ToggleableTimerForm Adding state to TimerForm Step 6: Add inverse data flow TimerForm ToggleableTimerForm TimersDashboard Updating timers Adding editability to Timer Updating EditableTimer Updating EditableTimerList Defining onEditFormSubmit() in TimersDashboard Deleting timers Adding the event handler to Timer Routing through EditableTimer Routing through EditableTimerList Implementing the delete function in TimersDashboard Adding timing functionality Adding a forceUpdate() interval to Timer Try it out Add start and stop functionality Add timer action events to Timer Create TimerActionButton Run the events through EditableTimer and EditableTimerList Try it out Methodology review Components & Servers Introduction Preparation server.js The Server API text/html endpoint 80 81 82 82 82 83 83 84 85 85 86 86 88 91 92 93 95 97 97 98 100 100 103 103 104 104 105 106 107 108 108 108 109 110 113 114 116 116 116 116 117 118 CONTENTS JSON endpoints Playing with the API Loading state from the server Try it out client Fetch Sending starts and stops to the server Sending creates, updates, and deletes to the server Give it a spin Next up 118 119 122 125 125 126 129 131 133 133 134 134 134 134 135 136 136 138 140 141 142 142 144 144 145 145 145 146 149 150 Advanced Component Configuration with props, state, and children Intro How to use this chapter ReactComponent Creating ReactComponents - createClass or ES6 Classes render() Returns a ReactElement Tree Getting Data into render() props are the parameters PropTypes Default props with getDefaultProps() context 151 151 152 152 152 153 154 155 156 158 158 JSX and the Virtual DOM React Uses a Virtual DOM Why Not Modify the Actual DOM? What is a Virtual DOM? Virtual DOM Pieces ReactElement Experimenting with ReactElement Rendering Our ReactElement Adding Text (with children) ReactDOM.render() JSX JSX Creates Elements JSX Attribute Expressions JSX Conditional Child Expressions JSX Boolean Attributes JSX Comments JSX Spread Syntax JSX Gotchas JSX Summary References CONTENTS state 163 Using state: Building a Custom Radio Button 164 Stateful components State updates that depend on the current state Thinking About State Stateless Components Switching to Stateless Stateless Encourages Reuse Talking to Children Components with props.children React.Children.map() & React.Children.forEach() React.Children.toArray() Summary References Forms Forms 101 Preparation The Basic Button Events and Event Handlers Back to the Button Text Input Accessing User Input With refs Using User Input Uncontrolled vs Controlled Components Accessing User Input With state Multiple Fields On Validation Adding Validation to Our App Creating the Field Component Using our new Field Component Remote Data Building the Custom Component Adding CourseSelect Separation of View and State Async Persistence Redux Form Component Connect the Store Form Modules formsy-react react-input-enhancements tcomb-form winterfell 169 171 173 174 175 177 177 180 181 182 182 183 183 183 184 186 187 189 189 191 194 195 197 202 202 206 210 215 215 221 224 224 231 236 240 242 242 242 243 243 CONTENTS react-redux-form 243 Using Webpack with Create React App JavaScript modules Create React App Exploring Create React App public/index.html package.json src/ index.js Booting the app Webpack basics Making modifications to the sample app Hot reloading Auto-reloading Creating a production build Ejecting Buckle up Using Create React App with an API server The completed app How the app is organized The server Client Concurrently Using the Webpack development proxy Webpack at large When to use Webpack/Create React App 244 244 246 247 248 249 251 253 255 256 262 262 263 264 267 268 270 270 274 275 276 277 280 282 283 Unit Testing Writing tests without a framework Preparing Modash Writing the first spec The assertEqual() function What is Jest? Using Jest expect() The first Jest test for Modash The other truncate() spec The rest of the specs Testing strategies for React applications Integration vs Unit Testing Shallow rendering Enzyme 284 284 285 288 290 294 294 295 297 299 300 302 302 303 303 CONTENTS Testing a basic React component with Enzyme Setup The App component The first spec for App More assertions for App Using beforeEach Simulating a change Clearing the input field Simulating a form submission Writing tests for the food lookup app FoodSearch Exploring FoodSearch Writing FoodSearch.test.js In initial state A user has typed a value into the search field Mocking with Jest Mocking Client The API returns results The user clicks on a food item The API returns empty result set Further reading Routing What’s in a URL? React Router’s core components Building the components of react-router The completed app Building Route Building Link Building Router Building Redirect Using react-router More Route Using Switch Dynamic routing with React Router The completed app The server’s API Starting point of the app Using URL params Propagating pathnames as props Dynamic menu items with NavLink Supporting authenticated routes The Client library 304 304 305 309 313 316 319 323 325 332 334 336 340 342 344 348 351 357 362 366 370 373 373 375 376 376 378 385 390 395 399 400 405 407 408 411 413 419 426 431 434 435 CONTENTS Implementing login PrivateRoute, a higher-order component Redirect state Recap Further Reading Part II 436 442 446 448 448 449 Intro to Flux and Redux Why Flux? Flux is a Design Pattern Flux overview Flux implementations Redux Redux’s key ideas Building a counter Preparation Overview The counter’s actions Incrementing the counter Decrementing the counter Supporting additional parameters on actions Building the store Try it out The core of Redux Next up The beginnings of a chat app Previewing State Actions Building the reducer() Initializing state Handling the ADD_MESSAGE action Handling the DELETE_MESSAGE action Subscribing to the store createStore() in full Connecting Redux to React Using store.getState() Using store.subscribe() Using store.dispatch() The app’s components 450 450 450 451 452 452 452 453 453 454 455 456 457 459 460 464 465 466 466 466 468 469 469 469 470 473 475 477 480 480 480 481 481