React

Preparing to React

Installation Instructions

Node.js/NPM

1
2
3

sudo pacman -S nodejs
node -v
npm -v

Yarn

1
2

sudo pacman -S yarn
yarn -v

Create React App

npx is a package runner tool that comes with npm 5.2+.

1
2

npx create-react-app
create-react-app -v

Editors/IDEs

Visual Studio Code

1

sudo pacman -S code

Installing the Code Bundle

The complete example code is available at https://github.com/PacktWorkshops/The-React-Workshop

Getting Started with React

Introduction

Problems before React

Think about a web page with a little form to log into your account. At each step, we are introducing new and increasingly complex levels of interaction between different UI elements and the collective state of each component.

Suddenly, you will realize that a few lines of HTML just will not cut it anymore. Now you need more complex blocks of JavaScript code, with state management both for visual and data states for each component, and a way to tie them all together.

You need to represent all of it in a way that won’t require it to be rewritten every time someone needs to implement a similar form, and in a way that does not make a developer groan every time they have to touch the code. Let’s see where React fits into all of this and how it addresses this problem.

Introducing React

Instead of thinking about each element your browser sees and displays for the user as separate from your HTML code and JavaScript code (and thus separate from the states that each exhibits at any given point in time), React allows you to think of all of the code as part of the same data structure, all intertwined and working together:

  • The component
  • The state
  • The display (or render)

This reduces a lot of the complexity and overhead while trying to amalgamate component state and component display with a mixture of CSS and JavaScript along the way.

Getting Started with Create React App

Create React App introduces a scaffold to React applications.

Setting Up a Development Environment
1

npx create-react-app --help
Tweaking Create React App’s Options
1
2
3
4
5

--verbose
--info
--scripts-version <alternative-package>
--use-npm
--typescript

Using Create React App to Create Our Project

1

$ npx create-react-app hello-react

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

npm start
    Starts the development server.

npm run build
    Bundles the app into static files for production.

npm test
    Starts the test runner.

npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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