Modern React With Redux [2023 Update]

Master React and Redux Toolkit. Includes RTK Query, tons of custom hooks, and more! Course 100% Updated November 2022

What you'll learn

Create dynamic web apps using the latest in web technology

Acquire the programming skills needed to obtain a software engineering job

Practice your skills with many large projects, exercises, and quizzes

Master the fundamentals concepts behind React and Redux

Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax

Be the engineer who explains how Redux works to everyone else, because you know the fundamentals so well

Realize the power of building reusable components

Requirements

A Mac or Windows Computer

Description

Congratulations!  You've found the most popular, most complete, and most up-to-date resource online for learning React and Redux!Thousands of other engineers have learned React and Redux, and you can too.  This course uses a time-tested, battle-proven method to make sure you understand exactly how React and Redux work, and will get you a new job working as a software engineer or help you build that app you've always been dreaming about.The difference between this course and all the others: you will understand the design patterns used by top companies to build massively popular web apps.React is the most popular Javascript library of the last five years, and the job market is still hotter than ever.  Companies large and small can't hire engineers who understand React and Redux fast enough, and salaries for engineers are at an all time high.  It's a great time to learn React!–––––––––––What will you build?This course features hundreds of videos with hundreds of custom diagrams to help you understand how React and Redux work.  No prior experience with either is necessary. Through tireless, patient explanations and many interesting practical examples, you'll learn the fundamentals of building dynamic and live web apps using React.Each topic included in this course is added incrementally, to make sure that you have a solid foundation of knowledge.  You'll find plenty of discussion added in to help you understand exactly when and where to use each feature of React and Redux.My guarantee to you: there is no other course online that teaches more features of React and Redux Toolkit.  This is the most comprehensive resource there is.Below is a partial list of the topics you'll find in this course:Master the fundamental features of React, including JSX, state, and propsFrom square one, understand how to build reusable componentsDive into the source code of Redux to understand how it works behind the scenesTest your knowledge and hone your skills with numerous coding exercisesUse popular styling libraries to build beautiful appsSee different methods of building UI's through composition of componentsRemember all these techniques with clearly-written cheatsheetsBesides just React and Redux, you'll pick up countless other tidbits of knowledge, including design techniques, popular design patterns, and repeatable steps to build new components.This is the course I wanted to take when I first learned React: complete, up-to-date, and clear.

Overview

Section 1: Let's Dive In!

Lecture 1 How to Get Help

Lecture 2 Join Our Community!

Lecture 3 Course Resources

Lecture 4 Let's Build an App!

Lecture 5 Critical Questions

Lecture 6 A Few More Critical Questions

Lecture 7 Node Setup

Lecture 8 Creating a React Project

Lecture 9 What is Create React App?

Section 2: Creating Content with JSX

Lecture 10 Showing Basic Content

Lecture 11 What is JSX?

Lecture 12 Printing JavaScript Variables in JSX

Lecture 13 Shorthand JS Expressions

Lecture 14 Exercise Overview

Lecture 15 Exercise Solution

Lecture 16 Typical Component Layouts

Lecture 17 Customizing Elements with Props

Lecture 18 Converting HTML to JSX

Lecture 19 Applying Styling in JSX

Lecture 20 Exercise Solution

Lecture 21 Extracting Components

Lecture 22 Module Systems Overview

Lecture 23 Cheatsheet for JSX

Section 3: Building with Reusable Components

Lecture 24 Project Overview

Lecture 25 Creating Core Components

Lecture 26 Introducing the Props System

Lecture 27 Picturing the Movement of Data

Lecture 28 Adding Props

Lecture 29 Using Argument Destructuring

Lecture 30 Exercise Solution

Lecture 31 The React Developer Tools

Lecture 32 The Most Common Props Mistake

Lecture 33 Images for the App

Lecture 34 Including Images

Lecture 35 Handling Image Accessibility

Lecture 36 Review on how CSS Works

Lecture 37 Adding CSS Libraries with NPM

Lecture 38 A Big Pile of HTML!

Lecture 39 Last Bit of Styling

Section 4: State: How to Change Your App

Lecture 40 App Overview

Lecture 41 Initial App Setup

Lecture 42 Introducing the Event System

Lecture 43 Events in Detail

Lecture 44 Variations on Event Handlers

Lecture 45 Exercise Solution

Lecture 46 Introducing the State System

Lecture 47 More on State

Lecture 48 Understanding the Re-Rendering Process

Lecture 49 Exercise Overview

Lecture 50 Exercise Solution

Lecture 51 Why Array Destructuring?

Lecture 52 Back to the App

Lecture 53 Picking a Random Element

Lecture 54 List Building in React

Lecture 55 Images for the App

Lecture 56 Loading and Showing SVGs

Lecture 57 Increasing Image Size

Lecture 58 Adding Custom CSS

Lecture 59 Finalizing Styling

Lecture 60 App Wrapup and Review

Section 5: Using an API with React

Lecture 61 App Overview

Lecture 62 Project Setup

Lecture 63 The Path Forward

Lecture 64 Overview of HTTP Requests

Lecture 65 Understanding the API

Lecture 66 Making an HTTP Request

Lecture 67 [Optional] Using Async:Await

Lecture 68 Data Fetching Cleanup

Lecture 69 Thinking About Data Flow

Lecture 70 Child to Parent Communication

Lecture 71 Implementing Child to Parent Communication

Lecture 72 Handling Form Submission

Lecture 73 Handling Input Elements

Lecture 74 [Optional] OK But Why?

Lecture 75 Exercise Solution

Lecture 76 Running the Search

Lecture 77 Reminder on Async:Await

Lecture 78 Communicating the List of Images Down

Lecture 79 Building a List of Images

Lecture 80 Handling List Updates

Lecture 81 Notes on Keys

Lecture 82 Displaying Images

Lecture 83 A Touch of Styling

Lecture 84 App Wrapup

Section 6: How to Handle Forms

Lecture 85 App Overview

Lecture 86 Initial Setup

Lecture 87 State Location

Lecture 88 Reminder on Event Handlers

Lecture 89 Extra CSS

Lecture 90 Receiving New Titles

Lecture 91 Adding Styling

Lecture 92 Updating State

Lecture 93 Don't Mutate That State!

Lecture 94 State Updates - Cheat Sheet

Lecture 95 [Optional] Adding Elements to the Start or End

Lecture 96 [Optional] Exercise Solution

Lecture 97 [Optional] Inserting Elements

Lecture 98 [Optional] Exercise Solution

Lecture 99 [Optional] Removing Elements

Lecture 100 [Optional] Exercise Solution

Lecture 101 [Optional] Modifying Elements

Lecture 102 [Super Optional] Why the Special Syntax?

Lecture 103 [Optional] Exercise Solution

Lecture 104 [Optional] Adding, Changing, or Removing Object Properties

Lecture 105 Cheatsheet for State Changes

Lecture 106 Adding a Book, For Real!

Lecture 107 Generating Random ID's

Lecture 108 Displaying the List

Lecture 109 Deleting Records

Lecture 110 Toggling Form Display

Lecture 111 Default Form Values

Lecture 112 Updating the Title

Lecture 113 Closing the Form on Submit

Lecture 114 A Better Solution!

Lecture 115 Collapsing Two Handlers into One

Lecture 116 Adding Images

Section 7: Data Persistence with API Requests

Lecture 117 Adding Data Persistence

Lecture 118 Server Setup

Lecture 119 What Just Happened?

Lecture 120 How the API Works

Lecture 121 Introducing the REST Client

Lecture 122 Using the REST Client

Lecture 123 Creating a New Record

Lecture 124 Fetching a List of Records

Lecture 125 Introducing useEffect

Lecture 126 useEffect in Action

Lecture 127 More on useEffect

Lecture 128 Updating a Record

Lecture 129 Thinking About Updates

Lecture 130 Deleting a Record

Section 8: Communication Using the Context System

Lecture 131 Introducing Context

Lecture 132 Context in Action

Lecture 133 Changing Context Values

Lecture 134 More on Changing Context

Lecture 135 Application vs Component State

Lecture 136 Refactoring to Use Context

Lecture 137 Refactoring the App

Lecture 138 Quick Note

Lecture 139 Reminder on Sharing with Context

Lecture 140 Props and Context Together

Lecture 141 Last Bit of Refactoring

Lecture 142 A Small Taste of Reusable Hooks

Section 9: Deeper Dive into Hooks!

Lecture 143 Return to useEffect

Lecture 144 Quick Note

Lecture 145 Understanding the Issue

Lecture 146 Applying the Fix

Lecture 147 ESLint is Good, but be Careful!

Lecture 148 Stable References with useCallback

Lecture 149 Fixing Bugs with useCallback

Lecture 150 useEffect Cleanup Functions

Lecture 151 The Purpose of Cleanup Functions

Section 10: Custom Navigation and Routing Systems

Lecture 152 Project Overview

Lecture 153 Project Setup

Lecture 154 Some Button Theory

Lecture 155 Underlying Elements

Lecture 156 The Children Prop

Lecture 157 Props Design

Lecture 158 Validating Props with PropTypes

Lecture 159 PropTypes in Action

Lecture 160 Introducing TailwindCSS

Lecture 161 Installing Tailwind

Lecture 162 How to use Tailwind

Lecture 163 Review on Styling

Lecture 164 The ClassNames Library

Lecture 165 Building Some Variations

Lecture 166 Finalizing the Variations

Lecture 167 Using Icons in React Projects

Lecture 168 Issues with Event Handlers

Lecture 169 Passing Props Through

Lecture 170 Handling the Special ClassName Case

Section 11: Mastering the State Design Process

Lecture 171 Project Organization

Lecture 172 Refactoring with Organization

Lecture 173 Component Overview

Lecture 174 Component Setup

Lecture 175 Reminder on Building Lists

Lecture 176 Quick Note

Lecture 177 State Design Process Overview

Lecture 178 Finding the Expanded Item

Lecture 179 Conditional Rendering

Lecture 180 Inline Event Handlers

Lecture 181 Variation on Event Handlers

Lecture 182 Conditional Icon Rendering

Lecture 183 Displaying Icons

Lecture 184 Adding Styling

Lecture 185 Toggling Panel Collapse

Lecture 186 Quick Note

Lecture 187 [Optional] Delayed State Updates

Lecture 188 [Optional] Functional State Updates

Lecture 189 Exercise Solution

Section 12: Practicing Props and State Design

Lecture 190 Component Overview

Lecture 191 Designing the Props

Lecture 192 Component Creation

Lecture 193 [Optional] More State Design

Lecture 194 Finally… Implementation!

Lecture 195 Reminder on Event Handlers in Maps

Lecture 196 Dropdown as a Controlled Component

Lecture 197 Controlled Component Implementation

Lecture 198 Existence Check Helper

Lecture 199 Community Convention with Props Names

Lecture 200 Exercise Solution

Lecture 201 Adding Styling

Lecture 202 The Panel Component

Lecture 203 Creating the Reusable Panel

Lecture 204 A Challenging Extra Feature

Lecture 205 Document-Wide Click Handlers

Lecture 206 Event Capture and Bubbling

Lecture 207 Putting it All Together

Lecture 208 Why a Capture Phase Handler?

Lecture 209 Reminder on the useEffect Function

Lecture 210 Reminder on useEffect Cleanup

Lecture 211 Issues with Element References

Lecture 212 useRef in Action

Lecture 213 Checking Click Location

Section 13: Making Navigation Reusable

Lecture 214 Traditional Browser Navigation

Lecture 215 Theory of Navigation in React

Lecture 216 Extracting the DropdownPage

Lecture 217 Answering Critical Questions

Lecture 218 The PushState Function

Lecture 219 Handling Link Clicks

Lecture 220 Handling Back:Forward Buttons

Lecture 221 Navigation Context

Lecture 222 Listening to Forward and Back Clicks

Lecture 223 Programmatic Navigation

Lecture 224 A Link Component

Lecture 225 A Route Component

Lecture 226 Handling Control and Command Keys

Lecture 227 Link Styling

Lecture 228 Custom Navigation Hook

Lecture 229 Adding a Sidebar Component

Lecture 230 Highlighting the Active Link

Lecture 231 Navigation Wrapup

Section 14: Creating Portals with ReactDOM

Lecture 232 Modal Component Overview

Lecture 233 Toggling Visibility

Lecture 234 At First Glance, Easy!

Lecture 235 We're Lucky it Works At All!

Lecture 236 Fixing the Modal with Portals

Lecture 237 Closing the Modal

Lecture 238 Customizing the Modal

Lecture 239 Additional Styling

Lecture 240 One Small Bug

Lecture 241 Modal Wrapup

Section 15: Make a Feature-Full Data Table!

Lecture 242 Creating a Reusable table

Lecture 243 Communicating Data to the Table

Lecture 244 Reminder on Table HTML Structure

Lecture 245 Building the Rows

Lecture 246 Better Styling

Lecture 247 Done! But It's Not Reusable

Lecture 248 Here's the Idea

Lecture 249 Dynamic Table Headers

Lecture 250 Rendering Individual Cells

Lecture 251 Fixed Cell Values

Lecture 252 Nested Maps

Lecture 253 Fixing the Color

Lecture 254 Adding a Key Function

Section 16: Getting Clever with Data Sorting

Lecture 255 Adding Sorting to the Table

Lecture 256 Reminder on Sorting in JavaScript

Lecture 257 Sorting Strings

Lecture 258 Sorting Objects

Lecture 259 Object Sort Implementation

Lecture 260 Reversing Sort Order

Lecture 261 Optional Sorting

Lecture 262 A Small Extra Feature

Lecture 263 Customizing Header Cells

Lecture 264 React Fragments

Lecture 265 The Big Reveal

Lecture 266 Adding SortableTable

Lecture 267 Watching for Header Cell Clicks

Lecture 268 Quick State Design

Lecture 269 Adding Sort State

Lecture 270 Yessssss, It Worked!

Lecture 271 Determining Icon Set

Lecture 272 Styling Header Cells

Lecture 273 Resetting Sort Order

Lecture 274 Table Wrapup

Section 17: Custom Hooks In Depth

Lecture 275 Exploring Code Reuse

Lecture 276 Revisiting Custom Hooks

Lecture 277 Creating the Demo Component

Lecture 278 Custom Hook Creation

Lecture 279 Quick Note

Lecture 280 Hook Creation Process in Depth

Lecture 281 Making a Reusable Sorting Hook

Section 18: Into the World of Reducers

Lecture 282 App Overview

Lecture 283 Adding the Form

Lecture 284 More on the Form

Lecture 285 useReducer in Action

Lecture 286 Rules of Reducer Functions

Lecture 287 Understanding Action Objects

Lecture 288 Constant Action Types

Lecture 289 Refactoring to a Switch

Lecture 290 Adding New State Updates

Lecture 291 A Few Design Considerations Around Reducers

Lecture 292 Introducing Immer

Lecture 293 Immer in Action

Section 19: Dive Into Redux Toolkit

Lecture 294 Into the World of Redux

Lecture 295 Redux vs Redux Toolkit

Lecture 296 App Overview

Lecture 297 The Path Forward

Lecture 298 Implementation Time!

Lecture 299 Understanding the Store

Lecture 300 The Store's Initial State

Lecture 301 Understanding Slices

Lecture 302 Understanding Action Creators

Lecture 303 Connecting React to Redux

Lecture 304 Updating State from a Component

Lecture 305 Accessing State in a Component

Lecture 306 Removing Content

Lecture 307 Practice Updating State!

Lecture 308 Practice Accessing State!

Lecture 309 Even More State Updating!

Lecture 310 Resetting State

Lecture 311 Multiple State Updates

Lecture 312 Understanding Action Flow

Lecture 313 Watching for Other Actions

Lecture 314 Getting an Action Creator's Type

Lecture 315 Manual Action Creation

Lecture 316 File and Folder Structure

Lecture 317 Refactoring the Project Structure

Lecture 318 Link to Completed Project

Section 20: Managing Multiple Slices with Redux Toolkit

Lecture 319 Project Overview

Lecture 320 Adding Component Boilerplate

Lecture 321 Thinking About Derived State

Lecture 322 Thinking About Redux Design

Lecture 323 Adding the Form Slice

Lecture 324 Maintaining a Collection with a Slice

Lecture 325 Creating the Store

Lecture 326 Form Values to Update State

Lecture 327 Receiving the Cost

Lecture 328 Dispatching During the Form Submission

Lecture 329 Awkward Double Keys

Lecture 330 Listing the Records

Lecture 331 Deleting Records

Lecture 332 CSS File for Download

Lecture 333 Adding Styling

Lecture 334 Form Reset on Submission

Lecture 335 Reminder on ExtraReducers

Lecture 336 Adding a Searching Input

Lecture 337 Derived State in useSelector

Lecture 338 Total Car Cost

Lecture 339 Highlighting Existing Cars

Section 21: Interfacing with API's Using Async Thunks

Lecture 340 App Overview

Lecture 341 Adding a Few Dependencies

Lecture 342 Initial App Boilerplate

Lecture 343 API Server Setup

Lecture 344 Component Files

Lecture 345 Adding a Few Components

Lecture 346 Creating the Redux Store

Lecture 347 Thinking About Data Structuring

Lecture 348 Reminder on Request Conventions

Lecture 349 Data Fetching Techniques

Lecture 350 Optional Async Thunks Section

Lecture 351 Adding State for Data Loading

Lecture 352 Understanding Async Thunks

Lecture 353 Steps for Adding a Thunk

Lecture 354 More on Adding Thunks

Lecture 355 Wrapping up the Thunk

Lecture 356 Using Loading State

Lecture 357 Adding a Pause for Testing

Lecture 358 Adding a Skeleton Loader

Lecture 359 Animations with TailwindCSS

Lecture 360 Rendering the List of Users

Lecture 361 Creating New Users

Lecture 362 Unexpected Loading State

Lecture 363 Strategies for Fine-Grained Loading State

Lecture 364 Local Fine-Grained Loading State

Lecture 365 More on Loading State

Lecture 366 Handling Errors with User Creation

Lecture 367 Creating a Reusable Thunk Hook

Lecture 368 Creating a Fetch-Aware Button Component

Lecture 369 Better Skeleton Display

Lecture 370 A Thunk to Delete a User

Lecture 371 Updating the Slice

Lecture 372 Refactoring the Component

Lecture 373 Deleting the User

Lecture 374 Fixing a Delete Error

Lecture 375 Album Feature Overview

Lecture 376 Additional Components

Lecture 377 Adding the ExpandablePanel

Lecture 378 Wrapping Up the ExpandablePanel

Lecture 379 Adding the Albums Listing

Section 22: Modern Async with Redux Toolkit Query

Lecture 380 Skipping to this Section?

Lecture 381 [Optional] Getting Caught Up

Lecture 382 Introducing Redux Toolkit Query

Lecture 383 Creating a RTK Query API

Lecture 384 Creating an Endpoint

Lecture 385 Using the Generated Hook

Lecture 386 A Few Immediate Notes

Lecture 387 Rendering the List

Lecture 388 Changing Data with Mutations

Lecture 389 Differences Between Queries and Mutations

Lecture 390 Options for Refetching Data

Lecture 391 Request De-Duplication

Lecture 392 Some Internals of Redux Toolkit Query

Lecture 393 Refetching with Tags

Lecture 394 Fine-Grained Tag Validation

Lecture 395 Styling Fixups

Lecture 396 Adding a Pause for Testing

Lecture 397 Implementing Delete Endpoints

Lecture 398 Refactoring the List

Lecture 399 Remove Implementation

Lecture 400 Easy Tag Invalidation

Lecture 401 Getting Clever with Cache Tags

Lecture 402 More Clever Tag Implementation

Lecture 403 Photos Feature Overview

Lecture 404 Lots of Photos Setup!

Lecture 405 Adding the Endpoints

Lecture 406 Creating the Photo

Lecture 407 Showing the List of Photos

Lecture 408 Adding Mouse-Over Deletes

Lecture 409 Adding Automatic Data Refetching

Section 23: IMPORTANT - Do Not Skip - Old Version of Course

Lecture 410 Note on the Following Sections

Section 24: Let's Dive In!

Lecture 411 Note on the Following Lectures - Old Version of Course

Lecture 412 Let's Build an App!

Lecture 413 Critical Questions

Lecture 414 A Few More Critical Questions

Lecture 415 Node Setup

Lecture 416 Creating a React Project

Lecture 417 What is Create React App?

Section 25: Building Content with JSX

Lecture 418 Showing Basic Content

Lecture 419 So… What is JSX?

Lecture 420 Printing JavaScript Variables in JSX

Lecture 421 Shorthand JS Expressions

Lecture 422 Typical Component Layouts

Lecture 423 Customizing Elements with Props

Lecture 424 Converting HTML to JSX

Lecture 425 Applying Styling in JSX

Section 26: Communicating with Props

Lecture 426 Important Note About Viewing Errors

Lecture 427 Three Tenets of Components

Lecture 428 Application Overview

Lecture 429 Semantic UI CDN Link

Lecture 430 Getting Some Free Styling

Lecture 431 Naive Component Approach

Lecture 432 IMPORTANT Info About Faker Installation

Lecture 433 Specifying Images in JSX

Lecture 434 Duplicating a Single Component

Lecture 435 Extracting JSX to New Components

Lecture 436 Component Nesting

Lecture 437 React's Props System

Lecture 438 Passing and Receiving Props

Lecture 439 Passing Multiple Props

Lecture 440 Passing Props - Solutions

Lecture 441 Component Reuse

Lecture 442 Implementing an Approval Card

Lecture 443 Showing Custom Children

Lecture 444 Component Reuse

Lecture 445 Optional Styling

Section 27: Structuring Apps with Class-Based Components

Lecture 446 Class-Based Components

Lecture 447 Application Overview

Lecture 448 Scaffolding the App

Lecture 449 Getting a Users Physical Location

Lecture 450 Resetting Geolocation Preferences

Lecture 451 Handling Async Operations with Functional Components

Lecture 452 Refactoring from Functional to Class Components

Section 28: State in React Components

Lecture 453 The Rules of State

Lecture 454 Initializing State Through Constructors

Lecture 455 Updating State Properties

Lecture 456 App Lifecycle Walkthrough

Lecture 457 Handling Errors Gracefully

Lecture 458 Conditionally Rendering Content

Section 29: Understanding Lifecycle Methods

Lecture 459 Introducing Lifecycle Methods

Lecture 460 Why Lifecycle Methods?

Lecture 461 Refactoring Data Loading to Lifecycle Methods

Lecture 462 Alternate State Initialization

Lecture 463 Passing State as Props

Lecture 464 Determining Season

Lecture 465 Ternary Expressions in JSX

Lecture 466 Icons Not Loading and CORS errors

Lecture 467 Showing Icons

Lecture 468 Extracting Options to Config Objects

Lecture 469 Adding Some Styling

Lecture 470 Showing a Loading Spinner

Lecture 471 Specifying Default Props

Lecture 472 Avoiding Conditionals in Render

Lecture 473 Optional Styling

Lecture 474 Breather and Review

Section 30: Handling User Input with Forms and Events

Lecture 475 App Overview

Lecture 476 Component Design

Lecture 477 Adding Some Project Structure

Lecture 478 Showing Forms to the User

Lecture 479 Adding a Touch of Style

Lecture 480 Creating Event Handlers

Lecture 481 Alternate Event Handler Syntax

Lecture 482 Uncontrolled vs Controlled Elements

Lecture 483 More on Controlled Elements

Lecture 484 Handling Form Submittal

Lecture 485 Understanding 'this' In Javascript

Lecture 486 Solving Context Issues

Lecture 487 Communicating Child to Parent

Lecture 488 Invoking Callbacks in Children

Section 31: Making API Requests with React

Lecture 489 Fetching Data

Lecture 490 Axios vs Fetch

Lecture 491 Viewing Request Results

Lecture 492 Handling Requests with Async Await

Lecture 493 Setting State After Async Requests

Lecture 494 Binding Callbacks

Lecture 495 Creating Custom Clients

Section 32: Building Lists of Records

Lecture 496 Rendering Lists

Lecture 497 Review of Map Statements

Lecture 498 Rendering Lists of Components

Lecture 499 The Purpose of Keys in Lists

Lecture 500 Implementing Keys in Lists

Section 33: Using Ref's for DOM Access

Lecture 501 Grid CSS

Lecture 502 Issues with Grid CSS

Lecture 503 Creating an Image Card Component

Lecture 504 Accessing the DOM with Refs

Lecture 505 Accessing Image Height

Lecture 506 Callbacks on Image Load

Lecture 507 Dynamic Spans

Lecture 508 App Review

Section 34: Let's Test Your React Mastery!

Lecture 509 App Overview

Lecture 510 Component Design

Lecture 511 Scaffolding the App

Lecture 512 Reminder on Event Handlers

Lecture 513 Handling Form Submittal

Lecture 514 Accessing the Youtube API

Lecture 515 Searching for Videos

Lecture 516 Adding a Video Type

Lecture 517 Putting it All Together

Lecture 518 Updating State with Fetched Data

Lecture 519 Passing State as Props

Lecture 520 Rendering a List of Videos

Lecture 521 Rendering Video Thumbnails

Lecture 522 Styling a List

Lecture 523 Communicating from Child to Parent

Lecture 524 Deeply Nested Callbacks

Lecture 525 Conditional Rendering

Lecture 526 Styling the VideoDetail

Lecture 527 Displaying a Video Player

Lecture 528 Fixing a Few Warnings

Lecture 529 Defaulting Video Selection

Section 35: Understanding Hooks in React

Lecture 530 React Hooks

Lecture 531 Important Note

Lecture 532 App Architecture

Lecture 533 Communicating the Items Prop

Lecture 534 Building and Styling the Accordion

Lecture 535 Helper Functions in Function Components

Lecture 536 Introducing useState

Lecture 537 Understanding useState

Lecture 538 Setter Functions

Lecture 539 Expanding the Accordion

Lecture 540 Creating Additional Widgets

Lecture 541 The Search Widget Architecture

Lecture 542 Scaffolding the Widget

Lecture 543 Text Inputs with Hooks

Lecture 544 When do we Search?

Lecture 545 The useEffect Hook

Lecture 546 Testing Execution

Lecture 547 Async Code in useEffect

Lecture 548 Executing the Request from useEffect

Lecture 549 Default Search Terms

Lecture 550 List Building!

Lecture 551 XSS Attacks in React

Lecture 552 XSS Server Code

Lecture 553 Linking to a Wikipedia Page

Lecture 554 Only Search with a Term

Lecture 555 Throttling API Requests

Lecture 556 Reminder on setTimeout

Lecture 557 useEffect's Cleanup Function

Lecture 558 Implementing a Delayed Request

Lecture 559 Searching on Initial Render

Lecture 560 Edge Case When Clearing Out Input Form

Lecture 561 Optional Video - Fixing a Warning

Lecture 562 Dropdown Architecture

Lecture 563 Scaffolding the Dropdown

Lecture 564 A Lot of JSX

Lecture 565 Selection State

Lecture 566 Filtering the Option List

Lecture 567 Hiding and Showing the Option List

Lecture 568 Err… Why is this Hard?

Lecture 569 Reminder on Event Bubbling

Lecture 570 Applying What We've Learned

Lecture 571 React v17 Update - capture: true

Lecture 572 Binding an Event Handler

Lecture 573 Why Stay Open!?

Lecture 574 Which Element Was Clicked?

Lecture 575 Making use of useRef

Lecture 576 Important Update for Event Listeners

Lecture 577 Body Event Listener Cleanup

Lecture 578 The Translate Widget

Lecture 579 Scaffolding the Translate Component

Lecture 580 Adding the Language Input

Lecture 581 Understanding the Convert Component

Lecture 582 Google Translate API Key

Lecture 583 Building the Convert Component

Lecture 584 Using the Google Translate API

Lecture 585 Displaying Translated Text

Lecture 586 Debouncing Translation Updates

Lecture 587 Reviewing UseState and UseEffect

Section 36: Navigation From Scratch

Lecture 588 Navigation in React

Lecture 589 Basic Component Routing

Lecture 590 Building a Reusable Route Component

Lecture 591 Implementing a Header for Navigation

Lecture 592 Handling Navigation

Lecture 593 Building a Link

Lecture 594 Changing the URL

Lecture 595 Detecting Navigation

Lecture 596 Updating the Route

Lecture 597 Handling Command Clicks

Section 37: Hooks in Practice

Lecture 598 Project Overview

Lecture 599 Refactoring the SearchBar

Lecture 600 Refactoring the App

Lecture 601 Removing a Callback

Lecture 602 Overview on Custom Hooks

Lecture 603 Process for Building Custom Hooks

Lecture 604 Extracting Video Logic

Lecture 605 Using the Custom Hook

Section 38: Deploying a React App

Lecture 606 Deployment Overview

Lecture 607 Deployment with Vercel

Lecture 608 Deployment with Netlify

Section 39: On We Go…To Redux!

Lecture 609 Introduction to Redux

Lecture 610 Redux by Analogy

Lecture 611 A Bit More Analogy

Lecture 612 Finishing the Analogy

Lecture 613 Mapping the Analogy to Redux

Lecture 614 Modeling with Redux

Lecture 615 Creating Reducers

Lecture 616 Rules of Reducers

Lecture 617 Testing Our Example

Lecture 618 Important Redux Notes

Lecture 619 Finished Insurance Policy Code

Section 40: Integrating React with Redux

Lecture 620 React Cooperating with Redux

Lecture 621 React, Redux, and…React-Redux!?

Lecture 622 Design of the Redux App

Lecture 623 How React-Redux Works

Lecture 624 Redux Project Structure

Lecture 625 Named vs Default Exports

Lecture 626 Building Reducers

Lecture 627 createStore Strikethrough Warning in Editor

Lecture 628 Wiring Up the Provider

Lecture 629 The Connect Function

Lecture 630 Configuring Connect with MapStateToProps

Lecture 631 Building a List with Redux Data

Lecture 632 Calling Action Creators from Components

Lecture 633 Redux is Not Magic!

Lecture 634 Functional Components with Connect

Lecture 635 Conditional Rendering

Section 41: Async Actions with Redux Thunk

Lecture 636 App Overview and Goals

Lecture 637 Initial App Setup

Lecture 638 Tricking Redux with Dummy Reducers

Lecture 639 A Touch More Setup

Lecture 640 How to Fetch Data in a Redux App

Lecture 641 Wiring Up an Action Creator

Lecture 642 Making a Request From an Action Creator

Lecture 643 Understanding Async Action Creators

Lecture 644 More on Async Action Creators

Lecture 645 Middlewares in Redux

Lecture 646 Behind the Scenes of Redux Thunk

Lecture 647 Shortened Syntax with Redux Thunk

Section 42: Redux Store Design

Lecture 648 Rules of Reducers

Lecture 649 Return Values from Reducers

Lecture 650 Argument Values

Lecture 651 Pure Reducers

Lecture 652 Mutations in Javascript

Lecture 653 Equality of Arrays and Objects

Lecture 654 A Misleading Rule

Lecture 655 Safe State Updates in Reducers

Lecture 656 Switch Statements in Reducers

Lecture 657 Reducer Case Solution

Lecture 658 Dispatching Correct Values

Lecture 659 List Building!

Lecture 660 Displaying Users

Lecture 661 Fetching Singular Records

Lecture 662 Displaying the User Header

Lecture 663 Finding Relevant Users

Lecture 664 Extracting Logic to MapStateToProps

Lecture 665 That's the Issue!

Lecture 666 Memoizing Functions

Lecture 667 Memoization Issues

Lecture 668 One Time Memoization

Lecture 669 Alternate Overfetching Solution

Lecture 670 Action Creators in Action Creators!

Lecture 671 Finding Unique User Ids

Lecture 672 Quick Refactor with Chain

Lecture 673 Optional Styling

Lecture 674 App Wrapup

Section 43: Navigation with React Router

Lecture 675 App Outline

Lecture 676 Mockups in Detail

Lecture 677 App Challenges

Lecture 678 Initial Setup

Lecture 679 IMPORTANT - React Router Installation Update

Lecture 680 Introducing React Router

Lecture 681 How React Router Works

Lecture 682 How Paths Get Matched

Lecture 683 How to *Not* Navigate with React Router

Lecture 684 Navigating with React Router

Lecture 685 [Optional] - Different Router Types

Lecture 686 Component Scaffolding

Lecture 687 Wiring Up Routes

Lecture 688 Always Visible Components

Lecture 689 Connecting the Header

Lecture 690 Links Inside Routers

Section 44: Handling Authentication with React

Lecture 691 OAuth-Based Authentication

Lecture 692 OAuth for Servers vs Browser Apps

Lecture 693 Creating OAuth Credentials

Lecture 694 Wiring Up the Google API Library

Lecture 695 Required plugin_name Parameter - Do Not Skip

Lecture 696 Sending a User Into the OAuth Flow

Lecture 697 Rendering Authentication Status

Lecture 698 Updating Auth State

Lecture 699 Displaying Sign In and Sign Out Buttons

Lecture 700 On-Demand Sign In and Sign Out

Lecture 701 Redux Architecture Design

Lecture 702 Redux Setup

Lecture 703 Connecting Auth with Action Creators

Lecture 704 Building the Auth Reducer

Lecture 705 Handling Auth Status Through Redux

Lecture 706 Fixed Action Types

Lecture 707 Recording the User's ID

Section 45: Redux Dev Tools

Lecture 708 Using Redux Dev Tools to Inspect the Store

Lecture 709 Debug Sessions with Redux Dev Tools

Section 46: Handling Forms with Redux Form

Lecture 710 Important Note about Redux Form Installation

Lecture 711 Forms with Redux Form

Lecture 712 Useful Redux Form Examples

Lecture 713 Connecting Redux Form

Lecture 714 Creating Forms

Lecture 715 Automatically Handling Events

Lecture 716 Customizing Form Fields

Lecture 717 Handling Form Submission

Lecture 718 Validation of Form Inputs

Lecture 719 Displaying Validation Messages

Lecture 720 Showing Errors on Touch

Lecture 721 Highlighting Errored Fields

Lecture 722 Missing Lectures From Old Version of Course

Section 47: Bonus!

Lecture 723 Bonus!

Programmers looking to learn React,Developers who want to grow out of just using jQuery,Engineers who have researched React but have had trouble mastering some concepts