React: Up & Running: Building Web Applications, 2nd Edition
- Length: 222 pages
- Edition: 2
- Language: English
- Publisher: O'Reilly Media
- Publication Date: 2021-12-07
- ISBN-10: 1492051462
- ISBN-13: 9781492051466
- Sales Rank: #1311069 (See Top 100 Books)
Hit the ground running with React, the open source technology from Facebook for building rich web applications fast. Updated for the latest React release, the second edition of this hands-on guide shows you how to build React components and organize them into maintainable large-scale apps. If youâ??re familiar with JavaScript syntax, youâ??re ready to get started.
Through the course of this book, author Stoyan Stefanov helps web developers and programmers build a complete custom app for storing data on the client. 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
Preface About This Book Conventions Used in This Book Using Code Examples O’Reilly Online Learning How to Contact Us Acknowledgments 1. Hello World Setup Hello React World What Just Happened? React.createElement() JSX Setup Babel Hello JSX World On Transpilation Next: Custom Components 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 Antipattern 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? 3. Excel: A Fancy Table Component Data First Table Headers Loop Table Headers Loop, a Terse Version Debugging the Console Warning Adding td 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 4. Functional Excel A Quick Refresher: Function versus 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 Component with a Reducer 5. JSX A Couple 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 Differences Between JSX and HTML No class, What for? style Is an Object Closing Tags camelCase Attributes Namespaced Components JSX and Forms onChange Handler value Versus defaultValue textarea Value select Value Controlled and Uncontrolled Components 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 7. Building the App’s Components Setup Start Coding Refactoring the Excel Component Version 0.0.1 of the New App CSS Local Storage The Components Discovery Logo and a Body Logo Body Discoverable Button Component Button.js classnames Package Forms Suggest Rating Component A FormInput “Factory” Form Actions Dialogs Header App Config Excel: New and Improved The Overall Structure Rendering React.Strict and Reducers Excel’s Little Helpers 8. The Finished App Updated App.js DataFlow Component DataFlow Body Job Done Whinepad v2 Context Next Steps Circular 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 Index
Donate to keep this site alive
How to download source code?
1. Go to: https://www.oreilly.com/
2. Search the book title: React: Up & Running: Building Web Applications, 2nd Edition
, sometime you may not get the results, please search the main title
3. Click the book title in the search results
3. Publisher resources
section, click Download Example Code
.
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.