Table of Contents
Book Revision
Updated January 13th, 2020
Join our Official Community Discord
Bug Reports
Be notified of updates via Twitter
We'd love to hear from you!
Foreword
How to Get the Most Out of This Book
Overview
Running Code Examples
Project setups
Code Blocks and Context
Code Block Numbering
Getting Help
Emailing Us
Get excited
Part I
Your first React Web Application
Building Product Hunt
Setting up your development environment
Code editor
Node.js and npm
Install Git
Browser
Special instruction for Windows users
Ensure IIS is installed
JavaScript ES6/ES7
Getting started
Sample Code
Previewing the application
Prepare the app
What's a component?
Our first component
JSX
The developer console
Babel
ReactDOM.render()
Building Product
Making Product data-driven
The data model
Using props
Rendering multiple products
React the vote (your app's first interaction)
Propagating the event
Binding custom component methods
Using state
Setting state with this.setState()
Updating state and immutability
Refactoring with the Babel plugin transform-class-properties
Babel plugins and presets
Property initializers
Refactoring Product
Refactoring ProductList
Congratulations!
Components
A time-logging app
Getting started
Previewing the app
Prepare the app
Breaking the app into components
The steps for building React apps from scratch
Step 2: Build a static version of the app
TimersDashboard
EditableTimer
TimerForm
ToggleableTimerForm
Timer
Render the app
Try it out
Step 3: Determine what should be stateful
State criteria
Applying the criteria
Step 4: Determine in which component each piece of state should live
The list of timers and properties of each timer
Whether or not the edit form of a timer is open
Visibility of the create form
Step 5: Hard-code initial states
Adding state to TimersDashboard
Receiving props in EditableTimerList
Props vs. state
Adding state to EditableTimer
Timer remains stateless
Adding state to ToggleableTimerForm
Adding state to TimerForm
Step 6: Add inverse data flow
TimerForm
ToggleableTimerForm
TimersDashboard
Updating timers
Adding editability to Timer
Updating EditableTimer
Updating EditableTimerList
Defining onEditFormSubmit() in TimersDashboard
Deleting timers
Adding the event handler to Timer
Routing through EditableTimer
Routing through EditableTimerList
Implementing the delete function in TimersDashboard
Adding timing functionality
Adding a forceUpdate() interval to Timer
Try it out
Add start and stop functionality
Add timer action events to Timer
Create TimerActionButton
Run the events through EditableTimer and EditableTimerList
Try it out
Methodology review
Components & Servers
Introduction
Preparation
server.js
The Server API
text/html endpoint
JSON endpoints
Playing with the API
Loading state from the server
Try it out
client
Fetch
Sending starts and stops to the server
Sending creates, updates, and deletes to the server
Give it a spin
Next up
JSX and the Virtual DOM
React Uses a Virtual DOM
Why Not Modify the Actual DOM?
What is a Virtual DOM?
Virtual DOM Pieces
ReactElement
Experimenting with ReactElement
Rendering Our ReactElement
Adding Text (with children)
ReactDOM.render()
JSX
JSX Creates Elements
JSX Attribute Expressions
JSX Conditional Child Expressions
JSX Boolean Attributes
JSX Comments
JSX Spread Syntax
JSX Gotchas
JSX Summary
References
Advanced Component Configuration with props, state, and children
Intro
How to use this chapter
Components
Creating Components - ES6 Classes or Functional Components
render() Returns a ReactElement Tree
Getting Data into render()
props are the parameters
PropTypes
Default props with getDefaultProps()
Context
Default value
Multiple contexts
state
Using state: Building a Custom Radio Button
Stateful components
State updates that depend on the current state
Thinking About State
Stateless Components
Switching to Stateless
Stateless Encourages Reuse
Talking to Children Components with props.children
React.Children.map() & React.Children.forEach()
React.Children.toArray()
Summary
References
Forms
Forms 101
Preparation
The Basic Button
Events and Event Handlers
Back to the Button
Text Input
Accessing User Input With refs
Using User Input
Uncontrolled vs. Controlled Components
Accessing User Input With state
Multiple Fields
On Validation
Adding Validation to Our App
Creating the Field Component
Using our new Field Component
Remote Data
Building the Custom Component
Adding CourseSelect
Separation of View and State
Async Persistence
Redux
Form Component
Connect the Store
Form Modules
formsy-react
react-input-enhancements
tcomb-form
winterfell
react-redux-form
Using Webpack with Create React App
JavaScript modules
Create React App
Exploring Create React App
public/index.html
package.json
src/
index.js
Booting the app
Webpack basics
Making modifications to the sample app
Hot reloading
Auto-reloading
Creating a production build
Ejecting
Buckle up
Using Create React App with an API server
The completed app
How the app is organized
The server
Client
Concurrently
Using the Webpack development proxy
Webpack at large
When to use Webpack/Create React App
Unit Testing
Writing tests without a framework
Preparing Modash
Writing the first spec
The assertEqual() function
What is Jest?
Using Jest
expect()
The first Jest test for Modash
The other truncate() spec
The rest of the specs
Testing strategies for React applications
Integration vs Unit Testing
Shallow rendering
Enzyme
Testing a basic React component with Enzyme
Setup
The App component
The first spec for App
More assertions for App
Using beforeEach
Simulating a change
Clearing the input field
Simulating a form submission
Writing tests for the food lookup app
FoodSearch
Exploring FoodSearch
Writing FoodSearch.test.js
In initial state
A user has typed a value into the search field
Mocking with Jest
Mocking Client
The API returns results
The user clicks on a food item
The API returns empty result set
Further reading
Routing
What's in a URL?
React Router's core components
Building the components of react-router
The completed app
Building Route
Building Link
Building Router
Building Redirect
Using react-router
More Route
Using Switch
Dynamic routing with React Router
The completed app
The server's API
Starting point of the app
Using URL params
Propagating pathnames as props
Dynamic menu items with NavLink
Supporting authenticated routes
The Client library
Implementing login
PrivateRoute, a higher-order component
Redirect state
Recap
Further Reading
Part II
Intro to Flux and Redux
Why Flux?
Flux is a Design Pattern
Flux overview
Flux implementations
Redux
Redux's key ideas
Building a counter
Preparation
Overview
The counter's actions
Incrementing the counter
Decrementing the counter
Supporting additional parameters on actions
Building the store
Try it out
The core of Redux
Next up
The beginnings of a chat app
Previewing
State
Actions
Building the reducer()
Initializing state
Handling the ADD_MESSAGE action
Handling the DELETE_MESSAGE action
Subscribing to the store
createStore() in full
Connecting Redux to React
Using store.getState()
Using store.subscribe()
Using store.dispatch()
The app's components
Preparing App.js
The App component
The MessageInput component
The MessageView component
Next up
Intermediate Redux
Preparation
Using createStore() from the redux library
Try it out
Representing messages as objects in state
Updating ADD_MESSAGE
Updating DELETE_MESSAGE
Updating the React components
Introducing threads
Supporting threads in initialState
Supporting threads in the React components
Modifying App
Turning MessageView into Thread
Try it out
Adding the ThreadTabs component
Updating App
Creating ThreadTabs
Try it out
Supporting threads in the reducer
Updating ADD_MESSAGE in the reducer
Updating the MessageInput component
Try it out
Updating DELETE_MESSAGE in the reducer
Try it out
Adding the action OPEN_THREAD
The action object
Modifying the reducer
Dispatching from ThreadTabs
Try it out
Breaking up the reducer function
A new reducer()
Updating threadsReducer()
Try it out
Adding messagesReducer()
Modifying the ADD_MESSAGE action handler
Creating messagesReducer()
Modifying the DELETE_MESSAGE action handler
Adding DELETE_MESSAGE to messagesReducer()
Defining the initial state in the reducers
Initial state in reducer()
Adding initial state to activeThreadIdReducer()
Adding initial state to threadsReducer()
Try it out
Using combineReducers() from redux
Next up
Using Presentational and Container Components with Redux
Presentational and container components
Splitting up ThreadTabs
Splitting up Thread
Removing store from App
Try it out
Generating containers with react-redux
The Provider component
Wrapping App in Provider
Using connect() to generate ThreadTabs
Using connect() to generate ThreadDisplay
Action creators
Conclusion
Asynchronicity and server communication
Using GraphQL
Your First GraphQL Query
GraphQL Benefits
GraphQL vs. REST
GraphQL vs. SQL
Relay and GraphQL Frameworks
Chapter Preview
Consuming GraphQL
Exploring With GraphiQL
GraphQL Syntax 101
Complex Types
Unions
Fragments
Interfaces
Exploring a Graph
Graph Nodes
Viewer
Graph Connections and Edges
Mutations
Subscriptions
GraphQL With JavaScript
GraphQL With React
Wrapping Up
GraphQL Server
Writing a GraphQL Server
Special setup for Windows users
Game Plan
Express HTTP Server
Adding First GraphQL Types
Adding GraphiQL
Introspection
Mutation
Rich Schemas and SQL
Setting Up The Database
Schema Design
Object and Scalar Types
Lists
Performance: Look-Ahead Optimizations
Lists Continued
Connections
Authentication
Authorization
Rich Mutations
Relay and GraphQL
Performance: N+1 Queries
Summary
Relay Classic
Introduction
What We're Going to Cover
What We're Building
Guide to the Code Structure
Relay is a Data Architecture
Relay GraphQL Conventions
Exploring Relay Conventions in GraphQL
Fetching Objects By ID
Walking Connections
Changing Data with Mutations
Relay GraphQL Queries Summary
Adding Relay to Our App
Quick Look at the Goal
A Preview of the Author Page
Containers, Queries, and Fragments
Validating Our Relay Queries at Compile Time
Setting Up Routing
Adding Relay to Our Routes
App Component
AuthorQueries Component
AuthorPage Component
Try It Out
AuthorPage with Styles
BooksPage
BooksPage Route
BooksPage Component
BooksPage render()
BookItem
BookItem Fragment
Fragment Value Masking
Improving the AuthorPage
Changing Data With Mutations
Building a Book's Page
Book Page Editing
Mutations
Defining a Mutation Object
Inline Editing
Conclusion
Where to Go From Here
React Native
Init
Routing
renderScene()
configureScene()
Web components vs. Native components
,
, and
Styles
StyleSheet
Flexbox
HTTP requests
What is a promise
Enter Promises
Single-use guarantee
Creating a promise
Debugging with React Native
Where to go from here
Appendix A: PropTypes
Validators
string
number
boolean
function
object
object shape
multiple types
instanceOf
array
array of type
node
element
any type
Optional & required props
custom validator
Appendix B: ES6
Prefer const and let over var
Arrow functions
Modules
Object.assign()
Template literals
The spread operator (...)
Enhanced object literals
Default arguments
Destructuring assignments
Appendix C: React Hooks
WARNING: Hooks are Alpha
Motivation behind Hooks
How Hooks Map to Component Classes
Using Hooks Requires react "next"
useState() Hook Example
Our Component is a Function
Reading and Writing State
React Tracks the State
Multiple States
useEffect() Hook Example
Fetch Data and Update State
Performance Concerns When Using Effects
useContext() Hook Example
The Point of Context
useContext() makes context easier to use
Getting a Reference to the Context in a Larger App
useRef() Hook Example
useRef() and forms with input
Using Custom Hooks
Writing Tests for React Hooks
Writing tests for useState() Hook
Writing tests for useEffect() Hook
Writing tests for useRef() Hook
Community Reaction to Hooks
References to the Different types of Hooks
Future of Hooks
More Resources
Changelog
Revision 40 - 2020-01-13
Revision 39 - 2019-01-10
Revision 38 - 2018-12-20
Revision 37 - 2018-12-19
Revision 36 - 2018-10-01
Revision 35 - 2018-04-02
Revision 34 - 2017-10-17
Revision 33 - 2017-08-31
Revision 32 - 2017-06-14
Revision 31 - 2017-05-18
Revision 30 - 2017-04-20
Revision 29 - 2017-04-13
Revision 28 - 2017-04-10
Revision 27 - 2017-03-16
Revision 26 - 2017-02-22
Revision 25 - 2017-02-17
Revision 24 - 2017-02-08
Revision 23 - 2017-02-06
Revision 22 - 2017-02-01
Revision 21 - 2017-01-27
Revision 20 - 2017-01-10
Revision 19 - 2016-12-20
Revision 18 - 2016-11-22
Revision 17 - 2016-11-04
Revision 16 - 2016-10-12
Revision 15 - 2016-10-05
Revision 14 - 2016-08-26
Revision 13 - 2016-08-02
Revision 12 - 2016-07-26
Revision 11 - 2016-07-08
Revision 10 - 2016-06-24
Revision 9 - 2016-06-21
Revision 8 - 2016-06-02
Revision 7 - 2016-05-13
Revision 6 - 2016-05-13
Revision 5 - 2016-04-25
Revision 4 - 2016-04-22
Revision 3 - 2016-04-08
Revision 2 - 2016-03-16
Revision 1 - 2016-02-14
