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

Table of contents :
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