React : Up & Running

Description

Cover Copyright Table of Contents Preface About This Book Conventions Used in This Book Using Code Examples O’Reilly Online Learning How to Contact Us Chapter 1. Hello World Setup Hello React World What Just Happened? React.createElement() JSX Setup Babel Hello JSX world On Transpilation Next: Custom Components Chapter 2. The Life of a Component A Custom Function Component A JSX Version A Custom Class Component Which Syntax to Use? Properties Properties in Function Components Default Properties State A Textarea Component Make it Stateful A Note on DOM Events Event Handling in the Olden Days Event Handling in React Event-Handling Syntax Props Versus State Props in Initial State: An Anti-Pattern Accessing the Component from the Outside Lifecycle Methods Lifecycle Example: Log It All Paranoid State Protection Lifecycle Example: Using a Child Component Performance Win: Prevent Component Updates Whatever Happened to Function Components? Chapter 3. Excel: A Fancy Table Component Data First Table Headers Loop Table Headers Loop, a terse version Debugging the Console Warning Adding Content Prop types Can You Improve the Component? Sorting Can You Improve the Component? Sorting UI Cues Editing Data Editable Cell Input Field Cell Saving Conclusion and Virtual DOM Diffs Search State and UI Filtering Content Update the save() method Can You Improve the Search? Instant Replay Cleaning up event handlers Cleaning solution Can You Improve the Replay? An Alternative Implementation? Download the Table Data Fetching data Chapter 4. Functional Excel A quick refresher: Function vs Class components Rendering the data The state hook Sorting the table Editing data Searching Lifecycles in a world of hooks Troubles with lifecycle methods useEffect() Cleaning up side effects Trouble-free lifecycles useLayoutEffect() A custom hook Wrapping up the replay useReducer Reducer functions Actions An example reducer Unit testing reducers Excel with a reducer Chapter 5. JSX A couple of tools Whitespace in JSX Comments in JSX HTML Entities Anti-XSS Spread Attributes Parent-to-Child Spread Attributes Returning Multiple Nodes in JSX A Wrapper A fragment An Array JSX Versus HTML Differences No class, What for? style Is an Object Closing Tags camelCase Attributes Namespaced components JSX and Forms onChange Handler value Versus defaultValue Value Value Controlled and uncontrolled components Uncontrolled example Uncontrolled example with an onSubmit handler Controlled example Chapter 6. Setting Up for App Development Create-React-App Node.js Hello CRA Build and deploy Mistakes were made package.json and node_modules Poking around the code Indices JavaScript: Modernized CSS Moving On Chapter 7. Building the App’s Components Setup Start Coding Refactoring Excel Version 0.0.1 of the new app CSS Local storage The Components Discovery A logo and a body Logo Body All discoverable Component Button.js Forms Component A “Factory” Dialogs Header App Config : New and Improved The overall structure Rendering React.Strict and reducers Excel’s little helpers Chapter 8. The Finished App Updated App.js DataFlow component DataFlow body Job done Whinepad v2 Context Next steps Curricular data Providing context Consuming context Context in the header Context in the data table Updating Discovery Routing Route context Using the filter URL Consuming the route context in the header Consuming the route context in the data table useCallback() The End About the Author Colophon