Home Page Icon
Home Page
Table of Contents for
Dedication
Close
Dedication
by Cássio de Sousa Antonio
Pro React
Cover
Title
Copyright
Dedication
Contents at a glance
Contents
About the Author
About the Technical Reviewers
Acknowledgments
Introduction
Chapter 1: Getting Started
Before You Get Started
Node.js and npm
JavaScript ES6
Defining React
React’s Benefits
Reactive Rendering is Simple
Component-Oriented Development Using Pure JavaScript
Flexible Abstraction of the Document Model
Building Your First React App
React Development Workflow
Creating Your First Component
Saving a little typing
Dynamic Values
Composing Components
Props
Presenting the Kanban Board App
Defining Component Hierarchy
The Importance of Props
Building the Components
Introducing State
Kanban App: Togglable Cards
Summary
Chapter 2: Inside the DOM Abstraction
Events in React
DOM Event Listeners
Kanban App: Managing the DOM Event
Digging Deeper in JSX
JSX vs. HTML
Differences Between JSX and HTML
JSX Quirks
Kanban App: Indicating Whether a Card Is Open or Closed
Blank Space
Comments in JSX
Rendering Dynamic HTML
Kanban App: Rendering Markdown
React Without JSX
React Elements in Plain JavaScript
Element Factories
Custom Factories
Inline Styling
Defining Inline Styles
Kanban App: Card Color via Inline Styling
Working With Forms
Controlled Components
Special Cases
Uncontrolled Components
Kanban App: Creating a Task Form
Virtual DOM Under the Hood
Keys
Kanban App: Keys
Refs
Summary
Chapter 3: Architecting Applications with Components
Prop Validation
Default Prop Values
Built-in propType Validators
Kanban App: Defining Prop Types
Custom PropType Validators
Component Composition Strategies and Best Practices
Stateful and Pure Components
Which Components Should Be Stateful?
Data Flow and Component Communication
Component Lifecycle
Lifecycle Phases and Methods
Lifecycle Functions in Practice: Data Fetching
A Brief Talk About Immutability
Immutability in Plain JavaScript
Nested Objects
React Immutability Helper
Kanban App: Adding (a Little) Complexity
Summary
Chapter 4: Sophisticated Interactions
Animation in React
CSS Transition and Animation 101
React CSSTransitionGroup
Drag and Drop
React DnD Implementation Overview
A React DnD Sample Implementation
Kanban App: Animations and Drag-and-Drop Support
Card Toggle Animation
Card Dragging
Summary
Chapter 5: Routing
Implementing Routing the “Naive” Way
React Router
Index Route
Routes with Parameters
Setting Active Links
Passing Props
Decoupling the UI from the URL
Changing Routes Programmatically
Histories
Kanban App: Routing
Summary
Chapter 6: Architecting React Applications with Flux
What Is Flux?
Stores
Actions
Dispatcher
The Unrealistic, Minimal Flux App
The Bank Account Application
Flux Utils
Flux Utils Stores
Container Component Higher Order Function
Asynchronous Flux
waitFor: Coordinating Store Update Order
Asynchronous Data Fetching
AirCheap Application
Setup: Project Organization and Basic Files
Creating the API Helper and ActionCreators for Fetching Airports
AirportStore
App Component
Finishing the AirCheap application: Loading Tickets
Evolving Your Async Data Fetching Implementation
AppDispatcher’s dispatchAsync
Kanban App: Moving to a Flux Architecture
Refactor: Creating Flux Basic Structure and Moving Files
Moving the Data Fetching to the Flux Architecture
Implementing the FetchCards Action, API Method Call, and Store Callback
Moving All Card and Task Manipulations to the Flux Architecture
Preparing for the Functionality Migration
Components
Removing All Component State
Summary
Chapter 7: Performance Tuning
How the Reconciliation Process Works
Batching
Sub-Tree Rendering
React Perf
The Performance Test Application
Installing and Using ReactPerf
shouldComponentUpdate
shallowCompare Add-on
Summary
Chapter 8 : Performance Tuning
Node.js and Express
Node.js and Express “Hello World”
Isomorphic React Basics
Creating the Project Structure
Rendering React Components on the Server
Mounting React on the Client
Routing
Setting Up Internal Routes
Dynamic Data Fetching
Rendering Routes
Summary
Chapter 9: Testing React Components
Jest
React Test Utilities
Rendering a Component for Testing
Transversing and Finding Children
Simulating Events
Shallow Rendering
Summary
Index
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Prev
Previous Chapter
Copyright
Next
Next Chapter
Contents at a glance
To my wife, Mel, for all the support, inspiration, and love. You make it all worthwhile.
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset