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 single-page application. 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
• Master the JSX syntax
• Use built-in Hooks and create your own custom ones
• Manage the app's data flow with reducers and contexts
• Use Create React App to take care of the build process and focus on React itself
• Build a complete custom app that lets you store data on the client
Author(s): Stoyan Stefanov
Edition: 2
Publisher: O'Reilly Media
Year: 2021
Language: English
Commentary: Vector PDF
Pages: 232
City: Sebastopol, CA
Tags: JavaScript; Web Applications; JSX; React.js
Copyright
Table of Contents
Preface
About This Book
Conventions Used in This Book
Using Code Examples
O’Reilly Online Learning
How to Contact Us
Acknowledgments
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 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?
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 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
Chapter 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
| 
