The React workshop : get started with building web applications using practical tips and examples from React use cases

Cover
FM
Copyright
Table of Contents
Preface
Chapter 1: Getting Started with React
	Introduction
	Problems before React
	Introducing React
		Getting Started with Create React App
		Setting Up a Development Environment
		Tweaking Create React App's Options
	Using Create React App to Create Our Project
		Exploring the Created Project
		Exploring the Rest of the Scaffold
	Introduction to JSX
		Diving Deeper into JSX
		Exercise 1.01: Implementing JSX
	Creating a React Component
		Preparing Our Code to Start Writing Our Component
		Understanding Props
		Exercise 1.02: Creating Our First React Component
		Understanding React Rendering
		Building Components with Classes
		Exercise 1.03: Implementing a Click Counter in React Using Classes
		Activity 1.01: Design a React Component
	Summary
Chapter 2: Dealing with React Events
	Introduction – Talking to JavaScript with React
	Designing the State of Our Application
	Quick UI Examples
	Getting Started – Building Our Baseline Component
		Exercise 2.01: Writing the Starter State for Our Code
	Event Handlers in React
		onClick
		Exercise 2.02: Writing Our First Event Handler
		onBlur
	Context of Event Handlers
		In-line Bind Statements
		Constructor Bind Statements
		Exercise 2.03: Building our Username Validator
		Exercise 2.04: Using Alternative Class Declarations to Avoid Binds
	Form Validation in React
		Exercise 2.05: Creating a Validation for Input Fields
		Activity 2.01: Create a Blog Post Using React Event Handlers
	Summary
Chapter 3: Conditional Rendering and for Loops
	Introduction
	Conditional Rendering
		Exercise 3.01: Building Our First App Using Conditional Rendering
	Nested Conditional Rendering
		Exercise 3.02: Building a Conditional Quiz App
		Rendering Loops with React
		Rendering Loops
		Exercise 3.03: Refining Our Quiz Display with Loops
		Activity 3.01: Building a Board Game Using Conditional Rendering
	Summary
Chapter 4: React Lifecycle Methods
	Introduction
	Overview of the Component Lifecycle
		Exercise 4.01: Implementing Lifecycle Methods
	The Mount Lifecycle
		constructor()
		Exercise 4.02: Conditional Rendering and the Mount Lifecycle
		render()
		componentDidMount()
	The Update Lifecycle
		render()
		componentDidUpdate()
		Exercise 4.03: Simulating a Slow AJAX Request and Prerendering Your Component
	The Unmount Lifecycle
		componentWillUnmount()
		Exercise 4.04: Messaging on Unmount
		Activity 4.01: Creating a Messaging App
	Summary
Chapter 5: Class and Function Components
	Introduction
	Introduction to Thinking with React Components
		Atomic Design
		Pragmatic Approach
	Building React Components
		Data Flow
		State and Props
	Class Components
		Exercise 5.01: Creating Profile Component as a Class Component
	Function Component
		Exercise 5.02: Changing the Loader Component as a Function Component
	Differences between Class and Function Components
		Syntax
		Handling State
		Activity 5.01: Creating a Comments Section
	Summary
Chapter 6: State and Props
	Introduction
	State in React
		Initializing and Using State
			Setting State
			setState
		Custom Methods and Closure
		Exercise 6.01: Building an App to Change the Theme
	Props in React
		Children Prop
			Props are Immutable
		Exercise 6.02: Creating a Modal Screen
		Activity 6.01: Creating a Products App Page
	Summary
Chapter 7: Communication between Components
	Introduction
	Getting Started
		Passing Data from Parent to Child Components
		Passing Data to Direct Child Components
		Example 1: Sending Data from a Parent Component to a Direct Child Component
		Example 2: Receiving Data in a Child Class Component
		Example 3: Receiving Data in a Child Function Component
		Example 4: Sending number and Boolean as Props from the Parent Component
		Example 5: Receiving number and boolean Values in Class-Based and Functional Components
			Destructuring Props
		Example 6: Destructuring Prop Values in a Child Class Component
		Example 7: Destructuring Prop Values in a Function Component
		Exercise 7.01: Sending and Receiving Objects as Props from the Parent
		The {children} Prop
		Exercise 7.02: Sending Child Elements Using the children Prop
		Sending and Receiving an Array through Props
		Exercise 7.03: Sending, Receiving, and Displaying an Array from a Parent to a Child
		Passing Data to a Child Component Multiple Levels Down
			Splitting a Component into Smaller Components
		Exercise 7.04: Splitting into Smaller Components
		Passing a Component through a Prop
		Exercise 7.05: Creating a Photo Function Component
	Higher-Order Components
		Exercise 7.06: Creating a HOC Function That Can Be Called with DonationColor
	Render Props
		Exercise 7.07: Adding donationColor
		Passing Data from Children to a Parent
		Exercise 7.08: Passing Data from a Child to a Parent Component
		Passing Data Between Components at Any Level
		Exercise 7.09: Adding the addList Callback Function
	The Context API
		Exercise 7.10: Creating the  Component Using the React Context API
		Activity 7.01: Creating a Temperature Converter
	Summary
Chapter 8: Introduction to Formik
	Introduction
	Uncontrolled Components
		Exercise 8.01: Creating Our First Uncontrolled Form Component
	Controlled Components
		Exercise 8.02: Converting Our Form Component from Uncontrolled to Controlled
	Introduction to Formik
		Advantages of Formik
		Anatomy of a Formik Component
		Initial Values and Handlers
	Formik Higher-Order Components
		Connect
		Validating a Form
		Exercise 8.03: Adding Field Validators
		Controlling When Formik Runs Validation Rules
		Schema Validation
		Exercise 8.04: Controlling Schema Validation Phases
		Submitting a Form
		Activity 8.01: Writing Your Own Form Using Formik
	Summary
Chapter 9: Introduction to React Router
	Introduction
	Understanding Browser Routing
		Exercise 9.01: Building a Basic Router using the Location API
	Basics of React Router
		Exercise 9.02: Implementing a Switch Router
		Adding Params to Your Routes
		Exercise 9.03: Adding Params to Routes
		Adding Page Not Found for Routes
		Exercise 9.04: Adding a NotFound Route
		Nesting Routes
		Exercise 9.05: Nested Routes and the Link Component
		Activity 9.01: Creating an E-Commerce Application
	Summary
Chapter 10: Advanced Routing Techniques: Special Cases
	Introduction
	React Router Special Cases
		Passing URL Parameters between Routes
		Exercise 10.01: Creating URL Parameters
		Matching Unknown Routes with 404 Pages
		Exercise 10.02: Creating Unknown Routes
		Rendering Nested Routes
		Exercise 10.03: Creating Nested Routes
		Protecting Routes
		Preventing OutBound Transitions
		Exercise 10.04: Protected Routes
		Preventing Inbound Transitions
		Activity 10.01: Creating Authentication Using Routing Techniques
	Summary
Chapter 11: Hooks – Reusability, Readability, and a Different Mental Model
	Introduction
	Hooks
		useState
		Exercise 11.01: Displaying an Image with the Toggle Button
		useEffect – from Life Cycle Methods to Effect Hooks
		Exercise 11.02: Creating a Login State Using useEffect
	Comparing useEffect Hooks with Life Cycle Methods
	Comparing Hooks to Render Props
		Activity 11.01: Creating a Reusable Counter
	Summary
Chapter 12: State Management with Hooks
	Introduction
	useState Hook: A Closer Look
		Setter Functions on Arrays
		Exercise 12.01: Array Manipulation Using Hooks
		Equality and Immutability for Objects in React
	Limitations of useState
	Using the useReducer Hook
		Reducer Function in React
		Exercise 12.02: useReducer with a Simple Form
		Effects with Cleanup
		Activity 12.01: Creating a Chat App Using Hooks
	Summary
Chapter 13: Composing Hooks to Solve Complex Problems
	Introduction
	Context API and Hooks
		useContext Hook
		Exercise 13.01: Adding Context to the ShoppingCart App
		Props and Context
		Props for Customization
		Another Example: Theming as a Service
		Exercise 13.02: Creating Context Using useContext and useEffect
		Activity 13.01: Creating a Recipe App
	Summary
Chapter 14: Fetching Data by Making API Requests
	Introduction
	RESTful API
		Five Common HTTP Methods
			PUT versus PATCH
		HTTP Status Codes
		Accept Header and Content-Type Header
	Different Ways of Requesting Data
		XMLHttpRequest
		Exercise 14.01: Requesting Data Using XMLHttpRequest
		Fetch API
		Exercise 14.02: Requesting Data Using the Fetch API
	Axios
		Exercise 14.03: Requesting Data Using Axios
	Comparison of XMLHttpRequest, the Fetch API, and Axios
		Axios versus the Fetch API
			Better Response Handling
			Better Error Handling
	Testing APIs with Postman
		Exercise 14.04: GET and POST Requests with Postman
		Exercise 14.05: PUT, PATCH, and DELETE Requests with Postman
	Making API Requests in React
		React Boilerplate and Axios
		Exercise 14.06: Installing React Boilerplate and Axios
		Testing the NASA API with Postman
		Exercise 14.07: Testing the Endpoint with Postman
	Fetching Data with React
		Exercise 14.08: Creating a Controlled Component to Fetch Data
		Activity 14.01: Building an App to Request Data from Unsplash
	Summary
Chapter 15: Promise API and async/await
	Introduction
	What Is the Promise API?
		Exercise 15.01: Fetching Data through Promises
	What Is async/await?
		async
		await
		then()
		error()
		finally()
		Better Error Handling with async/await
		Exercise 15.02: Converting submitForm() to async/await
		async/await within Loops
		for...of
		forEach()
		map()
		Activity 15.01: Creating a Movie App
	Summary
Chapter 16: Fetching Data on Initial Render and Refactoring with Hooks
	Introduction
	Fetching Data upon Initial Rendering
		Exercise 16.01: Fetching Popular Google Fonts on Initial Rendering
	Fetching Data on Update
		Infinite Loop
		Exercise 16.02: Fetching Trending Google Fonts
	React Hooks to Fetch Data
		Exercise 16.03: Refactoring the FontList Component
	More Refactoring with Custom Hook
		Exercise 16.04: Refactoring a FontList Component with a Custom Hook
		Activity 16.01: Creating an App Using Potter API
	Summary
Chapter 17: Refs in React
	Introduction
	Why React Refs?
		References
		Exercise 17.01: Creating Custom Upload Buttons with Refs
		Ways of Creating React Refs
		Exercise 17.02: Measuring the Dimensions of a div Element in a Class-Based Component
		Exercise 17.03: Measuring the Element Size in a Functional Component
	Forwarding Refs
		Exercise 17.04: Measuring Button Dimensions Using a Forwarded Ref
		Activity 17.01: Creating a Form with an Autofocus Input Element
	Summary
Chapter 18: Practical Use Cases of Refs
	Introduction
	Recap of React Refs Basics
		Encapsulation via Props
	DOM Manipulation Helpers
		The cloneElement function in React
		Exercise 18.01: Cloning an Element and Passing It an onClick Prop
		The createPortal function in ReactDOM
		Exercise 18.02: Creating a Global Overlay Using Portals
		Activity 18.01: Portable Modals Using Refs
	Summary
Appendix
Index