React. Up & Running. Building Web Applications

Hit the ground running with React, the open-source technology from Facebook for building rich web applications fast. With this practical guide, Facebook web developer Stoyan Stefanov teaches you how to build components--Reacts basic building blocks--and organize them into maintainable, large-scale apps. If youre familiar with basic javascript syntax, youre ready to get started. Once you understand how React works, youll build a complete custom Whinepad app that helps users rate wines and keep notes. Youll quickly learn why some developers consider React the key to the web app development puzzle. Set up React and write your first «Hello world» web app Create and use custom React components alongside generic DOM components Build a data table component that lets you edit, sort, search, and export its contents Use the JSX syntax extension as an alternative to function calls Set up a lean, low-level build process that helps you focus on React Build a complete custom app that lets you store data on the client Use ESLint, Flow, and Jest tools to check and test your code as your app evolves Manage communication between components with Flux Copyright 4 Table of Contents 7 Preface 13 About This Book 14 Conventions Used in This Book 14 Using Code Examples 15 Safari® Books Online 16 How to Contact Us 16 Acknowledgments 17 Chapter 1. Hello World 19 Setup 19 Hello React World 20 What Just Happened? 22 React.DOM.* 23 Special DOM Attributes 26 React DevTools Browser Extension 27 Next: Custom Components 28 Chapter 2. The Life of a Component 29 Bare Minimum 29 Properties 31 propTypes 32 Default Property Values 35 State 36 A Stateful Textarea Component 36 A Note on DOM Events 40 Event Handling in the Olden Days 40 Event Handling in React 42 Props Versus State 42 Props in Initial State: An Anti-Pattern 42 Accessing the Component from the Outside 43 Changing Properties Mid-Flight 45 Lifecycle Methods 46 Lifecycle Example: Log It All 47 Lifecycle Example: Use a Mixin 50 Lifecycle Example: Using a Child Component 51 Performance Win: Prevent Component Updates 54 PureRenderMixin 57 Chapter 3. Excel: A Fancy Table Component 59 Data First 59 Table Headers Loop 60 Debugging the Console Warning 62 Adding Content 64 How Can You Improve the Component? 66 Sorting 66 How Can You Improve the Component? 68 Sorting UI Cues 68 Editing Data 69 Editable Cell 70 Input Field Cell 72 Saving 72 Conclusion and Virtual DOM Diffs 73 Search 74 State and UI 76 Filtering Content 78 How Can You Improve the Search? 80 Instant Replay 81 How Can You Improve the Replay? 82 An Alternative Implementation? 82 Download the Table Data 83 Chapter 4. JSX 85 Hello JSX 85 Transpiling JSX 86 Babel 87 Client Side 87 About the JSX transformation 89 JavaScript in JSX 91 Whitespace in JSX 93 Comments in JSX 94 HTML Entities 95 Anti-XSS 96 Spread Attributes 97 Parent-to-Child Spread Attributes 97 Returning Multiple Nodes in JSX 99 JSX Versus HTML Differences 101 No class, What for? 101 style Is an Object 101 Closing Tags 101 camelCase Attributes 102 JSX and Forms 102 onChange Handler 102 value Versus defaultValue 102 Value 103 Value 104 Excel Component in JSX 106 Chapter 5. Setting Up for App Development 107 A Boilerplate App 107 Files and Folders 108 index.html 109 CSS 110 JavaScript 110 Modernized 111 Installing Prerequisites 114 Node.js 114 Browserify 115 Babel 115 React, etc. 115 Let’s Build 116 Transpile JavaScript 116 Package JavaScript 116 Package CSS 116 Results! 117 Windows Version 117 Building During Development 117 Deployment 118 Moving On 119 Chapter 6. Building an App 121 Whinepad v.0.0.1 121 Setup 121 Start Coding 122 The Components 124 Setup 124 Discover 124 Component 126 Button.css 127 Button.js 127 Forms 131 131 Component 134 A “Factory” 137 139 142 Dialogs 143 App Config 146 : New and Improved 147 156 Wrapping It All Up 160 Chapter 7. Lint, Flow, Test, Repeat 161 package.json 161 Configure Babel 162 scripts 162 ESLint 163 Setup 163 Running 163 All the Rules 165 Flow 165 Setup 165 Running 166 Signing Up for Typechecking 166 Fixing 167 app.js 168 More on Typechecking props and state 170 Export/Import Types 171 Typecasting 172 Invariants 173 Testing 174 Setup 174 First Test 176 First React Test 176 Testing the Component 177 Testing 181 More Simulated Interactions 183 Testing Complete Interactions 184 Coverage 187 Chapter 8. Flux 191 The Big Idea 192 Another Look at Whinepad 192 The Store 193 Store Events 195 Using the Store in 197 Using the Store in 199 Using the Store in 200 Drawing the Line 201 Actions 201 CRUD Actions 201 Searching and Sorting 202 Using the Actions in 204 Using the Actions in 206 Flux Recap 208 Immutable 209 Immutable Store Data 210 Immutable Data Manipulation 211 Index 215 About the Author 220 Colophon 220 Hit the ground running with React, the open-source technology from Facebook for building rich web applications fast. With this practical guide, Yahoo! web developer Stoyan Stefanov teaches you how to build components--React's basic building blocks--and organize them into maintainable, large-scale apps. If you're familiar with basic JavaScript syntax, you're ready to get started. Once you understand how React works, you'll build a complete custom Whinepad app that helps users rate wines and keep notes. You'll quickly learn why some developers consider React the key to the web app development puzzle. Set up React and write your first "Hello world" web app Create and use custom React components alongside generic DOM components Build a data table component that lets you edit, sort, search, and export its contents Use the JSX syntax extension as an alternative to function calls Set up a lean, low-level build process that helps you focus on React Build a complete custom app that lets you store data on the client Use ESLint, Flow, and Jest tools to check and test your code as your app evolves Manage communication between components with Flux "Hit the ground running with React, the open-source technology from Facebook for building rich web applications fast. With this practical guide, Facebook engineer Stoyan Stefanov teaches you how to build components--React's basic building blocks--and organize them into maintainable, large-scale apps. If you're familiar with basic JavaScript syntax, you're ready to get started. Once you understand how React works, you'll build a complete custom Whinepad app that helps users rate wines and keep notes. You'll quickly learn why some developers consider React the key to the web app development puzzle."-- Publishers description React is a new, open-source technology from Facebook that has stirred quite a storm in the web development community, and some would say it s the next best thing to a silver bullet for building web applications. With "React: Up and Running" you'll learn how to get off the ground with React, with no prior knowledge. This book teaches you how to build components, the building blocks of your apps, as well as how to organize the components into large-scale apps. In addition, you ll learn about unit testing and optimizing performance, while focusing on the application s data (and letting the UI take care of itself)."