Fullstack React ; The Complete Guide to ReactJS and Friends

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