Modern React with Redux [2024 Update] by Udemy
Master React and Redux. Apply modern design patterns to build apps with React Router, TailwindCSS, Context, and Hooks!
Course Highlights
- 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
- Implement client-side navigation and routing using React Router for seamless multi-page user experiences
- Leverage the power of TypeScript with React for safer coding practices and reducing runtime errors
- Master form handling techniques, including robust validation patterns to improve user input experience
- Get a deep dive into state management with Redux and the Redux Toolkit to manage complex app states effortlessly
- Gain proficiency in handling API requests and managing data flow in your applications
- Enhance application performance with immutable state management using Immer
- Develop dynamic and responsive data tables to display, sort, and filter large datasets efficiently
- Streamline your development process by integrating TailwindCSS for rapid UI development
Skills you will learn!
Curriculum
11 Topics
How to Get Help
Join Our Community!
Course Resources
Let's Build an App!
Critical Questions
Core Concepts
A Few More Critical Questions
Node Setup
Creating a React Project
What is Create React App?
Using Vite as an Alternative to Create React App
19 Topics
Showing Basic Content
What is JSX?
Printing JavaScript Variables in JSX
Shorthand JS Expressions
Showing Javascript Values in JSX
Exercise Overview
Quick Practice with JSX
Exercise Solution
Typical Component Layouts
Customizing Elements with Props
Converting HTML to JSX
Applying Styling in JSX
More on JSX
Practice JSX Conversion
Exercise Solution
Extracting Components
Module Systems Overview
Imports and Exports
Cheatsheet for JSX
18 Topics
Project Overview
Creating Core Components
Introducing the Props System
Picturing the Movement of Data
Adding Props
Using Argument Destructuring
Practice with Props
Exercise Solution
The React Developer Tools
The Most Common Props Mistake
Communicating With Props
Images for the App
Including Images
Handling Image Accessibility
Review on how CSS Works
Adding CSS Libraries with NPM
A Big Pile of HTML!
Last Bit of Styling
22 Topics
App Overview
Initial App Setup
Introducing the Event System
Events in Detail
Variations on Event Handlers
Quiz on Events
Exercise with Events
Exercise Solution
Introducing the State System
More on State
Understanding the Re-Rendering Process
Got These Five Points?
Why Array Destructuring?
Back to the App
Picking a Random Element
List Building in React
Images for the App
Loading and Showing SVGs
Increasing Image Size
Adding Custom CSS
Finalizing Styling
App Wrapup and Review
27 Topics
App Overview
Project Setup
The Path Forward
Overview of HTTP Requests
Note About the Unsplash API
Understanding the API
Making an HTTP Request
[Optional] Using Async:Await
Data Fetching Cleanup
Thinking About Data Flow
Child to Parent Communication
Implementing Child to Parent Communication
Upward Communication
Handling Form Submission
Handling Input Elements
[Optional] OK But Why?
Creating a Controlled Input
Exercise Solution
Running the Search
Reminder on Async:Await
Communicating the List of Images Down
Building a List of Images
Handling List Updates
Notes on Keys
Displaying Images
A Touch of Styling
App Wrapup
36 Topics
App Overview
Initial Setup
State Location
Reminder on Event Handlers
Extra CSS
Receiving New Titles
Adding Styling
Updating State
Don't Mutate That State!
State Updates - Cheat Sheet
[Optional] Adding Elements to the Start or End
Adding Elements
[Optional] Exercise Solution
[Optional] Inserting Elements
Inserting Elements
[Optional] Exercise Solution
[Optional] Removing Elements
Removing Elements
[Optional] Exercise Solution
[Optional] Modifying Elements
[Super Optional] Why the Special Syntax?
Modifying Elements
[Optional] Exercise Solution
[Optional] Adding Changing or Removing Object Properties
Cheatsheet for State Changes
Adding a Book For Real!
Generating Random ID's
Displaying the List
Deleting Records
Toggling Form Display
Default Form Values
Updating the Title
Closing the Form on Submit
A Better Solution!
Collapsing Two Handlers into One
Adding Images
17 Topics
Adding Data Persistence
JSON Server Issues and Required Version
Server Setup
What Just Happened?
How the API Works
Introducing the REST Client
ECONNREFUSED 127.0.0.1:3001 Errors in VSCode
Using the REST Client
Creating a New Record
Fetching a List of Records
Introducing useEffect
useEffect in Action
More on useEffect
When Does it Run?
Updating a Record
Thinking About Updates
Deleting a Record
12 Topics
Introducing Context
Context in Action
Changing Context Values
More on Changing Context
Application vs Component State
Refactoring to Use Context
Refactoring the App
Quick Note
Reminder on Sharing with Context
Props and Context Together
Last Bit of Refactoring
A Small Taste of Reusable Hooks
10 Topics
Return to useEffect
Quick Note
Understanding the Issue
Applying the Fix
ESLint is Good but be Careful!
Stable References with useCallback
Fixing Bugs with useCallback
Fixing UseEffect Bugs
useEffect Cleanup Functions
The Purpose of Cleanup Functions
23 Topics
Important Info About the Following Sections and Lectures
Project Overview
Project Setup
Some Button Theory
Underlying Elements
The Children Prop
Props Design
Validating Props with PropTypes
PropTypes in Action
Introducing TailwindCSS
Updated Guidance for Installing and Configuring Tailwind
Installing Tailwind
How to use Tailwind
Review on Styling
The ClassNames Library
Building Some Variations
text-white Overriding Other Colors
Finalizing the Variations
Using Icons in React Projects
Issues with Event Handlers
Passing Props Through
Handling the Special ClassName Case
Exclusive Props with TypeScript instead of PropTypes
21 Topics
Project Organization
Refactoring with Organization
Component Overview
Component Setup
Reminder on Building Lists
Quick Note
State Design Process Overview
Finding the Expanded Item
Conditional Rendering
Inline Event Handlers
Variation on Event Handlers
Conditional Icon Rendering
Displaying Icons
Adding Styling
Toggling Panel Collapse
Quick Note
[Optional] Delayed State Updates
[Optional] Functional State Updates
Conditional Rendering
Event Handlers with Lists
Exercise Solution
25 Topics
Component Overview
Designing the Props
Component Creation
[Optional] More State Design
Finally... Implementation!
Reminder on Event Handlers in Maps
Dropdown as a Controlled Component
Controlled Component Implementation
Existence Check Helper
Community Convention with Props Names
Form Controls - Prop Naming Convention
Exercise Solution
Adding Styling
The Panel Component
Creating the Reusable Panel
A Challenging Extra Feature
Document-Wide Click Handlers
Event Capture and Bubbling
Putting it All Together
Why a Capture Phase Handler?
Reminder on the useEffect Function
Reminder on useEffect Cleanup
Issues with Element References
useRef in Action
Checking Click Location
18 Topics
Traditional Browser Navigation
Theory of Navigation in React
Extracting the DropdownPage
Answering Critical Questions
The PushState Function
Handling Link Clicks
Handling Back:Forward Buttons
Navigation Context
Listening to Forward and Back Clicks
Programmatic Navigation
A Link Component
A Route Component
Handling Control and Command Keys
Link Styling
Custom Navigation Hook
Adding a Sidebar Component
Highlighting the Active Link
Navigation Wrapup
10 Topics
Modal Component Overview
Toggling Visibility
At First Glance Easy!
We're Lucky it Works At All!
Fixing the Modal with Portals
Closing the Modal
Customizing the Modal
Additional Styling
One Small Bug
Modal Wrapup
13 Topics
Creating a Reusable table
Communicating Data to the Table
Reminder on Table HTML Structure
Building the Rows
Better Styling
Done! But It's Not Reusable
Here's the Idea
Dynamic Table Headers
Rendering Individual Cells
Fixed Cell Values
Nested Maps
Fixing the Color
Adding a Key Function
20 Topics
Adding Sorting to the Table
Reminder on Sorting in JavaScript
Sorting Strings
Sorting Objects
Object Sort Implementation
Reversing Sort Order
Optional Sorting
A Small Extra Feature
Customizing Header Cells
React Fragments
The Big Reveal
Adding SortableTable
Watching for Header Cell Clicks
Quick State Design
Adding Sort State
Yessssss It Worked!
Determining Icon Set
Styling Header Cells
Resetting Sort Order
Table Wrapup
7 Topics
Exploring Code Reuse
Revisiting Custom Hooks
Creating the Demo Component
Custom Hook Creation
Quick Note
Hook Creation Process in Depth
Making a Reusable Sorting Hook
13 Topics
App Overview
Adding the Form
More on the Form
useReducer in Action
Rules of Reducer Functions
Understanding Action Objects
Constant Action Types
Refactoring to a Switch
Adding New State Updates
A Few Design Considerations Around Reducers
A Few Questions on Reducers
Introducing Immer
Immer in Action
25 Topics
Into the World of Redux
Redux vs Redux Toolkit
App Overview
The Path Forward
Implementation Time!
Understanding the Store
The Store's Initial State
Understanding Slices
Understanding Action Creators
Connecting React to Redux
Updating State from a Component
Accessing State in a Component
Removing Content
Practice Updating State!
Practice Accessing State!
Even More State Updating!
Resetting State
Multiple State Updates
Understanding Action Flow
Watching For Other Actions
Getting an Action Creator's Type
Manual Action Creation
File and Folder Structure
Refactoring the Project Structure
Link to Completed Project
21 Topics
Project Overview
Adding Component Boilerplate
Thinking About Derived State
Thinking About Redux Design
Adding the Form Slice
Maintaining a Collection with a Slice
Creating the Store
Form Values to Update State
Receiving the Cost
Dispatching During the Form Submission
Awkward Double Keys
Listing the Records
Deleting Records
CSS File for Download
Adding Styling
Form Reset on Submission
Reminder on ExtraReducers
Adding a Searching Input
Derived State in useSelector
Total Car Cost
Highlighting Existing Cars
40 Topics
App Overview
Adding a Few Dependencies
Initial App Boilerplate
API Server Setup
Component Files
Adding a Few Components
Creating the Redux Store
Thinking About Data Structuring
Reminder on Request Conventions
Data Fetching Techniques
Optional Async Thunks Section
Adding State for Data Loading
Understanding Async Thunks
Steps for Adding a Thunk
More on Adding Thunks
Wrapping up the Thunk
Using Loading State
Adding a Pause for Testing
Adding a Skeleton Loader
Animations with TailwindCSS
Rendering the List of Users
Creating New Users
Unexpected Loading State
Strategies for Fine-Grained Loading State
Local Fine-Grained Loading State
More on Loading State
Handling Errors with User Creation
Creating a Reusable Thunk Hook
Creating a Fetch-Aware Button Component
Better Skeleton Display
A Thunk to Delete a User
Updating the Slice
Refactoring the Component
Deleting the User
Fixing a Delete Error
Album Feature Overview
Additional Components
Adding the ExpandablePanel
Wrapping Up the ExpandablePanel
Adding the Albums Listing
29 Topics
Skipping to this Section?
[Optional] Getting Caught Up
Introducing Redux Toolkit Query
Creating a RTK Query API
Creating an Endpoint
Using the Generated Hook
A Few Immediate Notes
Rendering the List
Changing Data with Mutations
Differences Between Queries and Mutations
Options for Refetching Data
Request De-Duplication
Some Internals of Redux Toolkit Query
Refetching with Tags
Fine-Grained Tag Validation
Styling Fixups
Adding a Pause for Testing
Refactoring the List
Remove Implementation
Easy Tag Invalidation
Getting Clever with Cache Tags
More Clever Tag Implementation
Photos Feature Overview
Lots of Photos Setup!
Adding the Endpoints
Creating the Photo
Showing the List of Photos
Adding Mouse-Over Deletes
Adding Automatic Data Refetching
34 Topics
Why Use Typescript?
Basic Types and Type Annotations
Function Type Annotations
Type Inference
Quiz - Type Annotations and Type Inference
Describing Objects with Interfaces
Using Interfaces to Annotate Props
Quiz - Props with Interfaces
Downsides to Type Inference
Function Types
Function Types in Props Interfaces
Quiz - Function Types
Extending an Interface
Type Unions
Type Narrowing with Type Guards
Tricky Cases with Type Guards
Quiz - Type Narrowing and Guards
Type Predicates
Optional Properties
Quiz - Optional Properties
The "Any" and "Unknown" Types
Type Aliases
Life Without Generics
Introduction to Function Generics
More on Function Generics
Multiple Generic Types
More Generic Examples!
Generics with Fetch
Generic Type Inference
More on Generic Type Inference
Issues with Generic Type Inference
Generic Type Constraints
More on Generic Type Constraints
TypeScript Wrapup
14 Topics
Project Overview
Project Setup
Component Creation
App Architecture
Defining an Interface
Typing of Props
Type Inference Around useState
Typing a Callback
Form Submissions with TypeScript
Searching with the OSM API
Why Use Interfaces?
Rendering the Locations
Showing and Panning a Map
App Review
30 Topics
App Overview
Project Setup
Introducing React Router
React Router Setup
Navigating with a Link
Programmatic Navigation
Form Submission Navigation Shortcut
A Touch of Styling
The Registry API
Fetching Data with React Router
More on Fetching with a Loader
Designing New Types
An Improved Project Structure
Mapping the Response
Extracting the Loader
Connecting the Page and Loader
Rendering the List of Results
Focusing on the Details Page
Details Interface
Fetching Details
Creating the Details Loader
Accessing Route Params
Typing the Page and Loader Together
Rendering Package Details
Error Around the Name Property
Fetching Packages in Parallel
Creating the Home Loader
Accessing the Data from a Loader
Assembling the Home Page
React Router Review
199 Topics
Note About This Legacy Course
What is JSX? / Converting HTML
Inline Styling / Converting Styling
Class vs. ClassName / Referencing JS Variables
Important Note About Viewing Errors
Three Tenants of Components / App Overview
IMPORTANT Info About Faker Installation
Getting Some Free Styling / Naive Component Approach
Specifying Images / Duplicating a Single Component
Extracting JSX / Component Nesting
React Props System / Passing and Receiving Props
Component Reuse / Implementing an Approval Card
Showing Custom Children / Component Reuse
Class Based Components
Application Overview / Scaffolding the App
Getting a User's Physical Location / Resetting Geolocation Preferences
Handling Async Operations / Refactoring to Class Components
Rules of State / Initializing State Through Constructors
Updating State Properties / App Lifecycle Walkthrough
Handling Errors Gracefully / Conditionally Rendering Content
Introducing Lifecycle Methods / Why Lifecycle Methods
Refactoring Data Loading / Alternate State initialization
Passing State as Props
Determining Season
Ternary Expressions in JSX / Showing Icons
Extracting Options to Config Objects / Adding Some Styling
Showing a Loading Spinner / Specifying Default Props
Avoiding Conditionals in Render / Breather and Review
App Overview / Component Design
Adding Some Project Structure / Showing Forms
Adding a Touch of Styling / Creating Event Handlers
Alternate Event Handlers / Uncontrolled vs Controlled Elements
More on Controlled Elements / Handling Form Submittal
Understanding "this" in JS / Solving Context Issues
Communicating Child to Parent / Invoking Callbacks in Children
Fetching Data / Axios vs. Fetch
Viewing Request Results / Handling Requests with Async Await
Setting State After Async Requests / Binding Callbacks
Creating Custom Clients
Rendering Lists / Review of Map Statements
Rendering Lists of Components / Purpose of Keys
Implementing Keys in Lists
Grid CSS / Issues with Grid CSS
Creating an ImageCard Component / Accessing the DOM with Refs
Accessing Image Height / Callbacks on Image Load
Dynamic Spans / App Review
App Overview / Component Design
Scaffolding the App / Reminder on Event Handlers
Handling Form Submittal / Accessing the YouTube API
Searching for Videos / Putting it All Together
Updating State with Fetched Data / Passing State as Props
Rendering a List of Videos / Rendering Video Thumbnails
Styling a List / Communicating from Children to Parent
Deeply Nested Callbacks / Conditional Rendering
Styling the VideoDetail / Displaying a Video Player
Fixing a few Warnings / Defaulting Video Selection
React Hooks / App Architecture
Communicating the Items Prop / Building and Styling the Accordion
Helper Functions / Introducing useState
Understanding useState / Setter Functions
Expanding the Accordion / Creating Additional Widgets
Search Widget Architecture / Scaffolding the Widget
Text Inputs with Hooks / When do We Search
useEffect Hook / Testing Execution
Async Code in useEffect / Executing the Request from useEffect
Default Search Terms / List Building
XSS Server Code
XSS Attacks in React / Linking to a Wikipedia Page
Only Search with a Term / Throttling API Requests
Reminder on setTimeout / useEffect's Cleanup Function
Implementing a Delayed Request / Searching on Initial Render
Edge Case When Clearing Out Input Form
Fixing a Warning / Dropdown Architecture
Scaffolding the Dropdown / A Lot of JSX
Selection State / Filtering the Option List
Hiding and Showing the Option List / Why is this Hard?
React v17 Update - capture: true
Reminder on Event Bubbling / Applying What We've Learned
Binding an Event Handler / Why Stay Open
Important Update for Event Listeners
Which Element was Clicked / Making use of useRef
Body Event Listener Cleanup / Translate Widget
Scaffolding the Translate Component / Adding the Language Input
Google Translate API Key
Understanding the Convert Component / Building the Convert Component
Using the Google Translate API / Displaying Translated Text
Debouncing Translation Updates / Navigation in React
Basic Component Routing / Building Reusable Route Component
Implementing Header for Navigation / Handling Navigation
Building a Link / Changing the URL
Detecting Navigation / Updating the Route
Handling Command Clicks
Project Overview / Refactoring the SearchBar
Refactoring the App / Removing a Callback
Overview of Custom Hooks / Process for Building Custom Hooks
Extracting Video Logic / Using the Custom Hook
Deployment Overview / Deployment with Vercel
Deployment with Netlify
Introduction to Redux / Redux by Analogy
A Bit More Analogy / Finishing the Analogy
Mapping the Analogy to Redux / Modeling with Redux
Creating Reducers / Rules of Reducers
Testing Our Example / Important Redux Notes
Integrating React with Redux / React Redux and React-Redux
Design of the Redux App / How React-Redux Works
Redux Project Structure / Named vs Default Exports
Building Reducers / Wiring up the Provider
Connect Function / Configuring Connect with mapStateToProps
Building a List with Redux Data / Calling Action Creators
Redux is Not Magic / Functional Components with Connect
Conditional Rendering
App Overview / Initial App Setup
Tricking Redux with Dummy Reducers / A Touch More Setup
How to Fetch Data in a Redux App / Wiring Up Action Creators
Making a Request from an Action Creator / Understanding Async Action Creators
Behind the Scenes of Redux Thunk / Shortened Syntax with Redux Thunk
Rules of Reducers / Return Values from Reducers
Argument Values in Reducers / Pure Reducers
Mutations in JavaScript / Equality of Arrays and Objects
A Misleading Rule / Safe State Updates in Reducers
Switch Statements in Reducers / Dispatching Correct Values
List Building / Displaying Users
Fetching Singular Records / Displaying the User Header
Finding Relevant Users / Extracting Logic with mapStateToProps
That's the Issue / Memoizing Functions
Memoizing Issues / One Time Memoization
Alternate Overfetching Solution / Action Creators in Action Creators
Finding Unique User IDs / Quick Refactor with Chain
App Wrapup
App Outline / Mockups in Detail
App Challenges / Initial Setup
IMPORTANT - React Router Installation Update
Introducing React Router / How React Router Works
How Paths Get Matched / How Now to Navigate with React Router
Navigating with React Router / Different Router Types
Component Scaffolding / Wiring Up Routes
Always Visible Components / Wiring Up the Header
Links Inside Routers
OAuth Based Authentication / OAuth for Servers vs Browser Apps
Creating OAuth Credentials / Wiring Up the Google API Library
Required plugin_name Parameter - Do Not Skip
Sending a User into the OAuth Flow / Rendering Auth Status
Updating Auth State / Displaying Sign In and Sign Out Buttons
On Demand Sign In and Sign Out / Redux Architecture
Redux Setup / Connecting Auth Action Creators
Building the Auth Reducers / Handling Auth Status Through Redux
Fixed Action Types / Recording the User's ID
Redux Dev Tools / Debug Sessions with Redux Dev Tools
Important Note about Redux Form Installation
Forms with Redux Form / Useful Redux Form Examples
Connecting Redux Form / Creating Forms with Redux Form
Automatically Handling Events / Customizing Form Fields
Handling Form Submission / Validation of Form Inputs
Displaying Validation Messages / Showing Errors on Touch
Highlighted Errored Fields
Creating Streams / RESTful Conventions
Setting Up an API Server / Creating Streams Through Action Creators
Creating a Stream with REST Conventions / Dispatching Actions
Bulk Action Creators
Object Based Reducers
Key Interpolation Syntax / Handling Fetching Creating and Updating
Deleting Properties with Omit / Merging Lists of Records
Fetching a List of Streams / Rendering All Streams
Associating Streams with Users / Conditionally Showing Edit and Delete
Linking to Stream Creation / When to Navigate Users
History Object Deprecation
History References / Creating a Browser History Object
Implementing Programmatic Navigation / Manually Changing API Records
URL Based Selection / Wildcard Navigation
More on Route Params / Pulling Streams Out of State
Selecting Records from State / Component Isolation with React Router
Fetching a Stream for Edit Stream / Real Code Reuse
Refactoring Stream Creation / Setting Initial Values
Avoiding Changes to Properties / Edit Form Submission
PUT vs PATCH Requests
Why Use Portals / More on Using Portals
Creating a Portal / Hiding a Modal
Making the Modal Reusable / React Fragments
onDismiss From the Parent / Reminder on Path Params
Fetching the Deletion Stream / Conditionally Showing Stream Details
Deleting a Stream
Viewing a Stream / Switches with React Router
RTMP NodeMediaServer is not a constructor error fix
Showing a Stream / RTMP Server Setup
OBS Installation
OBS Scene Setup
Video Player Setup / Implementing FLV.js
Creating a FLV Player / Optional Player Building
It works! / Cleaning up Resources with componentWillUnmount
Context System / An App with Context
App Generation / Selecting a Language
A Touch More Setup / Getting Data Into and Out of Context
Creating Context Objects / Consuming the Context Value
Context Provider / Gotchas Around Providers
Accessing Data With Consumers / Pulling From Multiple Contexts
Replacing Redux with Context / Creating a Store Component
Implementing a Language Store / Rendering the Language Store
Connecting the Selector to the Store / Connecting the Field and Button
Context vs Redux
1 Topic
Bonus!
Modern React with Redux [2024 Update]
Related React JS Courses
Thank You!
Your review has been submitted successfully.