The React Workshop

The React Workshop

by Brandon Richey, Ryan Yu, Endre Vegh, Theofanis Despoudis, Anton Punith, Florian Sloot
Released August 2020
Publisher(s): Packt Publishing
ISBN: 9781838645564

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Work through engaging exercises and activities and gain practical skills to make your web applications function effortlessly with the help of React

Key Features

  • Explore the React environment by creating live projects
  • Solve real-world problems relating to building modern web applications
  • Gain a thorough understanding of how data moves through different React components

Book Description

Are you interested in how React takes command of the view layer for web and mobile apps and changes the data of large web applications without needing to reload the page? This workshop will help you learn how and show you how to develop and enhance web apps using the features of the React framework with interesting examples and exercises.

The workshop starts by demonstrating how to create your first React project. You’ll tap into React’s popular feature JSX to develop templates and use DOM events to make your project interactive. Next, you’ll focus on the lifecycle of the React component and understand how components are created, mounted, unmounted, and destroyed. Later, you’ll create and customize components to understand the data flow in React and how props and state communicate between components. You’ll also use Formik to create forms in React to explore the concept of controlled and uncontrolled components and even play with React Router to navigate between React components. The chapters that follow will help you build an interesting image-search app to fetch data from the outside world and populate the data to the React app. Finally, you’ll understand what ref API is and how it is used to manipulate DOM in an imperative way.

By the end of this React book, you’ll have the skills you need to set up and create web apps using React.

What you will learn

  • Use JSX to include logic in the view layer of applications
  • Get familiar with the important methods and events in the React lifecycle
  • Distinguish between class and functional component syntaxes
  • Create forms with Formik and handle errors
  • Understand the React Hooks API and the problems it can solve
  • Fetch outside data using the Axios library and populate the data to the app

Who this book is for

The React Workshop is for web developers and programmers who are looking to learn React and use it for creating and enhancing web applications. Although the workshop is for beginners, prior knowledge of JavaScript programming and HTML and CSS is necessary to easily understand the concepts that are covered.

Table of contents

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

Product information

  • Title: The React Workshop
  • Author(s): Brandon Richey, Ryan Yu, Endre Vegh, Theofanis Despoudis, Anton Punith, Florian Sloot
  • Release date: August 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781838645564