The Complete React Developer Course (w/ Hooks and Redux)

Section Intro: Setting up Your Environment

Installing Visual Studio Code

Installing Node.js & Yarn

Section Intro: Hello React

Setting up a Web Server

Hello React

Setting up Babel

Exploring JSX

JSX Expressions

Conditional Rendering in JSX

ES6 Aside: const and let

ES6 Aside: Arrow Functions

ES6 Aside: Arrow Functions Part II

Events and Attributes

Manual Data Binding

Forms and Inputs

Arrays in JSX

Picking an Option

Build It: Visibility Toggle

Section Intro: React Components

Thinking in React

ES6 Classes: Part I

ES6 Classes: Part II

Creating a React Component

Nesting Components

Component Props

Events & Methods

Method Binding

What Is Component State?

Adding State to Counter App: Part I

Adding State to Counter App: Part II

Alternative setState Syntax

Build It: Adding State to VisibilityToggle

Indecision State: Part I

Indecision State: Part II

Summary: Props vs. State

Section Intro: Stateless Functional Components

The Stateless Functional Component

Default Prop Values

React Dev Tools

Removing Individual Options

Lifecycle Methods

Saving and Loading Options Data

Saving and Loading the Count

Section Intro: Webpack

What Is Webpack?

Avoid Global Modules

Installing & Configuring Webpack

ES6 import/export

Default Exports

Importing npm Modules

Setting up Babel with Webpack

One Component per File

Source Maps with Webpack

Webpack Dev Server

ES6 class properties

Section Intro: Using a Third-Party Component

Passing Children to Component

Setting up React-Modal

Bonus: Refactoring Other Stateless Functional Components

Section Intro: Styling React

Setting up Webpack with SCSS

Architecture and Header Styles

Reset That $#!*

Theming with Variables

Big Button & Options List

Styling the Options List

Styling Option Item

Styling React-Modal

Mobile Considerations

Bonus: Favicon

Section Intro: React Router

Server vs. Client Routing

Setting Up Budget App

React-Router 101

Setting up a 404

Linking Between Routes

Organizing Our Routes

Query Strings and URL Parameters

Build It: Router for Portfolio Site

Section Intro: Redux

Why Do We Need Something Like Redux?

Setting up Redux

Dispatching Actions

Subscribing and Dynamic Actions

ES6 Object Destructuring

ES6 Array Destructuring

Refactoring and Organizing

Reducers

Working with Multiple Reducers

ES6 Spread Operator in Reducers

Spreading Objects

Wrapping up Our Reducers

Filtering Redux Data

Sorting Redux Data

Section Intro: Connecting React and Redux

Organizing Redux

The Higher Order Component

Connecting Store and Component with React-Redux

Rendering Individual Expenses

Controlled Inputs for Filters

Dropdown for Picking SortBy

Creating Expense Add/Edit Form

Setting up a Date Picker

Wiring up Add Expense

Wiring up Edit Expense

Redux Dev Tools

Filtering by Dates

Section Intro: Testing React Components

Setting up Jest

Testing Expenses Action Generators

Testing Filters Action Generators

Testing Expenses Selector

Testing Filters Reducer

Testing Expenses Reducer

Snapshot Testing

Enzyme

Snapshot Testing with Dynamic Components

Mocking Libraries with Jest

Testing User Interaction

Test Spies

Testing AddExpensePage

Testing EditExpensePage

Testing ExpenseListFilters

Testing ExpenseListFilters: Part II

Section Intro: Deploying Your Apps

Installing Git

What is Git?

Integrating Git into Our Project

Setting up SSH and Github

Production Webpack

Creating Separate CSS Files

A Production Web Server with Express

Deploying with Heroku

Regular vs Development Dependencies

New Feature Workflow

Build It: Adding Total Selector

Build It: Adding Summary Component

Section Intro: Firebase 101

Getting Firebase

Writing to the Database

ES6 Promises

Promises with Firebase

Removing Data from Firebase

Updating Data

Fetching Data From Firebase

Array Data in Firebase: Part I

Array Data in Firebase: Part II

Section Intro: Firebase with Redux

Asynchronous Redux Actions

Testing Async Redux Actions: Part I

Testing Async Redux Actions: Part II

Creating a Separate Test Database

Heroku Environment Variables

Fetching Expenses: Part I

Fetching Expenses: Part II

Remove Expense

Update Expense

Section Intro: Firebase Authentication

Login Page and Google Authentication

Logging Out

Redirecting Login or Logout

The Auth Reducer

Private Only Routes

Public Only Routes

Private Firebase Data

Data Validation and Deployment

Section Intro: Styling Budget App

Styling Login Page

Styling Buttons

Styling Summary Area

Styling List Filters

Styling Inputs

Styling Expense Form

Styling Expenses List: Part I

Styling Expenses List: Part II

Adding Loader

Babel Polyfill

Final Deployment

Section Into: What Now?

Creating the Final Boilerplate

Budget App Enhancements

Indecision App Enhancements

New App Idea: Blog

Until Next Time

Section Intro

Using Create React App

The useState Hook

UseState vs. setState

Complex State with useState

The useEffect Hook

UseEffect Dependencies

Cleaning up Effects

The useReducer Hook

The Context API & useContext Hook: Part I

The Context API & useContext Hook: Part II

Fragments

Creating Custom Hooks