The React Workshop

Spis treści książki

• The React Workshop
• Preface
  • About the Book
    • Audience
    • About the Chapters
    • Conventions
    • Before You Begin
    • Installation Instructions
      • Node.js/NPM
      • Yarn
      • Create React App
    • Editors/IDEs
    • Installing the Code Bundle
• 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 Apps 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
• 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
• 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
• 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
• 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
• 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
• 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 <AnimalCount> Component Using the React Context API
    • Activity 7.01: Creating a Temperature Converter
  • Summary
• 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
• 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
• 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
• 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
• 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
• 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
• 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
• 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
• 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
• 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
• 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
  • 1. Getting Started with React
    • Activity 1.01: Design a React Component
  • 2. Dealing with React Events
    • Activity 2.01: Create a Blog Post Using React Event Handlers
  • 3. Conditional Rendering and for Loops
    • Activity 3.01: Building a Board Game Using Conditional Rendering
  • 4. React Lifecycle Methods
    • Activity 4.01: Creating a Messaging App
  • 5. Class and Function Components
    • Activity 5.01: Creating a Comments Section
  • 6. State and Props
    • Activity 6.01: Creating a Products App Page
  • 7. Communication between Components
    • Activity 7.01: Creating a Temperature Converter
  • 8. Introduction to Formik
    • Activity 8.01: Writing Your Own Form Using Formik
  • 9. Introduction to React Router
    • Activity 9.01: Creating an E-Commerce Application
  • 10. Advanced Routing Techniques: Special Cases
    • Activity 10.01: Creating Authentication Using Routing Techniques
  • 11. Hooks Reusability, Readability, and a Different Mental Model
    • Activity 11.01: Creating a Reusable Counter
  • 12. State Management with Hooks
    • Activity 12.01: Creating a Chat App Using Hooks
  • 13. Composing Hooks to Solve Complex Problems
    • Activity 13.01: Creating a Recipe App
  • 14. Fetching Data by Making API Requests
    • Activity 14.01: Building an App to Request Data from Unsplash
  • 15. Promise API and async/await
    • Activity 15.01: Creating a Movie App
  • 16. Fetching Data on Initial Render and Refactoring with Hooks
    • Activity 16.01: Creating an App Using Potter API
  • 17. Refs in React
    • Activity 17.01: Creating a Form with an Autofocus Input Element
  • 18. Practical Use Cases of Refs
    • Activity 18.01: Portable Modals Using Refs

pokaż cały spis treści

ukryj recenzje