Course Overview
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, 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.
Adding to your experience, the course shows modern techniques and tools, equipping you with the latest skills needed for the dynamic web development landscape. You’ll get hands-on experience with cutting-edge features like Context API for state management, TailwindCSS for styling, React Router for navigation, and Typescript to add type safety to your React apps. This holistic approach ensures not only do you learn React and Redux but also the surrounding ecosystem that makes modern web development efficient and enjoyable.
Practical projects are at the heart of this learning experience. By integrating APIs, managing app state with Redux, and using React Hooks for component lifecycle management, you’ll have the opportunity to build applications that are both complex and high-performing. These projects are designed to simulate real-world web development scenarios, preparing you for the challenges that professional developers face daily.
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
Integrate Redux Toolkit for efficient state management
Leverage React Hooks for more intuitive component logic
Manage app-wide state with the Context API for simpler global state
Style components with TailwindCSS for rapid UI development
Utilize TypeScript with React for safer and more predictable code
Implement navigation within your app with React Router
Utilize Redux with forms for consistent state updates and user experience
Learn to use portals for rendering components outside the DOM hierarchy
Develop and interact with APIs for data-driven applications
Master the implementation of data tables to handle and display large sets of data
Get to grips with Immer for writing reducers with ease
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.
FAQ
FAQ area empty
Course curriculum
-
Showing Basic Content
401 -
What is JSX?
348 -
Printing JavaScript Variables in JSX
269 -
Shorthand JS Expressions
111 Xem trước -
Showing Javascript Values in JSX
-
Exercise Overview
42 -
Quick Practice with JSX
0 -
Exercise Solution
35 -
Typical Component Layouts
118 -
Customizing Elements with Props
456 -
Converting HTML to JSX
307 -
Applying Styling in JSX
373 -
More on JSX
-
Practice JSX Conversion
0 -
Exercise Solution
125 -
Extracting Components
266 -
Module Systems Overview
965 -
Imports and Exports
-
Cheatsheet for JSX
-
Starter Project Files
-
Project Overview
302 -
Creating Core Components
300 -
Introducing the Props System
291 -
Picturing the Movement of Data
366 -
Adding Props
184 -
Using Argument Destructuring
297 -
Practice with Props
0 -
Exercise Solution
90 -
The React Developer Tools
157 -
The Most Common Props Mistake
282 -
Communicating With Props
-
Images for the App
-
Including Images
489 -
Handling Image Accessibility
399 -
Review on how CSS Works
370 -
Adding CSS Libraries with NPM
357 -
A Big Pile of HTML!
578 -
Last Bit of Styling
345
-
Starter Project Files
-
App Overview
145 -
Initial App Setup
309 -
Introducing the Event System
194 -
Events in Detail
491 -
Variations on Event Handlers
402 -
Quiz on Events
-
Exercise with Events
0 -
Exercise Solution
75 -
Introducing the State System
223 -
More on State
523 -
Understanding the Re-Rendering Process
490 -
Got These Five Points?
-
Why Array Destructuring?
521 -
Back to the App
213 -
Picking a Random Element
431 -
List Building in React
586 -
Images for the App
-
Loading and Showing SVGs
350 -
Increasing Image Size
351 -
Adding Custom CSS
381 -
Finalizing Styling
358 -
App Wrapup and Review
532
-
Starter Project Files
-
App Overview
101 -
Project Setup
353 -
The Path Forward
246 -
Overview of HTTP Requests
675 -
Note About the Unsplash API
-
Understanding the API
367 -
Making an HTTP Request
636 -
[Optional] Using Async:Await
158 -
Data Fetching Cleanup
200 -
Thinking About Data Flow
522 -
Child to Parent Communication
367 -
Implementing Child to Parent Communication
449 -
Upward Communication
-
Handling Form Submission
692 -
Handling Input Elements
561 -
[Optional] OK But Why?
861 -
Creating a Controlled Input
0 -
Exercise Solution
155 -
Running the Search
246 -
Reminder on Async:Await
180 -
Communicating the List of Images Down
751 -
Building a List of Images
303 -
Handling List Updates
550 -
Notes on Keys
562 -
Displaying Images
108 -
A Touch of Styling
266 -
App Wrapup
221
-
Starter Project Files
-
App Overview
175 -
Initial Setup
356 -
State Location
314 -
Reminder on Event Handlers
291 -
Extra CSS
-
Receiving New Titles
534 -
Adding Styling
132 -
Updating State
624 -
Don't Mutate That State!
266 -
State Updates - Cheat Sheet
-
[Optional] Adding Elements to the Start or End
84 -
Adding Elements
0 -
[Optional] Exercise Solution
72 -
[Optional] Inserting Elements
283 -
Inserting Elements
0 -
[Optional] Exercise Solution
120 -
[Optional] Removing Elements
424 -
Removing Elements
0 -
[Optional] Exercise Solution
129 -
[Optional] Modifying Elements
365 -
[Super Optional] Why the Special Syntax?
430 -
Modifying Elements
0 -
[Optional] Exercise Solution
146 -
[Optional] Adding, Changing, or Removing Object Properties
238 -
Cheatsheet for State Changes
-
Adding a Book, For Real!
109 -
Generating Random ID's
125 -
Displaying the List
335 -
Deleting Records
396 -
Toggling Form Display
391 -
Default Form Values
426 -
Updating the Title
524 -
Closing the Form on Submit
306 -
A Better Solution!
270 -
Collapsing Two Handlers into One
198 -
Adding Images
478
-
Adding Data Persistence
468 -
JSON Server Issues and Required Version
-
Server Setup
224 -
What Just Happened?
276 -
How the API Works
320 -
Introducing the REST Client
305 -
ECONNREFUSED 127.0.0.1:3001 Errors in VSCode
-
Using the REST Client
418 -
Creating a New Record
416 -
Fetching a List of Records
265 -
Introducing useEffect
171 -
UseEffect in Action
384 -
More on useEffect
592 -
When Does it Run?
-
Updating a Record
198 -
Thinking About Updates
327 -
Deleting a Record
78
-
Introducing Context
552 -
Context in Action
375 -
Changing Context Values
411 -
More on Changing Context
526 -
Application vs Component State
710 -
Refactoring to Use Context
278 -
Refactoring the App
332 -
Quick Note
-
Reminder on Sharing with Context
372 -
Props and Context Together
188 -
Last Bit of Refactoring
355 -
A Small Taste of Reusable Hooks
593
-
Starter Project Files
-
Project Overview
230 -
Project Setup
114 -
Some Button Theory
499 -
Underlying Elements
228 -
The Children Prop
261 -
Props Design
381 -
Validating Props with PropTypes
509 -
PropTypes in Action
412 -
Introducing TailwindCSS
397 -
Required Tailwind Configuration
-
How to use Tailwind
395 -
Review on Styling
622 -
The ClassNames Library
688 -
Building Some Variations
355 -
Text-white Overriding Other Colors
-
Finalizing the Variations
367 -
Using Icons in React Projects
595 -
Issues with Event Handlers
436 -
Passing Props Through
367 -
Handling the Special ClassName Case
316 -
Exclusive Props with TypeScript instead of PropTypes
-
Project Organization
643 -
Refactoring with Organization
356 -
Component Overview
288 -
Component Setup
222 -
Reminder on Building Lists
244 -
Quick Note
-
State Design Process Overview
1770 -
Finding the Expanded Item
249 -
Conditional Rendering
385 -
Inline Event Handlers
600 -
Variation on Event Handlers
501 -
Conditional Icon Rendering
134 -
Displaying Icons
105 -
Adding Styling
228 -
Toggling Panel Collapse
126 -
Quick Note
-
[Optional] Delayed State Updates
514 -
[Optional] Functional State Updates
702 -
Conditional Rendering
-
Event Handlers with Lists
0 -
Exercise Solution
86
-
Component Overview
68 -
Designing the Props
349 -
Component Creation
254 -
[Optional] More State Design
1211 -
Finally... Implementation!
405 -
Reminder on Event Handlers in Maps
287 -
Dropdown as a Controlled Component
284 -
Controlled Component Implementation
336 -
Existence Check Helper
270 -
Community Convention with Props Names
394 -
Form Controls - Prop Naming Convention
0 -
Exercise Solution
97 -
Adding Styling
333 -
The Panel Component
426 -
Creating the Reusable Panel
359 -
A Challenging Extra Feature
319 -
Document-Wide Click Handlers
166 -
Event Capture and Bubbling
374 -
Putting it All Together
140 -
Why a Capture Phase Handler?
874 -
Reminder on the useEffect Function
232 -
Reminder on useEffect Cleanup
346 -
Issues with Element References
176 -
UseRef in Action
304 -
Checking Click Location
194
-
Traditional Browser Navigation
573 -
Theory of Navigation in React
476 -
Extracting the DropdownPage
163 -
Answering Critical Questions
333 -
The PushState Function
176 -
Handling Link Clicks
148 -
Handling Back:Forward Buttons
383 -
Navigation Context
245 -
Listening to Forward and Back Clicks
379 -
Programmatic Navigation
336 -
A Link Component
325 -
A Route Component
349 -
Handling Control and Command Keys
172 -
Link Styling
78 -
Custom Navigation Hook
175 -
Adding a Sidebar Component
502 -
Highlighting the Active Link
445 -
Navigation Wrapup
114
-
Creating a Reusable table
214 -
Communicating Data to the Table
183 -
Reminder on Table HTML Structure
265 -
Building the Rows
172 -
Better Styling
218 -
Done! But It's Not Reusable
310 -
Here's the Idea
149 -
Dynamic Table Headers
286 -
Rendering Individual Cells
318 -
Fixed Cell Values
300 -
Nested Maps
275 -
Fixing the Color
57 -
Adding a Key Function
252
-
Adding Sorting to the Table
398 -
Reminder on Sorting in JavaScript
384 -
Sorting Strings
165 -
Sorting Objects
236 -
Object Sort Implementation
458 -
Reversing Sort Order
266 -
Optional Sorting
250 -
A Small Extra Feature
194 -
Customizing Header Cells
229 -
React Fragments
357 -
The Big Reveal
639 -
Adding SortableTable
692 -
Watching for Header Cell Clicks
103 -
Quick State Design
417 -
Adding Sort State
324 -
Yessssss, It Worked!
660 -
Determining Icon Set
308 -
Styling Header Cells
217 -
Resetting Sort Order
175 -
Table Wrapup
233
-
App Overview
183 -
Adding the Form
266 -
More on the Form
418 -
UseReducer in Action
587 -
Rules of Reducer Functions
562 -
Understanding Action Objects
645 -
Constant Action Types
395 -
Refactoring to a Switch
334 -
Adding New State Updates
380 -
A Few Design Considerations Around Reducers
591 -
A Few Questions on Reducers
-
Introducing Immer
299 -
Immer in Action
201
-
Into the World of Redux
323 -
Redux vs Redux Toolkit
557 -
App Overview
183 -
The Path Forward
211 -
Implementation Time!
281 -
Understanding the Store
561 -
The Store's Initial State
212 -
Understanding Slices
470 -
Understanding Action Creators
393 -
Connecting React to Redux
264 -
Updating State from a Component
505 -
Accessing State in a Component
394 -
Removing Content
432 -
Practice Updating State!
415 -
Practice Accessing State!
122 -
Even More State Updating!
269 -
Resetting State
385 -
Multiple State Updates
287 -
Understanding Action Flow
405 -
Watching For Other Actions
306 -
Getting an Action Creator's Type
186 -
Manual Action Creation
571 -
File and Folder Structure
521 -
Refactoring the Project Structure
667 -
Link to Completed Project
-
Starter Project Files
-
Project Overview
220 -
Adding Component Boilerplate
368 -
Thinking About Derived State
474 -
Thinking About Redux Design
317 -
Adding the Form Slice
334 -
Maintaining a Collection with a Slice
580 -
Creating the Store
273 -
Form Values to Update State
524 -
Addressing Selector unknown returned a different result warning
-
Receiving the Cost
317 -
Dispatching During the Form Submission
271 -
Awkward Double Keys
438 -
Listing the Records
205 -
Deleting Records
135 -
CSS File for Download
-
Adding Styling
87 -
Form Reset on Submission
201 -
Reminder on ExtraReducers
143 -
Adding a Searching Input
336 -
More Selector returned a different result warnings
-
Derived State in useSelector
307 -
Total Car Cost
382 -
Update for Adding Name Selector to CarList
-
Highlighting Existing Cars
390
-
Starter Project Files
-
App Overview
488 -
API Server Setup
171 -
Component Files
-
Adding a Few Components
193 -
Creating the Redux Store
334 -
Thinking About Data Structuring
559 -
Reminder on Request Conventions
115 -
Data Fetching Techniques
157 -
Optional Async Thunks Section
-
Adding State for Data Loading
412 -
Understanding Async Thunks
254 -
Steps for Adding a Thunk
466 -
More on Adding Thunks
797 -
Wrapping up the Thunk
323 -
Using Loading State
270 -
Adding a Pause for Testing
207 -
Adding a Skeleton Loader
339 -
Animations with TailwindCSS
722 -
Rendering the List of Users
196 -
Creating New Users
727 -
Unexpected Loading State
363 -
Strategies for Fine-Grained Loading State
455 -
Local Fine-Grained Loading State
607 -
More on Loading State
175 -
Handling Errors with User Creation
303 -
Creating a Reusable Thunk Hook
694 -
Creating a Fetch-Aware Button Component
341 -
Better Skeleton Display
221 -
A Thunk to Delete a User
296 -
Updating the Slice
267 -
Refactoring the Component
211 -
Deleting the User
286 -
Fixing a Delete Error
313 -
Album Feature Overview
288 -
Additional Components
441 -
Adding the ExpandablePanel
291 -
Wrapping Up the ExpandablePanel
240 -
Adding the Albums Listing
163
-
Skipping to this Section?
-
[Optional] Getting Caught Up
167 -
Introducing Redux Toolkit Query
480 -
Creating a RTK Query API
380 -
Creating an Endpoint
841 -
Using the Generated Hook
661 -
A Few Immediate Notes
356 -
Rendering the List
265 -
Changing Data with Mutations
522 -
Differences Between Queries and Mutations
193 -
Options for Refetching Data
378 -
Request De-Duplication
230 -
Some Internals of Redux Toolkit Query
374 -
Refetching with Tags
453 -
Fine-Grained Tag Validation
553 -
Styling Fixups
200 -
Adding a Pause for Testing
201 -
Refactoring the List
286 -
Remove Implementation
462 -
Easy Tag Invalidation
358 -
Getting Clever with Cache Tags
384 -
More Clever Tag Implementation
287 -
Photos Feature Overview
251 -
Lots of Photos Setup!
361 -
Adding the Endpoints
758 -
Creating the Photo
277 -
Showing the List of Photos
314 -
Adding Mouse-Over Deletes
379 -
Adding Automatic Data Refetching
514
-
Why Use Typescript?
344 -
Basic Types and Type Annotations
289 -
Function Type Annotations
117 -
Type Inference
196 -
Quiz - Type Annotations and Type Inference
-
Describing Objects with Interfaces
273 -
Using Interfaces to Annotate Props
231 -
Quiz - Props with Interfaces
-
Downsides to Type Inference
279 -
Function Types
426 -
Function Types in Props Interfaces
261 -
Quiz - Function Types
-
Extending an Interface
271 -
Type Unions
242 -
Type Narrowing with Type Guards
209 -
Tricky Cases with Type Guards
239 -
Quiz - Type Narrowing and Guards
-
Type Predicates
339 -
Optional Properties
334 -
Quiz - Optional Properties
-
The "Any" and "Unknown" Types
490 -
Type Aliases
170 -
Life Without Generics
262 -
Introduction to Function Generics
355 -
More on Function Generics
349 -
Multiple Generic Types
285 -
More Generic Examples!
243 -
Generics with Fetch
400 -
Generic Type Inference
232 -
More on Generic Type Inference
182 -
Issues with Generic Type Inference
274 -
Generic Type Constraints
285 -
More on Generic Type Constraints
376 -
TypeScript Wrapup
74
-
Project Overview
152 -
Guidance for Installing and Configuring Tailwind v4
-
Project Setup
184 -
Component Creation
157 -
App Architecture
264 -
Defining an Interface
147 -
Typing of Props
175 -
Type Inference Around useState
201 -
Typing a Callback
294 -
Form Submissions with TypeScript
269 -
Searching with the OSM API
310 -
Why Use Interfaces?
604 -
Rendering the Locations
269 -
Showing and Panning a Map
661 -
App Review
209
-
App Overview
196 -
Guidance for Installing and Configuring Tailwind v4
-
Project Setup
112 -
Introducing React Router
344 -
React Router Setup
610 -
Navigating with a Link
219 -
Programmatic Navigation
546 -
Form Submission Navigation Shortcut
279 -
A Touch of Styling
231 -
The Registry API
139 -
Fetching Data with React Router
345 -
More on Fetching with a Loader
447 -
Designing New Types
362 -
An Improved Project Structure
379 -
Mapping the Response
362 -
Extracting the Loader
381 -
Connecting the Page and Loader
571 -
Rendering the List of Results
725 -
Focusing on the Details Page
357 -
Details Interface
122 -
Fetching Details
144 -
Creating the Details Loader
146 -
Accessing Route Params
504 -
Typing the Page and Loader Together
167 -
Rendering Package Details
128 -
Error Around the Name Property
-
Fetching Packages in Parallel
344 -
Creating the Home Loader
237 -
Accessing the Data from a Loader
110 -
Assembling the Home Page
387 -
React Router Review
238
-
Note About This Legacy Course
-
What is JSX? / Converting HTML
650 -
Inline Styling / Converting Styling
382 -
Class vs. ClassName / Referencing JS Variables
313 -
Important Note About Viewing Errors
-
Three Tenants of Components / App Overview
344 -
IMPORTANT Info About Faker Installation
-
Getting Some Free Styling / Naive Component Approach
708 -
Specifying Images / Duplicating a Single Component
481 -
Extracting JSX / Component Nesting
703 -
React Props System / Passing and Receiving Props
648 -
Component Reuse / Implementing an Approval Card
557 -
Showing Custom Children / Component Reuse
512 -
Class Based Components
364 -
Application Overview / Scaffolding the App
598 -
Getting a User's Physical Location / Resetting Geolocation Preferences
509 -
Handling Async Operations / Refactoring to Class Components
546 -
Rules of State / Initializing State Through Constructors
744 -
Updating State Properties / App Lifecycle Walkthrough
889 -
Handling Errors Gracefully / Conditionally Rendering Content
719 -
Introducing Lifecycle Methods / Why Lifecycle Methods
830 -
Refactoring Data Loading / Alternate State initialization
485 -
Passing State as Props
259 -
Determining Season
334 -
Ternary Expressions in JSX / Showing Icons
493 -
Extracting Options to Config Objects / Adding Some Styling
826 -
Showing a Loading Spinner / Specifying Default Props
672 -
Avoiding Conditionals in Render / Breather and Review
819 -
App Overview / Component Design
522 -
Adding Some Project Structure / Showing Forms
503 -
Adding a Touch of Styling / Creating Event Handlers
684 -
Alternate Event Handlers / Uncontrolled vs Controlled Elements
368 -
More on Controlled Elements / Handling Form Submittal
850 -
Understanding "this" in JS / Solving Context Issues
1127 -
Communicating Child to Parent / Invoking Callbacks in Children
499 -
Fetching Data / Axios vs. Fetch
551 -
Viewing Request Results / Handling Requests with Async Await
955 -
Setting State After Async Requests / Binding Callbacks
516 -
Creating Custom Clients
328 -
Rendering Lists / Review of Map Statements
501 -
Rendering Lists of Components / Purpose of Keys
507 -
Implementing Keys in Lists
267 -
Grid CSS / Issues with Grid CSS
640 -
Creating an ImageCard Component / Accessing the DOM with Refs
521 -
Accessing Image Height / Callbacks on Image Load
636 -
Dynamic Spans / App Review
673 -
App Overview / Component Design
344 -
Scaffolding the App / Reminder on Event Handlers
772 -
Handling Form Submittal / Accessing the YouTube API
773 -
Searching for Videos / Putting it All Together
826 -
Updating State with Fetched Data / Passing State as Props
513 -
Rendering a List of Videos / Rendering Video Thumbnails
562 -
Styling a List / Communicating from Children to Parent
829 -
Deeply Nested Callbacks / Conditional Rendering
712 -
Styling the VideoDetail / Displaying a Video Player
685 -
Fixing a few Warnings / Defaulting Video Selection
691 -
React Hooks / App Architecture
579 -
Communicating the Items Prop / Building and Styling the Accordion
662 -
Helper Functions / Introducing useState
530 -
Understanding useState / Setter Functions
623 -
Expanding the Accordion / Creating Additional Widgets
358 -
Search Widget Architecture / Scaffolding the Widget
371 -
Text Inputs with Hooks / When do We Search
674 -
UseEffect Hook / Testing Execution
643 -
Async Code in useEffect / Executing the Request from useEffect
663 -
Default Search Terms / List Building
530 -
XSS Server Code
-
XSS Attacks in React / Linking to a Wikipedia Page
644 -
Only Search with a Term / Throttling API Requests
306 -
Reminder on setTimeout / useEffect's Cleanup Function
580 -
Implementing a Delayed Request / Searching on Initial Render
324 -
Edge Case When Clearing Out Input Form
-
Fixing a Warning / Dropdown Architecture
1427 -
Scaffolding the Dropdown / A Lot of JSX
504 -
Selection State / Filtering the Option List
482 -
Hiding and Showing the Option List / Why is this Hard?
699 -
React v17 Update - capture: true
-
Reminder on Event Bubbling / Applying What We've Learned
487 -
Binding an Event Handler / Why Stay Open
479 -
Important Update for Event Listeners
-
Which Element was Clicked / Making use of useRef
514 -
Body Event Listener Cleanup / Translate Widget
647 -
Scaffolding the Translate Component / Adding the Language Input
526 -
Google Translate API Key
-
Understanding the Convert Component / Building the Convert Component
607 -
Using the Google Translate API / Displaying Translated Text
722 -
Debouncing Translation Updates / Navigation in React
548 -
Basic Component Routing / Building Reusable Route Component
839 -
Implementing Header for Navigation / Handling Navigation
398 -
Building a Link / Changing the URL
512 -
Detecting Navigation / Updating the Route
506 -
Handling Command Clicks
123 -
Project Overview / Refactoring the SearchBar
630 -
Refactoring the App / Removing a Callback
660 -
Overview of Custom Hooks / Process for Building Custom Hooks
740 -
Extracting Video Logic / Using the Custom Hook
740 -
Deployment Overview / Deployment with Vercel
576 -
Deployment with Netlify
429 -
Introduction to Redux / Redux by Analogy
629 -
A Bit More Analogy / Finishing the Analogy
884 -
Mapping the Analogy to Redux / Modeling with Redux
869 -
Creating Reducers / Rules of Reducers
1001 -
Testing Our Example / Important Redux Notes
959 -
Integrating React with Redux / React, Redux and React-Redux
434 -
Design of the Redux App / How React-Redux Works
680 -
Redux Project Structure / Named vs Default Exports
477 -
Building Reducers / Wiring up the Provider
679 -
Connect Function / Configuring Connect with mapStateToProps
757 -
Building a List with Redux Data / Calling Action Creators
867 -
Redux is Not Magic / Functional Components with Connect
757 -
Conditional Rendering
314 -
App Overview / Initial App Setup
834 -
Tricking Redux with Dummy Reducers / A Touch More Setup
341 -
How to Fetch Data in a Redux App / Wiring Up Action Creators
541 -
Making a Request from an Action Creator / Understanding Async Action Creators
850 -
Behind the Scenes of Redux Thunk / Shortened Syntax with Redux Thunk
1011 -
Rules of Reducers / Return Values from Reducers
361 -
Argument Values in Reducers / Pure Reducers
459 -
Mutations in JavaScript / Equality of Arrays and Objects
570 -
A Misleading Rule / Safe State Updates in Reducers
1344 -
Switch Statements in Reducers / Dispatching Correct Values
652 -
List Building / Displaying Users
699 -
Fetching Singular Records / Displaying the User Header
558 -
Finding Relevant Users / Extracting Logic with mapStateToProps
936 -
That's the Issue / Memoizing Functions
572 -
Memoizing Issues / One Time Memoization
696 -
Alternate Overfetching Solution / Action Creators in Action Creators
727 -
Finding Unique User IDs / Quick Refactor with Chain
767 -
App Wrapup
214 -
App Outline / Mockups in Detail
690 -
App Challenges / Initial Setup
475 -
IMPORTANT - React Router Installation Update
-
Introducing React Router / How React Router Works
723 -
How Paths Get Matched / How Now to Navigate with React Router
810 -
Navigating with React Router / Different Router Types
1407 -
Component Scaffolding / Wiring Up Routes
599 -
Always Visible Components / Wiring Up the Header
491 -
Links Inside Routers
164 -
OAuth Based Authentication / OAuth for Servers vs Browser Apps
877 -
Creating OAuth Credentials / Wiring Up the Google API Library
846 -
Required plugin_name Parameter - Do Not Skip
-
Sending a User into the OAuth Flow / Rendering Auth Status
935 -
Updating Auth State / Displaying Sign In and Sign Out Buttons
637 -
On Demand Sign In and Sign Out / Redux Architecture
752 -
Redux Setup / Connecting Auth Action Creators
528 -
Building the Auth Reducers / Handling Auth Status Through Redux
641 -
Fixed Action Types / Recording the User's ID
702 -
Redux Dev Tools / Debug Sessions with Redux Dev Tools
835 -
Important Note about Redux Form Installation
-
Forms with Redux Form / Useful Redux Form Examples
531 -
Connecting Redux Form / Creating Forms with Redux Form
727 -
Automatically Handling Events / Customizing Form Fields
794 -
Handling Form Submission / Validation of Form Inputs
738 -
Displaying Validation Messages / Showing Errors on Touch
767 -
Highlighted Errored Fields
208 -
Creating Streams / RESTful Conventions
454 -
Setting Up an API Server / Creating Streams Through Action Creators
717 -
Creating a Stream with REST Conventions / Dispatching Actions
533 -
Bulk Action Creators
739 -
Object Based Reducers
462 -
Key Interpolation Syntax / Handling Fetching, Creating and Updating
829 -
Deleting Properties with Omit / Merging Lists of Records
656 -
Fetching a List of Streams / Rendering All Streams
572 -
Associating Streams with Users / Conditionally Showing Edit and Delete
812 -
Linking to Stream Creation / When to Navigate Users
618 -
History Object Deprecation
-
History References / Creating a Browser History Object
622 -
Implementing Programmatic Navigation / Manually Changing API Records
284 -
URL Based Selection / Wildcard Navigation
712 -
More on Route Params / Pulling Streams Out of State
564 -
Selecting Records from State / Component Isolation with React Router
775 -
Fetching a Stream for Edit Stream / Real Code Reuse
858 -
Refactoring Stream Creation / Setting Initial Values
920 -
Avoiding Changes to Properties / Edit Form Submission
733 -
PUT vs PATCH Requests
343 -
Why Use Portals / More on Using Portals
1229 -
Creating a Portal / Hiding a Modal
942 -
Making the Modal Reusable / React Fragments
633 -
OnDismiss From the Parent / Reminder on Path Params
451 -
Fetching the Deletion Stream / Conditionally Showing Stream Details
860 -
Deleting a Stream
471 -
Viewing a Stream / Switches with React Router
467 -
RTMP NodeMediaServer is not a constructor error fix
-
Showing a Stream / RTMP Server Setup
706 -
OBS Installation
151 -
OBS Scene Setup
271 -
Video Player Setup / Implementing FLV.js
462 -
Creating a FLV Player / Optional Player Building
834 -
It works! / Cleaning up Resources with componentWillUnmount
462 -
Context System / An App with Context
470 -
App Generation / Selecting a Language
386 -
A Touch More Setup / Getting Data Into and Out of Context
490 -
Creating Context Objects / Consuming the Context Value
812 -
Context Provider / Gotchas Around Providers
802 -
Accessing Data With Consumers / Pulling From Multiple Contexts
888 -
Replacing Redux with Context / Creating a Store Component
602 -
Implementing a Language Store / Rendering the Language Store
657 -
Connecting the Selector to the Store / Connecting the Field and Button
371 -
Context vs Redux
221
Requirment
-
A Mac or Windows Computer
Outcomes
-
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
0 Student
2 Courses
0 review