[Last updated 6/2024] React – The Complete Guide 2024 (incl. Next.js, Redux) (Udemy – Vietsub)
About Course
Views
What you’ll learn:
Learn React from the ground up and finish the course as an advanced React developer
Build multiple high-quality demo apps, including a fullstack app built with NextJS
Join more than 800,000 students in this course & more than 2,500,000 students I taught across all my courses
Build fullstack React apps with NextJS 14+
Follow along locally or in a cloud development environment
Learn all about React Hooks and React Components
Manage complex state efficiently with React’s Context API & React Redux
Build standalone React apps & applications connected to a backend via HTTP
Learn about routing & route-related data fetching with React Router
Implement user authentication in React apps
Get started with React Unit Testing
Link gốc:
https://www.udemy.com/course/react-the-complete-guide-incl-redux/
Time Course:
68 hours (696 Lectures + Documents)
Instructor
: Maximilian Schwarzmüller
Total Weight:
48.59 GB
** Note
:
Chú ý:
Course Content
30 – React + TypeScript
-
014 Working with Props & TypeScript.mp4
14:19 -
025 Bonus Exploring tsconfig.json.mp4
05:46 -
024 Summary.mp4
02:18 -
023 The Context API & TypeScript.mp4
13:55 -
022 Time to Practice Removing a Todo.mp4
09:27 -
021 Adding Styling.mp4
02:19 -
020 Managing State & TypeScript.mp4
05:13 -
019 Working with Function Props.mp4
07:26 -
018 Working with refs & useRef.mp4
10:56 -
017 Form Submissions In TypeScript Projects.mp4
05:21 -
016 Time to Practice Exercise Time!.mp4
07:02 -
015 Adding a Data Model.mp4
09:09 -
001 Module Introduction.mp4
01:26 -
013 Working with Components & TypeScript.mp4
05:40 -
012 Creating a React + TypeScript Project.mp4
08:34 -
010 Diving Into Generics.mp4
08:01 -
009 Functions & Function Types.mp4
05:19 -
008 Understanding Type Aliases.mp4
02:42 -
007 Using Union Types.mp4
02:47 -
006 Understanding Type Inference.mp4
02:47 -
005 Working with Array & Object Types.mp4
05:33 -
004 Exploring the Base Types.mp4
03:55 -
003 Installing & Using TypeScript.mp4
06:38 -
002 What & Why.mp4
06:33
21 – Building a Multi-Page SPA with React Router
-
032 Planning Data Submission.mp4
02:22 -
022 Where Should loader() Code Be Stored.mp4
02:18 -
023 When Are loader() Functions Executed.mp4
02:48 -
024 Reflecting The Current Navigation State in the UI.mp4
02:53 -
025 Returning Responses in loader()s.mp4
04:01 -
026 Which Kind Of Code Goes Into loader()s.mp4
01:14 -
027 Error Handling with Custom Errors.mp4
04:56 -
028 Extracting Error Data & Throwing Responses.mp4
06:24 -
029 The json() Utility Function.mp4
02:06 -
030 Dynamic Routes & loader()s.mp4
07:32 -
031 The useRouteLoaderData() Hook & Accessing Data From Other Routes.mp4
07:40 -
021 More loader() Data Usage.mp4
03:17 -
033 Working with action() Functions.mp4
09:07 -
034 Submitting Data Programmatically.mp4
09:06 -
035 Updating the UI State Based on the Submission Status.mp4
04:02 -
036 Validating User Input & Outputting Validation Errors.mp4
06:57 -
037 Reusing Actions via Request Methods.mp4
07:55 -
038 Behind-the-Scenes Work with useFetcher().mp4
09:10 -
039 Deferring Data Fetching with defer().mp4
09:06 -
040 Controlling Which Data Should Be Deferred.mp4
07:22 -
041 Module Summary.mp4
02:55 -
011 Navigating Programmatically.mp4
02:41 -
002 Routing Multiple Pages in Single-Page Applications.mp4
03:15 -
003 Project Setup & Installing React Router.mp4
03:05 -
004 Defining Routes.mp4
07:42 -
005 Adding a Second Route.mp4
02:07 -
006 Exploring an Alternative Way of Defining Routes.mp4
03:01 -
007 Navigating between Pages with Links.mp4
04:35 -
008 Layouts & Nested Routes.mp4
08:24 -
009 Showing Error Pages with errorElement.mp4
03:57 -
010 Working with Navigation Links (NavLink).mp4
06:37 -
001 Module Introduction.mp4
03:20 -
012 Defining & Using Dynamic Routes.mp4
07:43 -
013 Adding Links for Dynamic Routes.mp4
03:22 -
014 Understanding Relative & Absolute Paths.mp4
10:37 -
015 Working with Index Routes.mp4
01:55 -
016 Onwards to a new Project Setup.mp4
03:16 -
017 Time to Practice Problem.mp4
01:25 -
018 Time to Practice Solution.mp4
23:16 -
019 Data Fetching with a loader().mp4
07:35 -
020 Using Data From A Loader In The Route Component.mp4
02:50
22 – Adding Authentication To React Apps
-
001 Module Introduction.mp4
01:10 -
002 How Authentication Works.mp4
09:07 -
003 Project Setup & Route Setup.mp4
03:46 -
004 Working with Query Parameters.mp4
07:34 -
005 Implementing the Auth Action.mp4
11:40 -
006 Validating User Input & Outputting Validation Errors.mp4
04:18 -
007 Adding User Login.mp4
01:55 -
008 Attaching Auth Tokens to Outgoing Requests.mp4
06:32 -
009 Adding User Logout.mp4
04:20 -
010 Updating the UI Based on Auth Status.mp4
06:05 -
012 Adding Route Protection.mp4
02:46 -
013 Adding Automatic Logout.mp4
05:10 -
014 Managing the Token Expiration.mp4
07:28
23 – Deploying React Apps
-
001 Module Introduction.mp4
01:39 -
002 Deployment Steps.mp4
03:35 -
003 Understanding Lazy Loading.mp4
04:47 -
004 Adding Lazy Loading.mp4
09:11 -
005 Building the Code For Production.mp4
02:22 -
006 Deployment Example.mp4
06:43 -
007 Server-side Routing & Required Configuration.mp4
04:06
24 – React Query Tanstack Query Handling HTTP Requests With Ease
-
011 Acting on Mutation Success & Invalidating Queries.mp4
08:50 -
020 React Query & React Router.mp4
20:26 -
019 Using the Query Key As Query Function Input.mp4
07:47 -
018 Optimistic Updating.mp4
13:06 -
017 Updating Data with Mutations.mp4
04:49 -
016 React Query Advantages In Action.mp4
08:56 -
015 Enhancing the Demo App & Repeating Mutation Concepts.mp4
09:17 -
014 Disabling Automatic Refetching After Invalidations.mp4
02:42 -
013 A Challenge! The Solution.mp4
16:37 -
012 A Challenge! The Problem.mp4
02:14 -
001 Module Introduction.mp4
01:46 -
010 Fetching More Data & Testing the Mutation.mp4
06:38 -
009 Changing Data with Mutations.mp4
11:29 -
008 Enabled & Disabled Queries.mp4
06:55 -
007 The Query Configuration Object & Aborting Requests.mp4
05:27 -
006 Dynamic Query Functions & Query Keys.mp4
13:05 -
005 Understanding & Configuring Query Behaviors – Cache & Stale Data.mp4
07:43 -
004 Installing & Using Tanstack Query – And Seeing Why It’s Great!.mp4
16:32 -
003 React Query What & Why.mp4
05:59 -
002 Project Setup & Overview.mp4
04:08
25 – A (Pretty Deep Dive) Introduction to Next.js
-
050 Creating a NextJS Project.mp4
02:07 -
059 Outputting a List of Meetups.mp4
05:03 -
058 Preparing the Project Pages.mp4
03:42 -
057 Onwards to a bigger Project!.mp4
03:32 -
056 Linking Between Pages.mp4
07:13 -
055 Extracting Dynamic Parameter Values.mp4
04:07 -
054 Creating Dynamic Pages (with Parameters).mp4
03:36 -
053 Adding Nested Paths & Pages (Nested Routes).mp4
03:47 -
052 Adding First Pages.mp4
06:05 -
051 Analyzing the Created Project.mp4
02:52 -
060 Adding the New Meetup Form.mp4
03:54 -
049 About the NextJS Pages Router.mp4
02:55 -
048 Module Summary.mp4
04:25 -
047 Adding Dynamic Metadata.mp4
02:20 -
046 Adding Static Metadata.mp4
03:47 -
044 Don’t Store Files Locally On The Filesystem!.mp4
02:13 -
043 Triggering Cache Revalidations.mp4
03:57 -
042 Building For Production & Understanding NextJS Caching.mp4
06:06 -
041 Working with Server Action Responses & useFormState.mp4
08:05 -
069 Preparing Paths with getStaticPaths & Working With Fallback Pages.mp4
07:16 -
078 Summary.mp4
02:15 -
077 Using Fallback Pages & Re-deploying.mp4
04:13 -
076 Deploying Next.js Projects.mp4
12:26 -
075 Adding head Metadata.mp4
09:19 -
074 Getting Meetup Details Data & Preparing Pages.mp4
09:41 -
073 Getting Data From The Database.mp4
07:09 -
072 Sending Http Requests To Our API Routes.mp4
06:49 -
071 Working with MongoDB.mp4
09:32 -
070 Introducing API Routes.mp4
06:20 -
040 Adding Server-Side Input Validation.mp4
05:54 -
068 Working with Params for SSG Data Fetching.mp4
05:14 -
067 Exploring Server-side Rendering (SSR) with getServerSideProps.mp4
06:27 -
066 More on Static Site Generation (SSG).mp4
05:44 -
065 Data Fetching for Static Pages.mp4
08:56 -
064 How Pre-rendering Works & Which Problem We Face.mp4
05:52 -
063 Adding Custom Components & CSS Modules.mp4
10:00 -
062 Using Programmatic (Imperative) Navigation.mp4
03:47 -
061 The _app.js File & Layout Wrapper.mp4
06:16 -
011 Exercise Your Task.mp4
02:03 -
020 React Server Components vs Client Components – When To Use What.mp4
08:14 -
019 Preparing an Image Slideshow.mp4
03:25 -
018 Populating The Starting Page Content.mp4
04:18 -
017 Using More Custom Components.mp4
03:48 -
016 Optimizing Images with the NextJS Image Component.mp4
04:57 -
015 Styling NextJS Project Your Options & Using CSS Modules.mp4
06:00 -
014 Adding a Custom Component To A Layout.mp4
05:58 -
013 Revisiting The Concept Of Layouts.mp4
03:50 -
012 Exercise Solution.mp4
08:19 -
021 Using Client Components Efficiently.mp4
11:07 -
010 Onwards to the Main Project The Foodies App.mp4
01:23 -
009 Configuring Dynamic Routes & Using Route Parameters.mp4
06:17 -
007 Reserved File Names, Custom Components & How To Organize A NextJS Project.mp4
06:31 -
006 Working with Pages & Layouts.mp4
03:21 -
005 Navigating Between Pages.mp4
04:12 -
004 Adding Another Route via the Filesystem.mp4
03:06 -
003 Understanding File-based Routing & React Server Components.mp4
02:45 -
002 Creating a NextJS Project.mp4
04:16 -
030 Throwing Not Found Errors For Individual Meals.mp4
02:03 -
039 Managing the Form Submission Status with useFormStatus.mp4
05:30 -
038 Storing Uploaded Images & Storing Data in the Database.mp4
12:56 -
037 Creating a Slug & Sanitizing User Input for XSS Protection.mp4
03:20 -
036 Storing Server Actions in Separate Files.mp4
03:45 -
035 Introducing & Using Server Actions for Handling Form Submissions.mp4
09:02 -
033 Adding an Image Preview to the Picker.mp4
05:59 -
032 Getting Started with a Custom Image Picker Input Component.mp4
08:28 -
031 Getting Started with the Share Meal Form.mp4
01:53 -
001 Module Introduction.mp4
02:00 -
029 Loading & Rendering Meal Details via Dynamic Routes & Route Parameters.mp4
11:03 -
028 Handling Not Found States.mp4
01:57 -
027 Handling Errors.mp4
05:22 -
026 Using Suspense & Streamed Responses For Granular Loading State Management.mp4
05:54 -
025 Adding A Loading Page.mp4
03:59 -
024 Fetching Data By Leveraging NextJS & Fullstack Capabilities.mp4
07:17 -
023 Setting Up A SQLite Database.mp4
03:11 -
022 Outputting Meals Data & Images With Unknown Dimensions.mp4
10:31
26 – Animating React Apps
-
011 Reusing Animation States.mp4
03:28 -
021 Scroll-based Animations.mp4
15:44 -
020 Re-triggering Animations via Keys.mp4
04:52 -
019 Animating Shared Elements.mp4
04:15 -
018 Combining Animations With Layout Animations.mp4
03:55 -
017 Orchestrating Multi-Element Animations.mp4
10:05 -
016 Animating Layout Changes.mp4
03:34 -
015 Imperative Animations.mp4
07:28 -
014 Animating Colors & Working with Keyframes.mp4
04:03 -
013 Animating Staggered Lists.mp4
04:28 -
012 Nested Animations & Variants.mp4
07:46 -
001 Module Introduction.mp4
03:05 -
010 Making Elements Pop With Hover Animations.mp4
04:13 -
009 Animating Element Disappearances Removal.mp4
03:51 -
008 Adding Entry Animations.mp4
04:28 -
007 Animating Between Conditional Values.mp4
04:13 -
006 Framer Motion Basics & Fundamentals.mp4
08:29 -
005 Introducing Framer Motion.mp4
03:48 -
004 Animating with CSS Animations.mp4
05:38 -
003 Animating with CSS Transitions.mp4
07:40 -
002 Project Setup & Overview.mp4
01:42
27 – React Patterns & Best Practices
-
001 Module Introduction.mp4
00:55 -
002 Project Overview.mp4
00:50 -
003 Introducing Compound Components.mp4
11:04 -
004 Managing Multi-Component State with the Context API.mp4
10:57 -
005 Grouping Compound Components.mp4
06:29 -
006 Adding Extra Components For Reusability & Configurability.mp4
08:36 -
007 Sharing Cross-Component State When Working With Compound Components.mp4
06:06 -
008 Introducing & Using Render Props.mp4
06:14 -
009 Adding Search To A React App.mp4
04:18 -
010 Implementing a Search Functionality With Help Of Render Props.mp4
04:18 -
011 Handling Keys Dynamically.mp4
02:42 -
012 Working with Debouncing.mp4
07:10
28 – Replacing Redux with React Hooks
-
001 Module Introduction.mp4
01:01 -
003 Starting Project & Why You Would Replace Redux.mp4
04:19 -
004 Alternative Using the Context API.mp4
07:13 -
005 Toggling Favorites with the Context API.mp4
05:43 -
006 Context API Summary (and why NOT to use it instead of Redux).mp4
02:30 -
007 Getting Started with a Custom Hook as a Store.mp4
08:11 -
008 Finishing the Store Hook.mp4
05:53 -
009 Creating a Concrete Store.mp4
04:11 -
010 Using the Custom Store.mp4
05:40 -
011 Custom Hook Store Summary.mp4
03:13 -
012 Optimizing the Custom Hook Store.mp4
04:04 -
014 Wrap Up.mp4
02:00
29 – Testing React Apps (Unit Tests)
-
001 Module Introduction.mp4
01:23 -
002 What & Why.mp4
03:23 -
003 Understanding Different Kinds Of Tests.mp4
04:04 -
004 What To Test & How To Test.mp4
01:29 -
005 Understanding the Technical Setup & Involved Tools.mp4
02:39 -
006 Running a First Test.mp4
07:16 -
007 Writing Our First Test.mp4
10:14 -
008 Grouping Tests Together With Test Suites.mp4
02:14 -
009 Testing User Interaction & State.mp4
14:00 -
010 Testing Connected Components.mp4
03:18 -
011 Testing Asynchronous Code.mp4
09:11 -
012 Working With Mocks.mp4
08:30 -
013 Summary & Further Resources.mp4
03:46
20 – Advanced Redux
-
001 Module Introduction.mp4
00:39 -
002 Redux & Side Effects (and Asynchronous Code).mp4
03:27 -
003 Refresher Practice Part 12.mp4
20:12 -
004 Refresher Practice Part 22.mp4
18:00 -
006 Redux & Async Code.mp4
04:09 -
007 Frontend Code vs Backend Code.mp4
05:40 -
008 Where To Put Our Logic.mp4
08:59 -
009 Using useEffect with Redux.mp4
06:00 -
011 Handling Http States & Feedback with Redux.mp4
12:49 -
012 Using an Action Creator Thunk.mp4
12:07 -
013 Getting Started with Fetching Data.mp4
08:39 -
014 Finalizing the Fetching Logic.mp4
05:16 -
015 Exploring the Redux DevTools.mp4
05:37 -
016 Summary.mp4
01:52
31 – Optional React Summary & Core Feature Walkthrough
-
028 Understanding & Adding Routing.mp4
03:55 -
020 Adding Form Buttons.mp4
03:34 -
021 Handling Form Submission.mp4
06:18 -
022 Updating State Based On Previous State.mp4
05:30 -
023 Outputting List Data.mp4
06:38 -
024 Adding a Backend to the React SPA.mp4
06:10 -
025 Sending a POST HTTP Request.mp4
04:12 -
026 Handling Side Effects with useEffect().mp4
09:06 -
027 Handle Loading State.mp4
04:22 -
019 Adding a Shared Header & More State Management.mp4
07:51 -
029 Adding Routes.mp4
05:36 -
030 Working with Layout Routes.mp4
04:08 -
031 Refactoring Route Components & More Nesting.mp4
05:35 -
032 Linking & Navigating.mp4
08:09 -
033 Data Fetching via loader()s.mp4
09:07 -
034 Submitting Data with action()s.mp4
11:07 -
035 Dynamic Routes.mp4
08:41 -
036 Module Summary.mp4
01:25 -
010 Passing Data to Components with Props.mp4
06:15 -
002 What Is React & Why Would You Use It.mp4
05:37 -
003 React Projects – Requirements.mp4
02:09 -
004 Creating React Projects.mp4
03:27 -
005 Out Starting Project.mp4
03:28 -
006 Understanding How React Works.mp4
07:46 -
007 Building A First Custom Component.mp4
11:15 -
008 Outputting Dynamic Values.mp4
05:03 -
009 Reusing Components.mp4
06:00 -
001 Module Introduction.mp4
01:08 -
011 CSS Styling & CSS Modules.mp4
10:07 -
012 Exercise & Another Component.mp4
06:31 -
013 Preparing the App For State Management.mp4
03:45 -
014 Adding Event Listeners.mp4
07:52 -
015 Working with State.mp4
10:00 -
016 Lifting State Up.mp4
09:08 -
017 The Special children Prop.mp4
07:21 -
018 State & Conditional Content.mp4
08:59
32 – Course Roundup
-
001 Course Roundup.mp4
01:09
33 – Course Update & Old Course Content
-
001 Course Update Overview, Explanation & Migration Guide.mp4
15:48
34 – [BONUS OPTIONAL] React Basics & Working With Components
-
015 Outputting Dynamic Data & Working with Expressions in JSX.mp4
08:34 -
026 An Alternative Function Syntax.mp4
02:41 -
025 Organizing Component Files.mp4
03:07 -
024 A Closer Look At JSX.mp4
09:28 -
023 A First Summary.mp4
04:12 -
021 The Concept of Composition (children props).mp4
13:33 -
020 Splitting Components Into Multiple Components.mp4
11:19 -
019 Adding normal JavaScript Logic to Components.mp4
06:10 -
018 Alternative Ways of Passing & Receiving Handling props.mp4
05:09 -
016 Passing Data via props.mp4
13:04 -
002 Module Introduction.mp4
03:46 -
014 Adding Basic CSS Styling.mp4
04:57 -
013 Writing More Complex JSX Code.mp4
05:14 -
011 Building a First Custom Component.mp4
09:18 -
009 How React Works.mp4
04:31 -
008 Introducing JSX.mp4
04:03 -
007 Analyzing a Standard React Project.mp4
13:26 -
005 Creating a new React Project.mp4
02:08 -
004 React Code Is Written In A Declarative Way!.mp4
03:45 -
003 What Are Components And Why Is React All About Them.mp4
07:19
35 – [BONUS OPTIONAL] Time to Practice Component Basics
-
001 Module Introduction.mp4
01:33 -
002 The Starting Project & Your Tasks.mp4
04:47 -
004 Outputting Key Concepts Data.mp4
05:50 -
005 Identifying Possible Components.mp4
02:02 -
006 Creating & Using a Custom Component.mp4
04:35 -
007 Outsourcing Concept Items Into a Reusable Component.mp4
05:23
36 – [BONUS OPTIONAL] React State & Working with Events
-
012 Using One State Instead (And What’s Better).mp4
05:02 -
022 Controlled vs Uncontrolled Components & Stateless vs Stateful Components.mp4
05:33 -
021 Derived Computed State.mp4
06:54 -
020 Lifting The State Up.mp4
07:08 -
019 Child-to-Parent Component Communication (Bottom-up).mp4
14:17 -
018 Adding Two-Way Binding.mp4
03:01 -
017 Handling Form Submission.mp4
05:02 -
016 Alternative Creating A Shared Handler Function.mp4
06:16 -
013 Updating State That Depends On The Previous State.mp4
04:43 -
001 Module Introduction.mp4
02:30 -
011 Working with Multiple States.mp4
06:58 -
010 Listening to User Input.mp4
05:26 -
009 Adding Form Inputs.mp4
10:21 -
007 A Closer Look at the useState Hook.mp4
07:51 -
005 Working with State.mp4
11:17 -
004 How Component Functions Are Executed.mp4
05:51 -
002 Listening to Events & Working with Event Handlers.mp4
10:01
37 – [BONUS OPTIONAL] Rendering Lists & Conditional Content
-
001 Module Introduction.mp4
00:46 -
002 Rendering Lists of Data.mp4
07:28 -
004 Using Stateful Lists.mp4
04:45 -
005 Understanding Keys.mp4
07:12 -
006 Outputting Conditional Content.mp4
07:09 -
008 Adding Conditional Return Statements.mp4
05:39 -
009 Demo App Adding a Chart.mp4
07:43 -
010 Adding Dynamic Styles.mp4
07:47 -
011 Wrap Up & Next Steps.mp4
11:27
38 – [BONUS OPTIONAL] Time to Practice A Complete Practice Project
-
013 Adding a User Component.mp4
07:06 -
021 Managing the Error State.mp4
08:57 -
020 Adding The ErrorModal Component.mp4
08:04 -
019 Managing a List Of Users via State.mp4
09:27 -
018 Adding a Users List Component.mp4
10:45 -
017 Adding Validation & Resetting Logic.mp4
04:34 -
016 Managing the User Input State.mp4
04:57 -
015 Adding a re-usable Button Component.mp4
03:50 -
014 Adding a re-usable Card Component.mp4
08:37 -
001 Module Introduction.mp4
02:36 -
011 Introducing the Second Project.mp4
02:57 -
009 Adding CSS Modules.mp4
06:16 -
008 Outputting Results Conditionally.mp4
10:05 -
007 Lifting the State Up.mp4
08:52 -
006 Managing State.mp4
09:59 -
005 Handling Events.mp4
09:39 -
004 Splitting the App Into Components.mp4
07:24 -
002 The First Practice Project & Your Tasks.mp4
06:28
11 – Handling Side Effects & Working with the useEffect() Hook
-
001 Module Introduction & Starting Project.mp4
03:37 -
002 What’s a Side Effect A Thorough Example.mp4
07:22 -
003 A Potential Problem with Side Effects An Infinite Loop.mp4
02:48 -
004 Using useEffect for Handling (Some) Side Effects.mp4
05:30 -
005 Not All Side Effects Need useEffect.mp4
07:58 -
006 useEffect Not Needed Another Example.mp4
08:30 -
007 Preparing Another Use-Case For useEffect.mp4
04:10 -
008 Using useEffect for Syncing With Browser APIs.mp4
04:09 -
009 Understanding Effect Dependencies.mp4
03:00 -
011 Preparing Another Problem That Can Be Fixed with useEffect.mp4
04:54 -
012 Introducing useEffect’s Cleanup Function.mp4
04:49 -
013 The Problem with Object & Function Dependencies.mp4
08:09 -
014 The useCallback Hook.mp4
03:48 -
015 useEffect’s Cleanup Function Another Example.mp4
07:31 -
016 Optimizing State Updates.mp4
03:44
02 – JavaScript Refresher
-
012 Revisiting Objects & Classes.mp4
06:07 -
022 Reference vs Primitive Values.mp4
04:44 -
021 Defining Functions Inside Of Functions.mp4
01:55 -
020 Using Functions as Values.mp4
07:21 -
019 Manipulating the DOM – Not With React!.mp4
00:52 -
018 Revisiting Control Structures.mp4
05:28 -
017 The Spread Operator.mp4
03:13 -
015 Destructuring.mp4
05:16 -
013 Arrays & Array Methods like map().mp4
11:10 -
001 Module Introduction.mp4
01:49 -
010 Arrow Functions.mp4
02:11 -
008 Revisiting Functions & Parameters.mp4
08:14 -
007 Revisiting Operators.mp4
02:33 -
006 Revisiting Variables & Values.mp4
07:01 -
005 import & export.mp4
12:04 -
004 React Projects Use a Build Process.mp4
08:04 -
003 Adding JavaScript To A Page & How React Projects Differ.mp4
06:57 -
002 Starting Project.mp4
01:00
03 – React Essentials – Components, JSX, Props, State & More
-
019 Storing Component Style Files Next To Components.mp4
06:14 -
040 Module Summary.mp4
06:05 -
037 Outputting List Data Dynamically.mp4
07:40 -
035 CSS Styling & Dynamic Styling.mp4
05:12 -
033 Rendering Content Conditionally.mp4
08:02 -
031 Deriving & Outputting Data Based on State.mp4
04:50 -
029 Managing State & Using Hooks [Core Concept].mp4
10:28 -
028 How NOT to Update the UI – A Look Behind The Scenes of React [Core Concept].mp4
05:29 -
025 Passing Custom Arguments to Event Functions.mp4
05:36 -
023 Passing Functions as Values to Props.mp4
06:43 -
022 Reacting to Events [Core Concept].mp4
06:45 -
020 Component Composition The special children Prop [Core Concept].mp4
08:06 -
001 Module Introduction.mp4
01:48 -
018 Best Practice Storing Components in Files & Using a Good Project Structure.mp4
06:31 -
014 Alternative Props Syntaxes.mp4
06:44 -
013 Making Components Reusable with Props [Core Concept].mp4
09:06 -
011 Setting HTML Attributes Dynamically & Loading Image Files.mp4
04:41 -
010 Using & Outputting Dynamic Values [Core Concept].mp4
06:00 -
008 How React Handles Components & How It Builds A Component Tree [Core Concept].mp4
08:21 -
005 Creating & Using a First Custom Component.mp4
05:52 -
004 JSX & React Components [Core Concept].mp4
04:42 -
003 Setting Up The Starting Project.mp4
03:06 -
002 It’s All About Components! [Core Concept].mp4
06:07
04 – React Essentials – Deep Dive
-
033 Disabling Buttons Conditionally.mp4
02:37 -
025 Rendering Multi-Dimensional Lists.mp4
07:40 -
026 Best Practice Updating Object State Immutably.mp4
08:44 -
027 Lifting State Up [Core Concept].mp4
09:38 -
028 Avoid Intersecting States!.mp4
05:22 -
029 Prefer Computed Values & Avoid Unnecessary State Management.mp4
06:17 -
030 Deriving State From Props.mp4
07:22 -
031 Sharing State Across Components.mp4
04:12 -
032 Reducing State Management & Identifying Unnecessary State.mp4
05:52 -
023 User Input & Two-Way-Binding.mp4
07:42 -
034 Outsourcing Data Into A Separate File.mp4
04:28 -
035 Lifting Computed Values Up.mp4
05:19 -
036 Deriving Computed Values From Other Computed Values.mp4
05:29 -
037 Tic-Tac-Toe Game The Game Over Screen & Checking for a Draw.mp4
05:40 -
038 Why Immutability Matters – Always!.mp4
05:28 -
039 When NOT To Lift State Up.mp4
05:19 -
040 An Alternative To Lifting State Up.mp4
03:16 -
041 Final Polishing & Improving Components.mp4
05:15 -
012 Setting Default Prop Values.mp4
02:09 -
002 You Don’t Have To Use JSX!.mp4
04:37 -
003 Working with Fragments.mp4
05:40 -
005 When Should You Split Components.mp4
03:14 -
006 Splitting Components By Feature & State.mp4
06:54 -
007 Problem Props Are Not Forwarded To Inner Elements.mp4
06:44 -
008 Forwarding Props To Wrapped Elements.mp4
03:46 -
010 Working with Multiple JSX Slots.mp4
08:42 -
011 Setting Component Types Dynamically.mp4
08:44 -
001 Module Introduction.mp4
01:26 -
014 Onwards To The Next Project & Advanced Concepts.mp4
02:16 -
015 Not All Content Must Go Into Components.mp4
05:10 -
017 New Project First Steps Towards Our Tic-Tac-Toe Game.mp4
03:58 -
018 Concept Repetition Splitting Components & Building Reusable Components.mp4
04:13 -
019 Concept Repetition Working with State.mp4
07:57 -
020 Component Instances Work In Isolation!.mp4
02:03 -
021 Conditional Content & A Suboptimal Way Of Updating State.mp4
04:54 -
022 Best Practice Updating State Based On Old State Correctly.mp4
07:04
05 – React Essentials – Practice Project
-
001 Module Introduction & A Challenge For You!.mp4
05:09 -
002 Adding a Header Component.mp4
04:48 -
003 Getting Started with a User Input Component.mp4
05:07 -
004 Handling Events & Using Two-Way-Binding.mp4
10:28 -
005 Lifting State Up.mp4
08:59 -
006 Computing Values & Properly Handling Number Values.mp4
05:41 -
007 Outputting Results in a List & Deriving More Values.mp4
09:02 -
008 Outputting Content Conditionally.mp4
04:24
06 – Styling React Components
-
012 Creating Flexible Components with Styled Components.mp4
04:47 -
021 Tailwind CSS Pros & Cons.mp4
04:26 -
020 Migrating The Demo App to Tailwind CSS.mp4
04:15 -
019 Dynamic & Conditional Styling with Tailwind.mp4
05:50 -
018 Tailwind Media Queries & Pseudo Selectors.mp4
05:22 -
017 Adding & Using Tailwind CSS In A React Project.mp4
03:39 -
016 Introducing Tailwind CSS For React App Styling.mp4
11:26 -
015 Creating Reusable Components & Component Combinations.mp4
09:53 -
014 Styled Components Pseudo Selectors, Nested Rules & Media Queries.mp4
07:15 -
013 Dynamic & Conditional Styling with Styled Components.mp4
11:07 -
001 Module Introduction & Starting Project.mp4
03:57 -
011 Introducing Styled Components (Third-party Package).mp4
08:03 -
010 Scoping CSS Rules with CSS Modules.mp4
09:51 -
008 Dynamic & Conditional Styling with CSS Files & CSS Classes.mp4
05:41 -
006 Dynamic & Conditional Inline Styles.mp4
03:27 -
005 Styling React Apps with Inline Styles.mp4
06:24 -
004 Vanilla CSS Styles Are NOT Scoped To Components!.mp4
03:31 -
003 Styling React Apps with Vanilla CSS – Pros & Cons.mp4
02:32 -
002 Splitting CSS Code Across Multiple Files.mp4
03:22
07 – Debugging React Apps
-
001 Module Introduction.mp4
01:26 -
002 The Starting Project.mp4
01:16 -
003 Understanding React Error Messages.mp4
08:31 -
004 Using the Browser Debugger & Breakpoints.mp4
07:23 -
005 Understanding React’s Strict Mode.mp4
06:19 -
006 Using the React DevTools (Browser Extension).mp4
03:57
08 – Working with Refs & Portals
-
001 Module Introduction & Starting Project.mp4
03:18 -
002 Repetition Managing User Input with State (Two-Way-Binding).mp4
05:17 -
004 Introducing Refs Connecting & Accessing HTML Elements via Refs.mp4
06:04 -
005 Manipulating the DOM via Refs.mp4
02:14 -
007 Refs vs State Values.mp4
04:45 -
008 Adding Challenges to the Demo Project.mp4
04:49 -
009 Setting Timers & Managing State.mp4
04:55 -
010 Using Refs for More Than DOM Element Connections.mp4
08:30 -
012 Adding a Modal Component.mp4
06:39 -
013 Forwarding Refs to Custom Components.mp4
06:07 -
015 Exposing Component APIs via the useImperativeHandle Hook.mp4
07:13 -
017 More Examples When To Use Refs & State.mp4
08:50 -
018 Sharing State Across Components.mp4
04:58 -
019 Enhancing the Demo App Result Modal.mp4
02:12 -
021 Introducing & Understanding Portals.mp4
06:55
09 – Practice Project Project Management App (with Components, State, Refs & More)
-
001 Module Introduction & Starting Project.mp4
03:11 -
002 Adding a Projects Sidebar Component.mp4
02:29 -
003 Styling the Sidebar & Button with Tailwind CSS.mp4
05:00 -
004 Adding the New Project Component & A Reusable Input Component.mp4
05:58 -
005 Styling Buttons & Inputs with Tailwind CSS.mp4
07:03 -
006 Splitting Components to Split JSX & Tailwind Styles (for Higher Reusability).mp4
06:49 -
007 Managing State to Switch Between Components.mp4
08:19 -
008 Collecting User Input with Refs & Forwarded Refs.mp4
13:21 -
009 Handling Project Creation & Updating the UI.mp4
06:00 -
010 Validating User Input & Showing an Error Modal via useImperativeHandle.mp4
10:55 -
011 Styling the Modal via Tailwind CSS.mp4
05:46 -
012 Making Projects Selectable & Viewing Project Details.mp4
15:22 -
013 Handling Project Deletion.mp4
04:44 -
014 Adding Project Tasks & A Tasks Component.mp4
05:51 -
015 Managing Tasks & Understanding Prop Drilling.mp4
15:23 -
016 Clearing Tasks & Fixing Minor Bugs.mp4
06:40
10 – React’s Context API & useReducer – Advanced State Management
-
001 Module Introduction.mp4
01:54 -
002 Understanding Prop Drilling & Project Overview.mp4
05:58 -
003 Prop Drilling Component Composition as a Solution.mp4
05:17 -
004 Introducing the Context API.mp4
02:16 -
005 Creating & Providing The Context.mp4
07:34 -
006 Consuming the Context.mp4
05:48 -
007 Linking the Context to State.mp4
07:27 -
008 A Different Way Of Consuming Context.mp4
05:01 -
009 What Happens When Context Values Change.mp4
01:25 -
010 Migrating the Entire Demo Project to use the Context API.mp4
06:20 -
011 Outsourcing Context & State Into a Separate Provider Component.mp4
06:05 -
013 Introducing the useReducer Hook.mp4
10:06 -
014 Dispatching Actions & Editing State with useReducer.mp4
10:14
01 – Getting Started
-
01:07
-
02:58
-
003 ReactJS vs Vanilla JavaScript Why Use React.mp4
10:57 -
004 Editing Our First React App.mp4
04:22 -
005 About This Course & Course Outline.mp4
02:55 -
006 The Two Ways (Paths) Of Taking This Course.mp4
03:08 -
007 Getting The Most Out Of This Course.mp4
05:23 -
009 Creating React Projects.mp4
07:10 -
010 Why Do You Need A Special Project Setup.mp4
02:51
12 – Practice Project Building a Quiz App
-
001 Module Introduction & Starting Project.mp4
02:21 -
002 A First Component & Some State.mp4
07:03 -
003 Deriving Values, Outputting Questions & Registering Answers.mp4
12:53 -
004 Shuffling Answers & Adding Quiz Logic.mp4
06:57 -
005 Adding Question Timers.mp4
11:40 -
006 Working with Effect Dependencies & useCallback.mp4
07:14 -
007 Using Effect Cleanup Functions & Using Keys for Resetting Components.mp4
07:53 -
008 Highlighting Selected Answers & Managing More State.mp4
11:34 -
009 Splitting Components Up To Solve Problems.mp4
17:43 -
010 Moving Logic To Components That Actually Need It (Moving State Down).mp4
12:46 -
011 Setting Different Timers Based On The Selected Answer.mp4
08:07 -
012 Outputting Quiz Results.mp4
15:09
13 – A Look Behind The Scenes Of React & Optimization Techniques
-
001 Module Introduction.mp4
01:16 -
002 React Builds A Component Tree How React Works Behind The Scenes.mp4
08:41 -
003 Analyzing Component Function Executions via React’s DevTools Profiler.mp4
05:57 -
004 Avoiding Component Function Executions with memo().mp4
08:03 -
005 Avoiding Component Function Executions with Clever Structuring.mp4
06:06 -
006 Understanding the useCallback() Hook.mp4
07:05 -
007 Understanding the useMemo() Hook.mp4
05:58 -
008 React Uses A Virtual DOM – Time To Explore It!.mp4
07:15 -
009 Why Keys Matter When Managing State!.mp4
11:55 -
010 More Reasons For Why Keys Matter.mp4
02:53 -
011 Using Keys For Resetting Components.mp4
05:22 -
012 State Scheduling & Batching.mp4
05:49 -
013 Optimizing React with MillionJS.mp4
04:45
14 – An Alternative Way Of Building Components Class-based Components
-
001 Module Introduction.mp4
02:10 -
002 What & Why.mp4
04:52 -
003 Adding a First Class-based Component.mp4
06:54 -
004 Working with State & Events.mp4
11:38 -
005 The Component Lifecycle (Class-based Components Only!).mp4
05:20 -
006 Lifecycle Methods In Action.mp4
11:46 -
007 Class-based Components & Context.mp4
04:53 -
008 Class-based vs Functional Components A Summary.mp4
02:42 -
009 Introducing Error Boundaries.mp4
09:52
15 – Sending Http Requests (e.g. Connecting to a Database)
-
001 Module Introduction.mp4
02:53 -
002 How (Not) To Connect To A Database.mp4
06:20 -
003 Starting Project & Dummy Backend API.mp4
03:25 -
004 Preparing the App For Data Fetching.mp4
05:07 -
005 How NOT To Send HTTP Requests (And Why It’s Wrong).mp4
06:24 -
006 Sending HTTP Requests (GET Request) via useEffect.mp4
03:59 -
007 Using async await.mp4
02:25 -
008 Handling Loading States.mp4
05:27 -
009 Handling HTTP Errors.mp4
09:16 -
010 Transforming Fetched Data.mp4
05:31 -
011 Extracting Code & Improving Code Structure.mp4
02:53 -
012 Sending Data with POST Requests.mp4
12:00 -
013 Using Optimistic Updating.mp4
07:33 -
014 Deleting Data (via DELETE HTTP Requests).mp4
03:43 -
015 Practice Fetching Data.mp4
07:13
16 – Building Custom React Hooks
-
001 Module Introduction & Starting Project.mp4
02:07 -
002 Revisiting the Rules of Hooks & Why To Use Hooks.mp4
06:11 -
003 Creating a Custom Hook.mp4
05:32 -
004 Custom Hook Managing State & Returning State Values.mp4
10:50 -
005 Exposing Nested Functions From The Custom Hook.mp4
06:03 -
006 Using A Custom Hook in Multiple Components.mp4
04:25 -
007 Creating Flexible Custom Hooks.mp4
04:59
17 – Working with Forms & User Input
-
001 Module Introduction & Starting Project.mp4
02:04 -
002 What Are Forms & What’s Tricky About Them.mp4
03:59 -
003 Handling Form Submission.mp4
10:26 -
004 Managing & Getting User Input via State & Generic Handlers.mp4
11:12 -
005 Getting User Input via Refs.mp4
04:35 -
006 Getting Values via FormData & Native Browser APIs.mp4
09:03 -
007 Resetting Forms.mp4
04:38 -
008 Validating Input on Every Keystroke via State.mp4
06:58 -
009 Validating Input Upon Lost Focus (Blur).mp4
07:53 -
010 Validating Input Upon Form Submission.mp4
07:53 -
011 Validating Input via Built-in Validation Props.mp4
04:59 -
012 Mixing Custom & Built-in Validation Logic.mp4
04:28 -
013 Building & Using a Reusable Input Component.mp4
10:05 -
014 Outsourcing Validation Logic.mp4
03:22 -
015 Creating a Custom useInput Hook.mp4
15:11 -
016 Using Third-Party Form Libraries.mp4
01:31
18 – Practice Project Building a Food Order App
-
009 Adding a Reusable Modal Component with useEffect.mp4
07:26 -
017 Finishing Touches.mp4
14:07 -
016 Handling HTTP Loading & Error States.mp4
03:12 -
015 Adding a Custom HTTP Hook & Avoiding Common Errors.mp4
26:23 -
014 Sending a POST Request with Order Data.mp4
07:35 -
013 Handling Form Submission & Validation.mp4
06:03 -
012 Adding a Custom Input Component & Managing Modal Visibility.mp4
19:31 -
011 Working on the Cart Items.mp4
08:01 -
010 Opening the Cart in the Modal via a New Context.mp4
19:32 -
001 Module Introduction & Starting Project.mp4
04:14 -
008 Finishing & Using the Cart Context & Reducer.mp4
17:21 -
007 Getting Started with Cart Context & Reducer.mp4
20:09 -
006 Creating a Configurable & Flexible Custom Button Component.mp4
08:01 -
005 Formatting & Outputting Numbers as Currency.mp4
02:51 -
004 Adding a MealItem Component.mp4
07:39 -
003 Fetching Meals Data (GET HTTP Request).mp4
12:00 -
002 Planning the App & Adding a First Component.mp4
06:40
19 – Diving into Redux (An Alternative To The Context API)
-
013 Redux with Class-based Components.mp4
10:20 -
024 Summary.mp4
03:53 -
023 Splitting Our Code.mp4
05:03 -
022 Reading & Dispatching From A New Slice.mp4
06:56 -
021 Working with Multiple Slices.mp4
11:50 -
020 Migrating Everything To Redux Toolkit.mp4
06:19 -
019 Connecting Redux Toolkit State.mp4
04:47 -
018 Adding State Slices.mp4
08:11 -
017 Redux Challenges & Introducing Redux Toolkit.mp4
05:27 -
016 How To Work With Redux State Correctly.mp4
05:07 -
015 Working with Multiple State Properties.mp4
06:19 -
014 Attaching Payloads to Actions.mp4
04:15 -
001 Module Introduction.mp4
01:05 -
012 Dispatching Actions From Inside Components.mp4
03:33 -
011 Using Redux Data in React Components.mp4
05:08 -
010 Providing the Store.mp4
03:13 -
009 Creating a Redux Store for React.mp4
04:54 -
008 Preparing a new Project.mp4
01:59 -
007 More Redux Basics.mp4
03:04 -
006 Exploring The Core Redux Concepts.mp4
15:14 -
004 How Redux Works.mp4
05:48 -
003 Redux vs React Context.mp4
06:19 -
002 Another Look At State In React Apps.mp4
05:14
Student Ratings & Reviews
No Review Yet