When it comes to building user interfaces on the web, React enables web developers to unlock a new world of possibilities. This practical book helps you take a deep dive into fundamental concepts of this JavaScript library, including JSX syntax and advanced patterns, the virtual DOM, React reconciliation, and advanced optimization techniques. By becoming fluent in React, you'll quickly learn how to build better web applications.
Author Tejas Kumar helps you explore the depths of React in plain English, without the typical software engineering jargon, so you can more easily understand how this JavaScript library works. You'll learn how to write intuitive React code that fully understands the nuances and layers of React, unlocking a whole new level of fluency.
You will:
• Understand how React works at a deeper level
• Write React apps while optimizing them along the way
• Build resilient React applications that work well at arbitrary scale
• Create React applications for other platforms adjacent to the web and mobile devices
• Know when to reach for different mechanisms exposed by React, such as reducers versus state versus refs
Author(s): Tejas Kumar
Edition: 1
Publisher: O'Reilly Media
Year: 2024
Language: English
Commentary: Publisher's PDF; 2024-02-13: First Release
Pages: 334
City: Sebastopol, CA
Tags: Web Applications; Concurrency; JSX; Next.js; React.js; Virtual DOM
Cover
Copyright
Table of Contents
Foreword
Preface
Conventions Used in This Book
O’Reilly Online Learning
How to Contact Us
Acknowledgments
Chapter 1. The Entry-Level Stuff
Why Is React a Thing?
The World Before React
jQuery
Backbone
KnockoutJS
AngularJS
Enter React
React’s Value Proposition
Releasing React
The Flux Architecture
Benefits of the Flux Architecture
Wrap-Up: So…Why Is React a Thing?
Chapter Review
Review Questions
Up Next
Chapter 2. JSX
JavaScript XML?
Benefits of JSX
Drawbacks of JSX
Under the Hood
How Does Code Work?
Extending JavaScript Syntax with JSX
The JSX Pragma
Expressions
Chapter Review
Review Questions
Up Next
Chapter 3. The Virtual DOM
An Intro to the Virtual DOM
The Real DOM
Pitfalls of the Real DOM
Document Fragments
How the Virtual DOM Works
React Elements
Virtual DOM Versus Real DOM
Efficient Updates
Chapter Review
Review Questions
Up Next
Chapter 4. Inside Reconciliation
Understanding Reconciliation
Batching
Prior Art
Stack Reconciler (Legacy)
The Fiber Reconciler
Fiber as a Data Structure
Double Buffering
Fiber Reconciliation
Chapter Review
Review Questions
Up Next
Chapter 5. Common Questions and Powerful Patterns
Memoization with React.memo
Getting Fluent in React.memo
Memoized Components That Still Rerender
It’s a Guideline, Not a Rule
Memoization with useMemo
useMemo Considered Harmful
Forget About All of This
Lazy Loading
Greater UI Control with Suspense
useState Versus useReducer
Immer and Ergonomics
Powerful Patterns
Presentational/Container Components
Higher-Order Component
Render Props
Control Props
Prop Collections
Compound Components
State Reducer
Chapter Review
Review Questions
Up Next
Chapter 6. Server-Side React
Limitations of Client-Side Rendering
SEO
Performance
Security
The Rise of Server Rendering
Benefits of Server Rendering
Hydration
Hydration Considered Harmful
Creating Server Rendering
Manually Adding Server Rendering to a Client-Only React App
Hydrating
Server Rendering APIs in React
renderToString
renderToPipeableStream
renderToReadableStream
When to Use What
Don’t Roll Your Own
Chapter Review
Review Questions
Up Next
Chapter 7. Concurrent React
The Problem with Synchronous Rendering
Revisiting Fiber
Scheduling and Deferring Updates
Diving Deeper
The Scheduler
Render Lanes
How Render Lanes Work
Processing Lanes
Commit Phase
useTransition
Simple Example
Advanced Example: Navigation
Diving Deeper
useDeferredValue
Purpose of useDeferredValue
When to Use useDeferredValue
When Not to Use useDeferredValue
Problems with Concurrent Rendering
Tearing
Chapter Review
Review Questions
Up Next
Chapter 8. Frameworks
Why We Need a Framework
Server Rendering
Routing
Data Fetching
Benefits of Using a Framework
Trade-Offs of Using a Framework
Popular React Frameworks
Remix
Next.js
Choosing a Framework
Understanding Your Project Needs
Next.js
Remix
Trade-Offs
Developer Experience
Runtime Performance
Chapter Review
Review Questions
Up Next
Chapter 9. React Server Components
Benefits
Server Rendering
Under the Hood
Making Updates
Nuance
Rules of Server Components
Serializability Is King
No Effectful Hooks
State Is Not State
Client Components Cannot Import Server Components
Client Components Are Not Bad
Server Actions
Forms and Mutations
Outside of Forms
The Future of React Server Components
Chapter Review
Review Questions
Up Next
Chapter 10. React Alternatives
Vue.js
Signals
Simplicity
Angular
Change Detection
Signals
Svelte
Runes
Solid
Qwik
Common Patterns
Component-Based Architecture
Declarative Syntax
Updates
Lifecycle Methods
Ecosystem and Tooling
React Is Not Reactive
Example 2: Dependent Values
The Future of React
React Forget
Chapter Review
Review Questions
Up Next
Chapter 11. Conclusion
Takeaways
Our Timeline
The Mechanics Behind the Magic
Advanced Adventures
Staying Up-to-Date
Index
About the Author
Colophon
