Watch Later

Course Introduction: Progressive Web Apps in React with create-react-app

Create a Progressive Web App with React and Register a Service Worker

View the Service Worker and the Cache, and Debug a PWA with Chrome’s Dev Tools

Use a Custom Service Worker in a create-react-app PWA without Ejecting

Pre-cache Static Resources with Workbox and View a React PWA Offline

Listen for install and activate PWA Events in a Service Worker

Cache Third Party Resources from a CDN in a React PWA

Cache JSON Data in a React PWA with Workbox, and Display it while Offline

Add an Offline Status Indicator to a PWA with React

Show an Error when a POST or DELETE Fails in an Offline PWA

Add a Custom App Icon to a PWA built with create-react-app

Change the Name and Short Name of a PWA built with create-react-app

Add a PWA to the Home Screen of an iOS or Android Device, and the Chrome App Home Screen

Add Navigation Elements in React to a PWA in Standalone Mode

Access the Camera in a PWA built with React

Add Push Notifications to a PWA with React in Chrome and on Android

Disable Text Selection and Touch Callouts in a PWA on iOS

Change the Status Bar Color on iOS and Android in a PWA

Customize the Splash Screen of a PWA built with create-react-app

Do a PWA Audit with Lighthouse using Chrome Dev Tools

Bootstrap a React Application with Yarn & Create React App

Render a React UI with JSX

Render in React Based on a Global State Object

Refactor JSX in React to Stateless Functional Components

Create a Redux-Style Reducer Function

Create a Redux Store

Render React UI Based on State Changes with Subscribe in Redux

Keep UI and State Synchronized Using Controlled Components in React with Redux

Make Dispatching Redux Actions More Reliable With Action Creators

Create Redux Dispatch Functions From Action Creators with bindActionCreators

Connect Redux to a React Application with react-redux

Handle Actions in Redux with mapDispatchToProps

Use mapDispatchToProps Shorthand Syntax in Redux

Connect Redux to Individual React Components For More Efficient Rendering

Setup a Mock API Server with the json-server npm module

Dispatch Asynchronous Actions with Redux Thunk Middleware

Save New Records on The Server with Redux Thunk and Fetch

Configure and Use Redux Dev Tools

Create a React Component to Display Status Messages

Use Multiple Reducers in Redux with combineReducers

Respond to a Single Redux Action in Multiple Reducers

Update Existing Records on The Server with Redux Thunk and Fetch

Delete Existing Records on The Server with Redux Thunk and Fetch

Add React Router to a Redux Application

Filter State Data in Redux with a Selector Function and React Router

Configure a React & Redux Application For Production Deployment and Deploy to Now

Course Overview: Advanced React Component Patterns

Build a Toggle Component

Write Compound Components

Make Compound React Components Flexible

Validate Compound Component Context Consumers

Prevent Unnecessary Rerenders of Compound Components using React Context

Use Render Props with React

Use Prop Collections with Render Props

Use Prop Getters with Render Props

Use Component State Initializers

Implement Component State Reducers

Improve the usability of Component State Reducers with state change types

Make Controlled React Components with Control Props

Support Control Props for all state

Support a state change handler for all control props

Improve the usability of Control Props with state change types

Implement the Provider Pattern with React Context

Implement a Higher Order Component

Course Overview: Optimistic UI Updates in React

Examine Real World Optimistic UI Updates

Optimistically Update UI for a Snappier User Experience

Optimistically Update Multiple Values in State Using React's setState

Refactor Inlined React setState Function to a setState Updater Factory

Revert State On Request Failure using React setState and Closures

Prevent Doubly Updating and Reverting State in React

Update state asynchronously in React using Promise and setState()

Add a loading indicator to UI for request in progress using setState()

Handle a rejected promise and display error to user using setState()

Optimistic UI update in React using setState()

Restore Target Items in React State for Improved Optimistic UI Updates

Introducing Build a Server-rendered ReactJS application with Next.js

Render Text within a Server-side ReactJS App with Next.js

Implement a custom Material-UI theme on the server using a Higher-order component

Render Material-UI Components with Next.js

Populate A Next.js Application with Data using Async/Await

Create custom routes within Next.js using ExpressJS

Dynamically Instantiate Routes on Id with Next.js & ExpressJS

Leverage Next.js' getInitialProps lifecycle hook to load individual posts

Style Next.js Application's using CSS-in-JS and styled-jsx

Deploy a Next.js Application to the web with the now-cli

Bootstrap a React Application through the CLI with Create React App

Render a React UI with JSX

Render a React UI Based on Initial State

Synchronize React UI and State with Controlled Components

Create a Stateless Functional Component for an Input Form

Refactor React Components to be Stateless Functional Components

Validate Component Input with Prop Types in React

Add Data to a List without Mutations

Update React Application State from Form Input

Prevent Empty Form Values with Conditional Submit Handlers

Use ES2016 Property Initializer Syntax in ES6 classes

Update Data in a List without Mutations

Pass Data To Event Handlers with Partial Function Application

Create a Pipe Function to Enable Function Composition

Remove Items from a List without Mutations

Build a Link Component to Navigate to Routes in React

Use React Context to Manage Application State Through Routes

Filter Data on Property Values in React

Keep React Application State in Sync with Browser History

Load Data for React from a Server with fetch

Save Data to the Server with fetch in React

Show Temporary Messages in a React Application

Update Data on the Server with fetch in React

Delete Data on the Server with fetch in React

Redux: The Single Immutable State Tree

Redux: Describing State Changes with Actions

Redux: Pure and Impure Functions

Redux: The Reducer Function

Redux: Writing a Counter Reducer with Tests

Redux: Store Methods: getState(), dispatch(), and subscribe()

Redux: Implementing Store from Scratch

Redux: React Counter Example

Redux: Avoiding Array Mutations with concat(), slice(), and ...spread

Redux: Avoiding Object Mutations with Object.assign() and ...spread

Redux: Writing a Todo List Reducer (Adding a Todo)

Redux: Writing a Todo List Reducer (Toggling a Todo)

Redux: Reducer Composition with Arrays

Redux: Reducer Composition with Objects

Redux: Reducer Composition with combineReducers()

Redux: Implementing combineReducers() from Scratch

Redux: React Todo List Example (Adding a Todo)

Redux: React Todo List Example (Toggling a Todo)

Redux: React Todo List Example (Filtering Todos)

Redux: Extracting Presentational Components (Todo, TodoList)

Redux: Extracting Presentational Components (AddTodo, Footer, FilterLink)

Redux: Extracting Container Components (FilterLink)

Redux: Extracting Container Components (VisibleTodoList, AddTodo)

Redux: Passing the Store Down Explicitly via Props

Redux: Passing the Store Down Implicitly via Context

Redux: Passing the Store Down with <Provider> from React Redux

Redux: Generating Containers with connect() from React Redux (VisibleTodoList)

Redux: Generating Containers with connect() from React Redux (AddTodo)

Redux: Generating Containers with connect() from React Redux (FooterLink)

Redux: Extracting Action Creators

Redux: Simplifying the Arrow Functions

Redux: Supplying the Initial State

Redux: Persisting the State to the Local Storage

Redux: Refactoring the Entry Point

Redux: Adding React Router to the Project

Redux: Navigating with React Router <Link>

Redux: Filtering Redux State with React Router Params

Redux: Using withRouter() to Inject the Params into Connected Components

Redux: Using mapDispatchToProps() Shorthand Notation

Redux: Colocating Selectors with Reducers

Redux: Normalizing the State Shape

Redux: Wrapping dispatch() to Log Actions

Redux: Adding a Fake Backend to the Project

Redux: Fetching Data on Route Change

Redux: Dispatching Actions with the Fetched Data

Redux: Wrapping dispatch() to Recognize Promises

Redux: The Middleware Chain

Redux: Applying Redux Middleware

Redux: Updating the State with the Fetched Data

Redux: Refactoring the Reducers

Redux: Displaying Loading Indicators

Redux: Dispatching Actions Asynchronously with Thunks

Redux: Avoiding Race Conditions with Thunks

Redux: Displaying Error Messages

Redux: Creating Data on the Server

Redux: Normalizing API Responses with normalizr

Redux: Updating Data on the Server

React Testing: Setting up dependencies

React Testing: Running tests

React Testing: Utility modules

React Testing: Intro to Shallow Rendering

React Testing: JSX error diffs

React Testing: Element types with Shallow Rendering

React Testing: className with Shallow Rendering

React Testing: Conditional className with Shallow Rendering

React Testing: Reusing test boilerplate

React Testing: Children with Shallow Rendering

React Testing: The Redux Store - Multiple Actions

React Testing: The Redux Store - Initial State

React Testing: Redux Reducers

Use create-react-app to Setup a Simple React App

Write a "Hello World" React Component

Display Output in React with a Component's render Method

Set Properties on React Components

Manage React Component State with setState

Use React Components as Children for Other Components

Access Nested Data with Reacts props.children

Add Custom propType Validation to React Components

Normalize Events with Reacts Synthetic Event System

Use React ref to Get a Reference to Specific Components

Understand the React Component Lifecycle Methods

Manage React Component State with Lifecycle Methods

Control React Component Updates When New Props Are Received

Use map to Create React Components from Arrays of Data

Compose React Component Behavior with Higher Order Components

Build a JSX Live Compiler as a React Component

Understand JSX at a Deeper Level

Understand React.Children Utilities

Use React.cloneElement to Extend Functionality of Children Components

Write More Reusable React Components with Composable APIs

Debug React Components with Developer Tools in Chrome

Introducing Design Systems with React and Typescript in Storybook

Set up Storybook for React from Scratch

Add your first React Story to Storybook

Add a Welcome Page with Sequential Stories to a React Storybook

Display the JSX of a React Storybook Story with the JSX Addon

Apply Style to a React StoryBook with the Info addon to Turn Stories into Documentation

Create Interactive Storybook Stories with the Knobs Decorator

Configure React Storybook for use with Typescript

Automate Documentation Generation in your Typescript React Codebase with Storybook

Intro to Advanced JavaScript Foundations

Working with Primitive Types

Autoboxing Primitive Types in JavaScript

Understanding Prototypal Inheritance within JavaScript

Understanding the difference between .prototype and .proto in JavaScript

Working with var, let, const, and block scopes

Implicit Binding of the "this" Keyword

Arrow Functions and Lexical Scoping "this"

Explicit binding of the "this" keyword

Private Variables with IIFEs

Use Implicit and Explicit Coercion in JavaScript

De-sugar an ES6 Class and the Extends Keyword

ES6 Class Constructors and the Super Keyword

Working with Static Properties on a Class

How to use 'strict mode'

WTF is a Closure?

Introduction to JavaScript Promises in Depth

Create a Promise Chain in JavaScript with Promise.prototype.then()

Catch Errors in a JavaScript Promise Chain with Promise.prototype.catch()

Execute Cleanup Logic in a JavaScript Promise Chain with Promise.prototype.finally()

Create a Rejected Promise in JavaScript with Promise.reject()

Create a Resolved Promise in JavaScript with Promise.resolve()

Create a New Promise in JavaScript with the Promise Constructor

Convert a Callback-Based JavaScript Function to a Promise-Based One

Wait for the Fastest JavaScript Promise to Settle with Promise.race()

Wait for Multiple JavaScript Promises to Be Fulfilled with Promise.all()

Wait for Multiple JavaScript Promises to Settle with Promise.allSettled()

Wait for the Fastest JavaScript Promise to Be Fulfilled with Promise.any()

Await a JavaScript Promise in an async Function with the await Operator

Course Introduction to Just Enough Functional Programming In JavaScript

Modify Functions with Higher Order Functions in JavaScript

Avoiding Mutations in JavaScript with Immutable Data Structures

Refactor a Function to Use Currying in JavaScript

Identify Side Effects by Comparing Pure and Impure JavaScript Functions

Create Reusable Functions with Partial Application in JavaScript

Eliminate Anonymous JavaScript Functions with Pointfree Programming

Build Up Complex Functionality by Composing Simple Functions in JavaScript

Improve JavaScript Function Usability with Proper Argument Order in Functional Programming

Using the Associative Property in JavaScript Functional Compositions

Debug Functional Compositions with a Logging Side Effect in JavaScript

Course Introduction: Data Structures and Algorithms in JavaScript

Queue Data Structure in JavaScript

Priority Queue JavaScript Data Structure

Stack Data Structure in JavaScript

Linked List Data Structure in JavaScript

JavaScript Graph Data Structure

Breadth First JavaScript Search Algorithm for Graphs

Write a Depth First Search Algorithm for Graphs in JavaScript

Tree Data Structure in JavaScript

Build a Binary Tree in JavaScript and Several Traversal Algorithms

Sort an Array with a JavaScript do while Loop using Bubble Sort

Sort an Array with a Nested for Loop using Insertion Sort in JavaScript

Divide and Recurse Over an Array with Merge Sort in JavaScript

Recursively Sort an Array in JavaScript with Quick Sort

Introduction to Prototypal Inheritance in JavaScript

Link to Other Objects through the JavaScript Prototype Chain

Prototype Delegation with JavaScript's new Keyword

Understanding the .constructor property on JavaScript Objects

Understand JavaScripts this keyword within Prototypes

Use JavaScript's for-in Loop on Objects with Prototypes

Compose Objects with Object.assign to Create a Direct Copy

Understanding Prototype Delegation within JavaScript's Class Keyword

Assign and Access Methods of a JavaScript Class with Static Properties

Determine an Object's Constructor with JavaScripts instanceof Operator

Create Factory Functions for Object Composition

Use Polymorphism with Prototype Linked Objects

Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)

this in the Global Context

this in Function Calls

this in Constructor Calls

this in Method Calls

Specify this using .call() or .apply()

Hard-Bind a Function's this Value with the .bind() Method

Capture this with an Arrow Function

this in Class Bodies

Introduction to Algorithms in JavaScript

Refactor a Loop in JavaScript to Use Recursion

Create a Divide and Conquer Function in JavaScript

Create a Selection Sort Function in JavaScript

Sort a Array with a QuickSort Function in JavaScript

Refactor a Linear Search into a Binary Search with JavaScript

Solve Complex Problems in JavaScript with Dynamic Programming

Implement a Breadth-first Search Function in JavaScript

Classify Mystery Items with the K-Nearest Neighbors Algorithm in JavaScript

Predict Outcomes with Regression Functions in JavaScript

Convert Sass (SCSS) Styled Button to CSS-in-JS with JavaScript Templates and Variables

Import JavaScript Variables for Styling with CSS-in-JS

Import and Render Style Partials from JavaScript Modules with CSS-in-JS

Use JavaScript Functions as Mixin Directives for CSS-in-JS Style Declarations

Destructure Named CSS-in-JS Arguments to use in JavaScript Mixin Functions

Define and Override Default CSS-in-JS Values for Arguments in a JavaScript Function Mixin

Apply Multiple CSS-in-JS Arguments in a JavaScript Mixin Function with the Rest Operator

Express CSS with JavaScript Objects for CSS-in-JS Notation

Use JavaScripts Spread Operator to Apply Style Objects Returned from CSS-in-JS Mixins

Prevent CSS Class Name Collisions with Scoped Class Names in CSS-in-JS

Style HTML with JavaScript Template Strings and Objects in CSS-in-JS

Write an Asynchronous Function with async/await

Call an Asynchronous Function in a Promise Chain

Convert Any Function into an Asynchronous Function

Handle Errors in Asynchronous Functions

Await Multiple Promises Sequentially or Concurrently

Await Multiple Promises Concurrently with Promise.all()

Use the await Operator with Any Thenable

Iterate Asynchronously with the for-await-of Loop

Add version control to npm packages using git init

Add manifest files to npm packages using npm init

Set up compilation of source code using babel with npm scripts

Run builds on file changes using watch with npm scripts

Set up testing of source code using jest with npm scripts

Add package functionality using npm scripts

Test npm packages locally in another project using npm link

Document npm packages using README files

Publish npm packages using npm publish

Update published npm packages using np

Create and Run a Native WebAssembly Function

Compile C Code into WebAssembly

Call a JavaScript Function from WebAssembly

Read WebAssembly Memory from JavaScript

Write to WebAssembly Memory from JavaScript

Allocate Dynamic Memory in WebAssembly with Malloc

Create and Import a WebAssembly Memory

Compiling C/C++ to WebAssembly using LLVM, Binaryen and WABT

Clone and Build LLVM with the Experimental WebAssembly Target

Install Binaryen and the WebAssembly Binary Toolkit (WABT)

Typed Arrays in High Performance JavaScript

Step-by-Step JS to WebAssembly Conversion

A First Comparison of the Performance between JS and WebAssembly

Optimize Collision Detection in JS with a Grid

Surpass JS Performance with Optimized Collision Detection in WASM using a Linked List Grid

Use JavaScript (ES6) generators to pause function execution

Send messages to and from JavaScript (ES6) generators

Error handling in JavaScript (ES6) generators

Iterate over JavaScript (ES6) generators

Delegate JavaScript (ES6) generator iteration control

Use JavaScript (ES6) generators with Promises to handle async flows

Create a basic package.json file

Run the basic npm scripts

Create a custom npm script

Run npm scripts in series

Run npm scripts in parallel

Use a shorthand syntax for running multiple npm scripts with npm-run-all

Run a set of similar npm scripts with a wildcard

Use pre and post npm script lifecycle hooks

Pass arguments to npm scripts

Pipe data from one npm script to another

Run npm scripts when files change with onchange

Use package.json variables in npm scripts

Use custom config settings in your npm scripts

Run npm scripts with git hooks

Change the level of console output when running npm scripts

Make npm scripts cross-environment friendly

List available npm scripts and support tab completion

Add comments to your npm scripts

Pull out npm scripts into another file with p-s

Create a bash script to replace a complex npm script

Create a node script to replace a complex npm script

Examine a Running App with the Chrome Debugger

Examine a Page's Source Resources with Chrome DevTools

Unbundle your JavaScript with Source Maps in Chrome DevTools

Use Snippets to Store Behaviors in Chrome DevTools

Set Breakpoints for the Chrome Debugger

Log Levels and Semantic Methods

Advanced Console Log Arguments

Grouping and Nesting Console Log Output

Proper use of console.assert in JavaScript

Using console.count to Count Events

Logging Timing Data to the Console

Logging Pretty-Printing Tabular Data to the Console

Transform an Array into a Single Value using Reduce

Reduce an Array into a Single Object

Use Reduce to Filter and Map over Large Datasets

Use the Optional Reduce Arguments

Avoid Common Mistakes when Working with Reduce

Learn to Flatten and Flatmap Arrays with Reduce

Compose Functions with Reduce

Safely inspect nested objects with Reduce

Arrow Function => in ES6

The let keyword in ES6

Default Values for Function Parameters in ES6

const Declarations in es6 (ES2015)

Shorthand Properties in ES6

Object Enhancements in ES6

Using the ES6 spread operator

Use Template Literals in ES6

Destructuring Assignment in ES6

ES6 Modules (ES2015) - Import and Export

Promises with ES6

ES6 (ES2015) - Generators

Maps and WeakMaps with ES6

ES6 Parameter Object Destructuring with Required Values

ES6 Rest Parameters

Use Concat to Add Values to an Array

Combine Values of an Array into a String with Join

Check if a Value is in an Array with indexOf

Create a Shallow Copy of an Array with Slice

Sort an Array Alphabetically or Numerically

Filter an Array with Truthy Values

Use Some as a Ternary Operator or Conditional

Add Elements onto an Array with Push

Modify Values in an Array with Map

Validate Data with the Every() Method

Produce a single value from an Array with reduce

The Array forEach method

The Array map method

The Array filter method

Chaining the Array map and filter methods

Create an Array concatAll method

Introducing the Observable

Using the map method with Observable

Simple drag and drop with Observables

Advanced Flattening