React Quickly

React Quickly
brief contents
contents
foreword
preface
acknowledgments
about this book
	Roadmap
	Who this book is for (read this!)
	What this book is not (read this too!)
	How to use this book
	Source code
	Errata
	Book forum
about the author
about the cover
Part 1: React foundation
	Chapter 1: Meeting React
		1.1 What is React?
		1.2 The problem that React solves
		1.3 Benefits of using React
			1.3.1 Simplicity
			1.3.2 Speed and testability
			1.3.3 Ecosystem and community
		1.4 Disadvantages of React
		1.5 How React can fit into your web applications
			1.5.1 React libraries and rendering targets
			1.5.2 Single-page applications and React
			1.5.3 The React stack
		1.6 Your first React code: Hello World
		1.7 Quiz
		1.8 Summary
		1.9 Quiz answers
	Chapter 2: Baby steps with React
		2.1 Nesting elements
		2.2 Creating component classes
		2.3 Working with properties
		2.4 Quiz
		2.5 Summary
		2.6 Quiz answers
	Chapter 3: Introduction to JSX
		3.1 What is JSX, and what are its benefits?
		3.2 Understanding JSX
			3.2.1 Creating elements with JSX
			3.2.2 Working with JSX in components
			3.2.3 Outputting variables in JSX
			3.2.4 Working with properties in JSX
			3.2.5 Creating React component methods
			3.2.6 if/else in JSX
			3.2.7 Comments in JSX
		3.3 Setting up a JSX transpiler with Babel
		3.4 React and JSX gotchas
			3.4.1 Special characters
			3.4.2 data- attributes
			3.4.3 style attribute
			3.4.4 class and for
			3.4.5 Boolean attribute values
		3.5 Quiz
		3.6 Summary
		3.7 Quiz answers
	Chapter 4: Making React interactive with states
		4.1 What are React component states?
		4.2 Working with states
			4.2.1 Accessing states
			4.2.2 Setting the initial state
			4.2.3 Updating states
		4.3 States and properties
		4.4 Stateless components
		4.5 Stateful vs. stateless components
		4.6 Quiz
		4.7 Summary
		4.8 Quiz answers
	Chapter 5: React component lifecycle events
		5.1 A bird’s-eye view of React component lifecycle events
		5.2 Categories of events
		5.3 Implementing an event
		5.4 Executing all events together
		5.5 Mounting events
			5.5.1 componentWillMount()
			5.5.2 componentDidMount()
		5.6 Updating events
			5.6.1 componentWillReceiveProps(newProps)
			5.6.2 shouldComponentUpdate()
			5.6.3 componentWillUpdate()
			5.6.4 componentDidUpdate()
		5.7 Unmounting event
			5.7.1 componentWillUnmount()
		5.8 A simple example
		5.9 Quiz
		5.10 Summary
		5.11 Quiz answers
	Chapter 6: Handling events in React
		6.1 Working with DOM events in React
			6.1.1 Capture and bubbling phases
			6.1.2 React events under the hood
			6.1.3 Working with the React SyntheticEvent event object
			6.1.4 Using events and state
			6.1.5 Passing event handlers as properties
			6.1.6 Exchanging data between components
		6.2 Responding to DOM events not supported by React
		6.3 Integrating React with other libraries: jQuery UI events
			6.3.1 Integrating buttons
			6.3.2 Integrating labels
		6.4 Quiz
		6.5 Summary
		6.6 Quiz answers
	Chapter 7: Working with forms in React
		7.1 The recommended way to work with forms in React
			7.1.1 Defining a form and its events in React
			7.1.2 Defining form elements
			7.1.3 Capturing form changes
			7.1.4 Account field example
		7.2 Alternative ways to work with forms
			7.2.1 Uncontrolled elements with change capturing
			7.2.2 Uncontrolled elements without capturing changes
			7.2.3 Using references to access values
			7.2.4 Default values
		7.3 Quiz
		7.4 Summary
		7.5 Quiz answers
	Chapter 8: Scaling React components
		8.1 Default properties in components
		8.2 React property types and validation
		8.3 Rendering children
		8.4 Creating React higher-order components for code reuse
			8.4.1 Using displayName: distinguishing child components from their parent
			8.4.2 Using the spread operator: passing all of your attributes
			8.4.3 Using higher-order components
		8.5 Best practices: presentational vs. container components
		8.6 Quiz
		8.7 Summary
		8.8 Quiz answers
	Chapter 9: Project: Menu component
		9.1 Project structure and scaffolding
		9.2 Building the menu without JSX
			9.2.1 The Menu component
			9.2.2 The Link component
			9.2.3 Getting it running
		9.3 Building the menu in JSX
			9.3.1 Refactoring the Menu component
			9.3.2 Refactoring the Link component
			9.3.3 Running the JSX project
		9.4 Homework
		9.5 Summary
	Chapter 10: Project: Tooltip component
		10.1 Project structure and scaffolding
		10.2 The Tooltip component
			10.2.1 The toggle() function
			10.2.2 The render() function
		10.3 Getting it running
		10.4 Homework
		10.5 Summary
	Chapter 11: Project: Timer component
		11.1 Project structure and scaffolding
		11.2 App architecture
		11.3 The TimerWrapper component
		11.4 The Timer component
		11.5 The Button component
		11.6 Getting it running
		11.7 Homework
		11.8 Summary
Part 2: React architecture
	Chapter 12: The Webpack build tool
		12.1 What does Webpack do?
		12.2 Adding Webpack to a project
			12.2.1 Installing Webpack and its dependencies
			12.2.2 Configuring Webpack
		12.3 Modularizing your code
		12.4 Running Webpack and testing the build
		12.5 Hot module replacement
			12.5.1 Configuring HMR
			12.5.2 Hot module replacement in action
		12.6 Quiz
		12.7 Summary
		12.8 Quiz answers
	Chapter 13: React routing
		13.1 Implementing a router from scratch
			13.1.1 Setting up the project
			13.1.2 Creating the route mapping in app.jsx
			13.1.3 Creating the Router component in router.jsx
		13.2 React Router
			13.2.1 React Router’s JSX style
			13.2.2 Hash history
			13.2.3 Browser history
			13.2.4 React Router development setup with Webpack
			13.2.5 Creating a layout component
		13.3 React Router features
			13.3.1 Accessing router with the withRouter higher-order component
			13.3.2 Navigating programmatically
			13.3.3 URL parameters and other route data
			13.3.4 Passing properties in React Router
		13.4 Routing with Backbone
		13.5 Quiz
		13.6 Summary
		13.7 Quiz answers
	Chapter 14: Working with data using Redux
		14.1 React support for unidirectional data flow
		14.2 Understanding the Flux data architecture
		14.3 Using the Redux data library
			14.3.1 Redux Netflix clone
			14.3.2 Dependencies and configs
			14.3.3 Enabling Redux
			14.3.4 Routes
			14.3.5 Combining reducers
			14.3.6 Reducer for movies
			14.3.7 Actions
			14.3.8 Action creators
			14.3.9 Connecting components to the store
			14.3.10 Dispatching an action
			14.3.11 Passing action creators into component properties
			14.3.12 Running the Netflix clone
			14.3.13 Redux wrap-up
		14.4 Quiz
		14.5 Summary
		14.6 Quiz answers
	Chapter 15: Working with data using GraphQL
		15.1 GraphQL
		15.2 Adding a server to the Netflix clone
			15.2.1 Installing GraphQL on a server
			15.2.2 Data structure
			15.2.3 GraphQL schema
			15.2.4 Querying the API and saving the response into the store
			15.2.5 Showing the list of movies
			15.2.6 GraphQL wrap-up
		15.3 Quiz
		15.4 Summary
		15.5 Quiz answers
	Chapter 16: Unit testing React with Jest
		16.1 Types of testing
		16.2 Why Jest (vs. Mocha or others)?
		16.3 Unit testing with Jest
			16.3.1 Writing unit tests in Jest
			16.3.2 Jest assertions
		16.4 UI testing React with Jest and TestUtils
			16.4.1 Finding elements with TestUtils
			16.4.2 UI-testing the password widget
			16.4.3 Shallow rendering
		16.5 TestUtils wrap-up
		16.6 Quiz
		16.7 Summary
		16.8 Quiz answers
	Chapter 17: React on Node and Universal JavaScript
		17.1 Why React on the server? And what is Universal JavaScript?
			17.1.1 Proper page indexing
			17.1.2 Better performance with faster loading times
			17.1.3 Better code maintainability
			17.1.4 Universal JavaScript with React and Node
		17.2 React on Node
		17.3 React and Express: rendering on the server side from components
			17.3.1 Rendering simple text on the server side
			17.3.2 Rendering an HTML page
		17.4 Universal JavaScript with Express and React
			17.4.1 Project structure and configuration
			17.4.2 Setting up the server
			17.4.3 Server-side layout templates with Handlebars
			17.4.4 Composing React components on the server
			17.4.5 Client-side React code
			17.4.6 Setting up Webpack
			17.4.7 Running the app
		17.5 Quiz
		17.6 Summary
		17.7 Quiz answers
	Chapter 18: Project: Building a bookstore with React Router
		18.1 Project structure and Webpack configuration
		18.2 The host HTML file
		18.3 Creating components
			18.3.1 Main file: app.jsx
			18.3.2 The Cart component
			18.3.3 The Checkout component
			18.3.4 The Modal component
			18.3.5 The Product component
		18.4 Launching the project
		18.5 Homework
		18.6 Summary
	Chapter 19: Project: Checking passwords with Jest
		19.1 Project structure and Webpack configuration
		19.2 The host HTML file
		19.3 Implementing a strong password module
			19.3.1 The tests
			19.3.2 The code
		19.4 Implementing the Password component
			19.4.1 The tests
			19.4.2 The code
		19.5 Putting it into action
		19.6 Homework
		19.7 Summary
	Chapter 20: Project: Implementing autocomplete with Jest, Express, and MongoDB
		20.1 Project structure and Webpack configuration
		20.2 Implementing the web server
			20.2.1 Defining the RESTful APIs
			20.2.2 Rendering React on the server
		20.3 Adding the browser script
		20.4 Creating the server template
		20.5 Implementing the Autocomplete component
			20.5.1 The tests for Autocomplete
			20.5.2 The code for the Autocomplete component
		20.6 Putting it all together
		20.7 Homework
		20.8 Summary
Appendix A: Installing applications used in this book
	Installing React
	Installing Node.js
	Installing Express
	Installing Bootstrap
	Installing Browserify
	Installing MongoDB
	Using Babel to compile JSX and ES6
		Node.js and ES6
		Standalone browser Babel
Appendix B: React cheatsheet
	Installation
		React
		React DOM
	Rendering
		ES5
		ES5+JSX
	Server-side rendering
	Components
		ES5
		ES5 + JSX
		ES6 + JSX
	Advanced components
		Options (ES5)
		ES5
		ES5 + JSX
		ES6 + JSX
	Lifecycle events
		Sequence of lifecycle events (inspired by http://react.tips)
	Special properties
	propTypes
		Custom validation
	Component properties and methods
		Properties
		Methods
	React add-ons
	React components
Appendix C: Express.js cheatsheet
	Installing Express.js
	Generator
		Usage
		Options
	Basics
	HTTP verbs and routes
	Requests
	Request-header shortcuts
	Response
	Handler signatures
	Stylus and Jade
	Body
	Static
	Connect middleware
	Other popular middleware
	Resources
Appendix D: MongoDB and Mongoose cheatsheet
	MongoDB
	MongoDB console
	Installing Mongoose
	Mongoose basic usage
	Mongoose schema
	Create, read, update, delete (CRUD) Mongoose example
	Mongoose model methods
	Mongoose document methods
Appendix E: ES6 for success
	Default parameters
	Template literals
	Multiline strings
	Destructuring assignment
	Enhanced object literals
	Arrow functions
	Promises
	Block-scoped constructs: let and const
	Classes
	Modules
	Using ES6 today with Babel
	Other ES6 features
index
	Symbols
	A
	B
	C
	D
	E
	F
	G
	H
	I
	J
	K
	L
	M
	N
	O
	P
	Q
	R
	S
	T
	U
	V
	W
	X
	Z