Modern React with Redux [2024 Update]
Loại khoá học: Web Development
Master React and Redux Toolkit. Includes RTK Query, tons of custom hooks, and more! Course 100% Updated November 2022
Mô tả
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 props
From square one, understand how to build reusable components
Dive into the source code of Redux to understand how it works behind the scenes
Test your knowledge and hone your skills with numerous coding exercises
Use popular styling libraries to build beautiful apps
See different methods of building UI's through composition of components
Remember all these techniques with clearly-written cheatsheets
Besides 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.
Bạn sẽ học được gì
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
Yêu cầu
- A Mac or Windows Computer
Nội dung khoá học
27 sections
How to Get Help
01:01
Join Our Community!
00:07
Course Resources
00:52
Let's Build an App!
07:56
Critical Questions
05:49
Core Concepts
4 questions
A Few More Critical Questions
07:44
Node Setup
01:58
Creating a React Project
02:38
What is Create React App?
05:50
Showing Basic Content
06:41
What is JSX?
05:48
Printing JavaScript Variables in JSX
04:29
Shorthand JS Expressions
01:51
Showing Javascript Values in JSX
3 questions
Exercise Overview
00:42
Quick Practice with JSX
1 question
Exercise Solution
00:35
Typical Component Layouts
01:58
Customizing Elements with Props
07:36
Converting HTML to JSX
05:07
Applying Styling in JSX
06:13
More on JSX
3 questions
Practice JSX Conversion
1 question
Exercise Solution
02:05
Extracting Components
04:26
Module Systems Overview
16:05
Imports and Exports
2 questions
Cheatsheet for JSX
00:05
Project Overview
05:37
Creating Core Components
05:00
Introducing the Props System
04:51
Picturing the Movement of Data
06:06
Adding Props
03:04
Using Argument Destructuring
04:57
Practice with Props
1 question
Exercise Solution
01:30
The React Developer Tools
02:37
The Most Common Props Mistake
04:42
Communicating With Props
3 questions
Images for the App
00:06
Including Images
08:09
Handling Image Accessibility
06:39
Review on how CSS Works
06:10
Adding CSS Libraries with NPM
05:57
A Big Pile of HTML!
09:38
Last Bit of Styling
05:45
App Overview
02:52
Initial App Setup
05:09
Introducing the Event System
03:14
Events in Detail
08:11
Variations on Event Handlers
06:42
Quiz on Events
2 questions
Exercise with Events
1 question
Exercise Solution
01:15
Introducing the State System
03:43
More on State
08:43
Understanding the Re-Rendering Process
08:10
Got These Five Points?
4 questions
Why Array Destructuring?
08:41
Back to the App
03:33
Picking a Random Element
07:11
List Building in React
09:46
Images for the App
00:06
Loading and Showing SVGs
05:50
Increasing Image Size
05:51
Adding Custom CSS
06:21
Finalizing Styling
05:58
App Wrapup and Review
08:52
App Overview
02:24
Project Setup
05:53
The Path Forward
04:06
Overview of HTTP Requests
11:15
Understanding the API
06:07
Making an HTTP Request
10:36
[Optional] Using Async:Await
02:38
Data Fetching Cleanup
03:20
Thinking About Data Flow
08:42
Child to Parent Communication
06:07
Implementing Child to Parent Communication
07:29
Upward Communication
1 question
Handling Form Submission
11:32
Handling Input Elements
09:21
[Optional] OK But Why?
14:21
Creating a Controlled Input
1 question
Exercise Solution
02:35
Running the Search
04:06
Reminder on Async:Await
03:00
Communicating the List of Images Down
12:31
Building a List of Images
05:03
Handling List Updates
09:10
Notes on Keys
09:22
Displaying Images
01:48
A Touch of Styling
04:26
App Wrapup
03:41
App Overview
03:20
Initial Setup
05:56
State Location
05:14
Reminder on Event Handlers
04:51
Extra CSS
00:06
Receiving New Titles
08:54
Adding Styling
02:12
Updating State
10:24
Don't Mutate That State!
04:26
State Updates - Cheat Sheet
00:17
[Optional] Adding Elements to the Start or End
01:24
Adding Elements
1 question
[Optional] Exercise Solution
01:12
[Optional] Inserting Elements
04:43
Inserting Elements
1 question
[Optional] Exercise Solution
02:00
[Optional] Removing Elements
07:04
Removing Elements
1 question
[Optional] Exercise Solution
02:09
[Optional] Modifying Elements
06:05
[Super Optional] Why the Special Syntax?
07:10
Modifying Elements
1 question
[Optional] Exercise Solution
02:26
[Optional] Adding, Changing, or Removing Object Properties
03:58
Cheatsheet for State Changes
00:05
Adding a Book, For Real!
01:49
Generating Random ID's
02:05
Displaying the List
05:35
Deleting Records
06:36
Toggling Form Display
06:31
Default Form Values
07:06
Updating the Title
08:44
Closing the Form on Submit
05:06
A Better Solution!
04:30
Collapsing Two Handlers into One
03:18
Adding Images
07:58
Adding Data Persistence
07:48
JSON Server Issues and Required Version
00:11
Server Setup
03:44
What Just Happened?
04:36
How the API Works
05:20
Introducing the REST Client
05:05
ECONNREFUSED 127.0.0.1:3001 Errors in VSCode
00:23
Using the REST Client
06:58
Creating a New Record
06:56
Fetching a List of Records
04:25
Introducing useEffect
02:51
useEffect in Action
06:24
More on useEffect
09:52
When Does it Run?
3 questions
Updating a Record
03:18
Thinking About Updates
05:27
Deleting a Record
01:18
Introducing Context
09:12
Context in Action
06:15
Changing Context Values
06:51
More on Changing Context
08:46
Application vs Component State
11:50
Refactoring to Use Context
04:38
Refactoring the App
05:32
Quick Note
00:11
Reminder on Sharing with Context
06:12
Props and Context Together
03:08
Last Bit of Refactoring
05:55
A Small Taste of Reusable Hooks
09:53
Return to useEffect
08:06
Quick Note
00:16
Understanding the Issue
07:17
Applying the Fix
06:23
ESLint is Good, but be Careful!
10:57
Stable References with useCallback
13:08
Fixing Bugs with useCallback
02:08
Fixing UseEffect Bugs
5 questions
useEffect Cleanup Functions
05:33
The Purpose of Cleanup Functions
05:37
Important Info About the Following Sections and Lectures
00:22
Project Overview
04:25
Project Setup
01:54
Some Button Theory
08:19
Underlying Elements
03:48
The Children Prop
04:21
Props Design
06:21
Validating Props with PropTypes
08:29
PropTypes in Action
06:52
Introducing TailwindCSS
06:37
Updated Guidance for Installing and Configuring Tailwind
00:24
Installing Tailwind
04:50
How to use Tailwind
06:35
Review on Styling
10:22
The ClassNames Library
11:28
Building Some Variations
05:55
text-white Overriding Other Colors
00:28
Finalizing the Variations
06:07
Using Icons in React Projects
09:55
Issues with Event Handlers
07:16
Passing Props Through
06:07
Handling the Special ClassName Case
05:16
Exclusive Props with TypeScript instead of PropTypes
01:02
Project Organization
10:43
Refactoring with Organization
05:56
Component Overview
04:48
Component Setup
03:42
Reminder on Building Lists
04:04
Quick Note
00:08
State Design Process Overview
29:30
Finding the Expanded Item
04:09
Conditional Rendering
06:25
Inline Event Handlers
10:00
Variation on Event Handlers
08:21
Conditional Icon Rendering
02:14
Displaying Icons
01:45
Adding Styling
03:48
Toggling Panel Collapse
02:06
Quick Note
00:13
[Optional] Delayed State Updates
08:34
[Optional] Functional State Updates
11:42
Conditional Rendering
2 questions
Event Handlers with Lists
1 question
Exercise Solution
01:26
Component Overview
01:08
Designing the Props
05:49
Component Creation
04:14
[Optional] More State Design
20:11
Finally... Implementation!
06:45
Reminder on Event Handlers in Maps
04:47
Dropdown as a Controlled Component
04:44
Controlled Component Implementation
05:36
Existence Check Helper
04:30
Community Convention with Props Names
06:34
Form Controls - Prop Naming Convention
1 question
Exercise Solution
01:37
Adding Styling
05:33
The Panel Component
07:06
Creating the Reusable Panel
05:59
A Challenging Extra Feature
05:19
Document-Wide Click Handlers
02:46
Event Capture and Bubbling
06:14
Putting it All Together
02:20
Why a Capture Phase Handler?
14:34
Reminder on the useEffect Function
03:52
Reminder on useEffect Cleanup
05:46
Issues with Element References
02:56
useRef in Action
05:04
Checking Click Location
03:14
Traditional Browser Navigation
09:33
Theory of Navigation in React
07:56
Extracting the DropdownPage
02:43
Answering Critical Questions
05:33
The PushState Function
02:56
Handling Link Clicks
02:28
Handling Back:Forward Buttons
06:23
Navigation Context
04:05
Listening to Forward and Back Clicks
06:19
Programmatic Navigation
05:36
A Link Component
05:25
A Route Component
05:49
Handling Control and Command Keys
02:52
Link Styling
01:18
Custom Navigation Hook
02:55
Adding a Sidebar Component
08:22
Highlighting the Active Link
07:25
Navigation Wrapup
01:54
Modal Component Overview
04:20
Toggling Visibility
05:49
At First Glance, Easy!
03:05
We're Lucky it Works At All!
09:26
Fixing the Modal with Portals
07:09
Closing the Modal
02:04
Customizing the Modal
05:03
Additional Styling
01:44
One Small Bug
01:53
Modal Wrapup
05:47
Creating a Reusable table
03:34
Communicating Data to the Table
03:03
Reminder on Table HTML Structure
04:25
Building the Rows
02:52
Better Styling
03:38
Done! But It's Not Reusable
05:10
Here's the Idea
02:29
Dynamic Table Headers
04:46
Rendering Individual Cells
05:18
Fixed Cell Values
05:00
Nested Maps
04:35
Fixing the Color
00:57
Adding a Key Function
04:12
Adding Sorting to the Table
06:38
Reminder on Sorting in JavaScript
06:24
Sorting Strings
02:45
Sorting Objects
03:56
Object Sort Implementation
07:38
Reversing Sort Order
04:26
Optional Sorting
04:10
A Small Extra Feature
03:14
Customizing Header Cells
03:49
React Fragments
05:57
The Big Reveal
10:39
Adding SortableTable
11:32
Watching for Header Cell Clicks
01:43
Quick State Design
06:57
Adding Sort State
05:24
Yessssss, It Worked!
11:00
Determining Icon Set
05:08
Styling Header Cells
03:37
Resetting Sort Order
02:55
Table Wrapup
03:53
Exploring Code Reuse
03:39
Revisiting Custom Hooks
03:10
Creating the Demo Component
04:46
Custom Hook Creation
03:16
Quick Note
00:16
Hook Creation Process in Depth
09:42
Making a Reusable Sorting Hook
11:09
App Overview
03:03
Adding the Form
04:26
More on the Form
06:58
useReducer in Action
09:47
Rules of Reducer Functions
09:22
Understanding Action Objects
10:45
Constant Action Types
06:35
Refactoring to a Switch
05:34
Adding New State Updates
06:20
A Few Design Considerations Around Reducers
09:51
A Few Questions on Reducers
5 questions
Introducing Immer
04:59
Immer in Action
03:21
Into the World of Redux
05:23
Redux vs Redux Toolkit
09:17
App Overview
03:03
The Path Forward
03:31
Implementation Time!
04:41
Understanding the Store
09:21
The Store's Initial State
03:32
Understanding Slices
07:50
Understanding Action Creators
06:33
Connecting React to Redux
04:24
Updating State from a Component
08:25
Accessing State in a Component
06:34
Removing Content
07:12
Practice Updating State!
06:55
Practice Accessing State!
02:02
Even More State Updating!
04:29
Resetting State
06:25
Multiple State Updates
04:47
Understanding Action Flow
06:45
Watching For Other Actions
05:06
Getting an Action Creator's Type
03:06
Manual Action Creation
09:31
File and Folder Structure
08:41
Refactoring the Project Structure
11:07
Link to Completed Project
00:03
Project Overview
04:10
Adding Component Boilerplate
06:08
Thinking About Derived State
07:54
Thinking About Redux Design
05:17
Adding the Form Slice
05:34
Maintaining a Collection with a Slice
09:40
Creating the Store
04:33
Form Values to Update State
08:44
Receiving the Cost
05:17
Dispatching During the Form Submission
04:31
Awkward Double Keys
07:18
Listing the Records
03:25
Deleting Records
02:15
CSS File for Download
00:06
Adding Styling
01:27
Form Reset on Submission
03:21
Reminder on ExtraReducers
02:23
Adding a Searching Input
05:36
Derived State in useSelector
05:07
Total Car Cost
06:22
Highlighting Existing Cars
06:30
App Overview
08:36
Adding a Few Dependencies
02:45
Initial App Boilerplate
02:09
API Server Setup
02:51
Component Files
00:06
Adding a Few Components
03:13
Creating the Redux Store
05:34
Thinking About Data Structuring
09:19
Reminder on Request Conventions
01:55
Data Fetching Techniques
02:37
Optional Async Thunks Section
00:35
Adding State for Data Loading
06:52
Understanding Async Thunks
04:14
Steps for Adding a Thunk
07:46
More on Adding Thunks
13:17
Wrapping up the Thunk
05:23
Using Loading State
04:30
Adding a Pause for Testing
03:27
Adding a Skeleton Loader
05:39
Animations with TailwindCSS
12:02
Rendering the List of Users
03:16
Creating New Users
12:07
Unexpected Loading State
06:03
Strategies for Fine-Grained Loading State
07:35
Local Fine-Grained Loading State
10:07
More on Loading State
02:55
Handling Errors with User Creation
05:03
Creating a Reusable Thunk Hook
11:34
Creating a Fetch-Aware Button Component
05:41
Better Skeleton Display
03:41
A Thunk to Delete a User
04:56
Updating the Slice
04:27
Refactoring the Component
03:31
Deleting the User
04:46
Fixing a Delete Error
05:13
Album Feature Overview
04:48
Additional Components
07:21
Adding the ExpandablePanel
04:51
Wrapping Up the ExpandablePanel
04:00
Adding the Albums Listing
02:43
Skipping to this Section?
00:30
[Optional] Getting Caught Up
02:47
Introducing Redux Toolkit Query
08:00
Creating a RTK Query API
06:20
Creating an Endpoint
14:01
Using the Generated Hook
11:01
A Few Immediate Notes
05:56
Rendering the List
04:25
Changing Data with Mutations
08:42
Differences Between Queries and Mutations
03:13
Options for Refetching Data
06:18
Request De-Duplication
03:50
Some Internals of Redux Toolkit Query
06:14
Refetching with Tags
07:33
Fine-Grained Tag Validation
09:13
Styling Fixups
03:20
Adding a Pause for Testing
03:21
Refactoring the List
04:46
Remove Implementation
07:42
Easy Tag Invalidation
05:58
Getting Clever with Cache Tags
06:24
More Clever Tag Implementation
04:47
Photos Feature Overview
04:11
Lots of Photos Setup!
06:01
Adding the Endpoints
12:38
Creating the Photo
04:37
Showing the List of Photos
05:14
Adding Mouse-Over Deletes
06:19
Adding Automatic Data Refetching
08:34
Why Use Typescript?
05:44
Basic Types and Type Annotations
04:49
Function Type Annotations
01:57
Type Inference
03:16
Quiz - Type Annotations and Type Inference
2 questions
Describing Objects with Interfaces
04:33
Using Interfaces to Annotate Props
03:51
Quiz - Props with Interfaces
2 questions
Downsides to Type Inference
04:39
Function Types
07:06
Function Types in Props Interfaces
04:21
Quiz - Function Types
3 questions
Extending an Interface
04:31
Type Unions
04:02
Type Narrowing with Type Guards
03:29
Tricky Cases with Type Guards
03:59
Quiz - Type Narrowing and Guards
3 questions
Type Predicates
05:39
Optional Properties
05:34
Quiz - Optional Properties
1 question
The "Any" and "Unknown" Types
08:10
Type Aliases
02:50
Life Without Generics
04:22
Introduction to Function Generics
05:55
More on Function Generics
05:49
Multiple Generic Types
04:45
More Generic Examples!
04:03
Generics with Fetch
06:40
Generic Type Inference
03:52
More on Generic Type Inference
03:02
Issues with Generic Type Inference
04:34
Generic Type Constraints
04:45
More on Generic Type Constraints
06:16
TypeScript Wrapup
01:14
Project Overview
02:32
Project Setup
03:04
Component Creation
02:37
App Architecture
04:24
Defining an Interface
02:27
Typing of Props
02:55
Type Inference Around useState
03:21
Typing a Callback
04:54
Form Submissions with TypeScript
04:29
Searching with the OSM API
05:10
Why Use Interfaces?
10:04
Rendering the Locations
04:29
Showing and Panning a Map
11:01
App Review
03:29
App Overview
03:16
Project Setup
01:52
Introducing React Router
05:44
React Router Setup
10:10
Navigating with a Link
03:39
Programmatic Navigation
09:06
Form Submission Navigation Shortcut
04:39
A Touch of Styling
03:51
The Registry API
02:19
Fetching Data with React Router
05:45
More on Fetching with a Loader
07:27
Designing New Types
06:02
An Improved Project Structure
06:19
Mapping the Response
06:02
Extracting the Loader
06:21
Connecting the Page and Loader
09:31
Rendering the List of Results
12:05
Focusing on the Details Page
05:57
Details Interface
02:02
Fetching Details
02:24
Creating the Details Loader
02:26
Accessing Route Params
08:24
Typing the Page and Loader Together
02:47
Rendering Package Details
02:08
Error Around the Name Property
00:11
Fetching Packages in Parallel
05:44
Creating the Home Loader
03:57
Accessing the Data from a Loader
01:50
Assembling the Home Page
06:27
React Router Review
03:58
Note About This Legacy Course
00:19
What is JSX? / Converting HTML
10:50
Inline Styling / Converting Styling
06:22
Class vs. ClassName / Referencing JS Variables
05:13
Important Note About Viewing Errors
00:43
Three Tenants of Components / App Overview
05:44
IMPORTANT Info About Faker Installation
00:39
Getting Some Free Styling / Naive Component Approach
11:48
Specifying Images / Duplicating a Single Component
08:01
Extracting JSX / Component Nesting
11:43
React Props System / Passing and Receiving Props
10:48
Component Reuse / Implementing an Approval Card
09:17
Showing Custom Children / Component Reuse
08:32
Class Based Components
06:04
Application Overview / Scaffolding the App
09:58
Getting a User's Physical Location / Resetting Geolocation Preferences
08:29
Handling Async Operations / Refactoring to Class Components
09:06
Rules of State / Initializing State Through Constructors
12:24
Updating State Properties / App Lifecycle Walkthrough
14:49
Handling Errors Gracefully / Conditionally Rendering Content
11:59
Introducing Lifecycle Methods / Why Lifecycle Methods
13:50
Refactoring Data Loading / Alternate State initialization
08:05
Passing State as Props
04:19
Determining Season
05:34
Ternary Expressions in JSX / Showing Icons
08:13
Extracting Options to Config Objects / Adding Some Styling
13:46
Showing a Loading Spinner / Specifying Default Props
11:12
Avoiding Conditionals in Render / Breather and Review
13:39
App Overview / Component Design
08:42
Adding Some Project Structure / Showing Forms
08:23
Adding a Touch of Styling / Creating Event Handlers
11:24
Alternate Event Handlers / Uncontrolled vs Controlled Elements
06:08
More on Controlled Elements / Handling Form Submittal
14:10
Understanding "this" in JS / Solving Context Issues
18:47
Communicating Child to Parent / Invoking Callbacks in Children
08:19
Fetching Data / Axios vs. Fetch
09:11
Viewing Request Results / Handling Requests with Async Await
15:55
Setting State After Async Requests / Binding Callbacks
08:36
Creating Custom Clients
05:28
Rendering Lists / Review of Map Statements
08:21
Rendering Lists of Components / Purpose of Keys
08:27
Implementing Keys in Lists
04:27
Grid CSS / Issues with Grid CSS
10:40
Creating an ImageCard Component / Accessing the DOM with Refs
08:41
Accessing Image Height / Callbacks on Image Load
10:36
Dynamic Spans / App Review
11:13
App Overview / Component Design
05:44
Scaffolding the App / Reminder on Event Handlers
12:52
Handling Form Submittal / Accessing the YouTube API
12:53
Searching for Videos / Putting it All Together
13:46
Updating State with Fetched Data / Passing State as Props
08:33
Rendering a List of Videos / Rendering Video Thumbnails
09:22
Styling a List / Communicating from Children to Parent
13:49
Deeply Nested Callbacks / Conditional Rendering
11:52
Styling the VideoDetail / Displaying a Video Player
11:25
Fixing a few Warnings / Defaulting Video Selection
11:31
React Hooks / App Architecture
09:39
Communicating the Items Prop / Building and Styling the Accordion
11:02
Helper Functions / Introducing useState
08:50
Understanding useState / Setter Functions
10:23
Expanding the Accordion / Creating Additional Widgets
05:58
Search Widget Architecture / Scaffolding the Widget
06:11
Text Inputs with Hooks / When do We Search
11:14
useEffect Hook / Testing Execution
10:43
Async Code in useEffect / Executing the Request from useEffect
11:03
Default Search Terms / List Building
08:50
XSS Server Code
00:23
XSS Attacks in React / Linking to a Wikipedia Page
10:44
Only Search with a Term / Throttling API Requests
05:06
Reminder on setTimeout / useEffect's Cleanup Function
09:40
Implementing a Delayed Request / Searching on Initial Render
05:24
Edge Case When Clearing Out Input Form
00:18
Fixing a Warning / Dropdown Architecture
23:47
Scaffolding the Dropdown / A Lot of JSX
08:24
Selection State / Filtering the Option List
08:02
Hiding and Showing the Option List / Why is this Hard?
11:39
React v17 Update - capture: true
00:13
Reminder on Event Bubbling / Applying What We've Learned
08:07
Binding an Event Handler / Why Stay Open
07:59
Important Update for Event Listeners
00:21
Which Element was Clicked / Making use of useRef
08:34
Body Event Listener Cleanup / Translate Widget
10:47
Scaffolding the Translate Component / Adding the Language Input
08:46
Google Translate API Key
00:16
Understanding the Convert Component / Building the Convert Component
10:07
Using the Google Translate API / Displaying Translated Text
12:02
Debouncing Translation Updates / Navigation in React
09:08
Basic Component Routing / Building Reusable Route Component
13:59
Implementing Header for Navigation / Handling Navigation
06:38
Building a Link / Changing the URL
08:32
Detecting Navigation / Updating the Route
08:26
Handling Command Clicks
02:03
Project Overview / Refactoring the SearchBar
10:30
Refactoring the App / Removing a Callback
11:00
Overview of Custom Hooks / Process for Building Custom Hooks
12:20
Extracting Video Logic / Using the Custom Hook
12:20
Deployment Overview / Deployment with Vercel
09:36
Deployment with Netlify
07:09
Introduction to Redux / Redux by Analogy
10:29
A Bit More Analogy / Finishing the Analogy
14:44
Mapping the Analogy to Redux / Modeling with Redux
14:29
Creating Reducers / Rules of Reducers
16:41
Testing Our Example / Important Redux Notes
15:59
Integrating React with Redux / React, Redux and React-Redux
07:14
Design of the Redux App / How React-Redux Works
11:20
Redux Project Structure / Named vs Default Exports
07:57
Building Reducers / Wiring up the Provider
11:19
Connect Function / Configuring Connect with mapStateToProps
12:37
Building a List with Redux Data / Calling Action Creators
14:27
Redux is Not Magic / Functional Components with Connect
12:37
Conditional Rendering
05:14
App Overview / Initial App Setup
13:54
Tricking Redux with Dummy Reducers / A Touch More Setup
05:41
How to Fetch Data in a Redux App / Wiring Up Action Creators
09:01
Making a Request from an Action Creator / Understanding Async Action Creators
14:10
Behind the Scenes of Redux Thunk / Shortened Syntax with Redux Thunk
16:51
Rules of Reducers / Return Values from Reducers
06:01
Argument Values in Reducers / Pure Reducers
07:39
Mutations in JavaScript / Equality of Arrays and Objects
09:30
A Misleading Rule / Safe State Updates in Reducers
22:24
Switch Statements in Reducers / Dispatching Correct Values
10:52
List Building / Displaying Users
11:39
Fetching Singular Records / Displaying the User Header
09:18
Finding Relevant Users / Extracting Logic with mapStateToProps
15:36
That's the Issue / Memoizing Functions
09:32
Memoizing Issues / One Time Memoization
11:36
Alternate Overfetching Solution / Action Creators in Action Creators
12:07
Finding Unique User IDs / Quick Refactor with Chain
12:47
App Wrapup
03:34
App Outline / Mockups in Detail
11:30
App Challenges / Initial Setup
07:55
IMPORTANT - React Router Installation Update
00:11
Introducing React Router / How React Router Works
12:03
How Paths Get Matched / How Now to Navigate with React Router
13:30
Navigating with React Router / Different Router Types
23:27
Component Scaffolding / Wiring Up Routes
09:59
Always Visible Components / Wiring Up the Header
08:11
Links Inside Routers
02:44
OAuth Based Authentication / OAuth for Servers vs Browser Apps
14:37
Creating OAuth Credentials / Wiring Up the Google API Library
14:06
Required plugin_name Parameter - Do Not Skip
00:18
Sending a User into the OAuth Flow / Rendering Auth Status
15:35
Updating Auth State / Displaying Sign In and Sign Out Buttons
10:37
On Demand Sign In and Sign Out / Redux Architecture
12:32
Redux Setup / Connecting Auth Action Creators
08:48
Building the Auth Reducers / Handling Auth Status Through Redux
10:41
Fixed Action Types / Recording the User's ID
11:42
Redux Dev Tools / Debug Sessions with Redux Dev Tools
13:55
Important Note about Redux Form Installation
00:30
Forms with Redux Form / Useful Redux Form Examples
08:51
Connecting Redux Form / Creating Forms with Redux Form
12:07
Automatically Handling Events / Customizing Form Fields
13:14
Handling Form Submission / Validation of Form Inputs
12:18
Displaying Validation Messages / Showing Errors on Touch
12:47
Highlighted Errored Fields
03:28
Creating Streams / RESTful Conventions
07:34
Setting Up an API Server / Creating Streams Through Action Creators
11:57
Creating a Stream with REST Conventions / Dispatching Actions
08:53
Bulk Action Creators / Object Based Reducers
20:00
Key Interpolation Syntax / Handling Fetching, Creating and Updating
13:49
Deleting Properties with Omit / Merging Lists of Records
10:56
Fetching a List of Streams / Rendering All Streams
09:32
Associating Streams with Users / Conditionally Showing Edit and Delete
13:32
Linking to Stream Creation / When to Navigate Users
10:18
History Object Deprecation
00:16
History References / Creating a Browser History Object
10:22
Implementing Programmatic Navigation / Manually Changing API Records
04:44
URL Based Selection / Wildcard Navigation
11:52
More on Route Params / Pulling Streams Out of State
09:24
Selecting Records from State / Component Isolation with React Router
12:55
Fetching a Stream for Edit Stream / Real Code Reuse
14:18
Refactoring Stream Creation / Setting Initial Values
15:20
Avoiding Changes to Properties / Edit Form Submission
12:13
PUT vs PATCH Requests
05:43
Why Use Portals / More on Using Portals
20:29
Creating a Portal / Hiding a Modal
15:42
Making the Modal Reusable / React Fragments
10:33
onDismiss From the Parent / Reminder on Path Params
07:31
Fetching the Deletion Stream / Conditionally Showing Stream Details
14:20
Deleting a Stream
07:51
Viewing a Stream / Switches with React Router
07:47
RTMP NodeMediaServer is not a constructor error fix
00:12
Showing a Stream / RTMP Server Setup
11:46
OBS Installation
02:31
OBS Scene Setup
04:31
Video Player Setup / Implementing FLV.js
07:42
Creating a FLV Player / Optional Player Building
13:54
It works! / Cleaning up Resources with componentWillUnmount
07:42
Context System / An App with Context
07:50
App Generation / Selecting a Language
06:26
A Touch More Setup / Getting Data Into and Out of Context
08:10
Creating Context Objects / Consuming the Context Value
13:32
Context Provider / Gotchas Around Providers
13:22
Accessing Data With Consumers / Pulling From Multiple Contexts
14:48
Replacing Redux with Context / Creating a Store Component
10:02
Implementing a Language Store / Rendering the Language Store
10:57
Connecting the Selector to the Store / Connecting the Field and Button
06:11
Context vs Redux
03:41
Bonus!
00:33
Viết Bình Luận
Khoá học liên quan
![Shopify Theme Development: Create Shopify Themes [2023]](/uploads/courses/udemy/3873888_16dc_2.jpg)
Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!
Get khoá học giá rẻ ngay trước khi bị fix.
Đánh giá của học viên
Bình luận khách hàng