002 What is React.js And Why Would You Use It.mp4

013 Working with Components & TypeScript.mp4

01:26

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

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

0/41

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

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

021 More loader() Data Usage.mp4

03:17

033 Working with action() Functions.mp4

09:07

034 Submitting Data Programmatically.mp4

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

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

010 Working with Navigation Links (NavLink).mp4

06:37

012 Defining & Using Dynamic Routes.mp4

03:20

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

0/13

002 How Authentication Works.mp4

01:10

09:07

003 Project Setup & Route Setup.mp4

004 Working with Query Parameters.mp4

07:34

005 Implementing the Auth Action.mp4

11:40

006 Validating User Input & Outputting Validation Errors.mp4

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

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

0/7

003 Understanding Lazy Loading.mp4

01:39

002 Deployment Steps.mp4

03:35

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

0/20

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

013 A Challenge! The Solution.mp4

16:37

012 A Challenge! The Problem.mp4

02:14

010 Fetching More Data & Testing the Mutation.mp4

01:46

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

0/75

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

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

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

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

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

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

014 Adding a Custom Component To A Layout.mp4

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

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

029 Loading & Rendering Meal Details via Dynamic Routes & Route Parameters.mp4

02:00

11:03

028 Handling Not Found States.mp4

01:57

027 Handling Errors.mp4

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

0/21

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

012 Nested Animations & Variants.mp4

07:46

010 Making Elements Pop With Hover Animations.mp4

03:05

009 Animating Element Disappearances Removal.mp4

03:51

008 Adding Entry Animations.mp4

007 Animating Between Conditional Values.mp4

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

002 Project Setup & Overview.mp4

01:42

27 – React Patterns & Best Practices

0/12

003 Introducing Compound Components.mp4

00:55

002 Project Overview.mp4

00:50

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

010 Implementing a Search Functionality With Help Of Render Props.mp4

011 Handling Keys Dynamically.mp4

012 Working with Debouncing.mp4

07:10

28 – Replacing Redux with React Hooks

0/12

003 Starting Project & Why You Would Replace Redux.mp4

01:01

04:19

004 Alternative Using the Context API.mp4

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

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)

0/13

003 Understanding Different Kinds Of Tests.mp4

01:23

002 What & Why.mp4

03:23

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

20 – Advanced Redux

0/14

002 Redux & Side Effects (and Asynchronous Code).mp4

00:39

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

008 Where To Put Our Logic.mp4

08:59

009 Using useEffect with Redux.mp4

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

0/36

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

026 Handling Side Effects with useEffect().mp4

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

011 CSS Styling & CSS Modules.mp4

01:08

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

0/1

001 Course Roundup.mp4

01:09

33 – Course Update & Old Course Content

0/1

001 Course Update Overview, Explanation & Migration Guide.mp4

15:48

34 – [BONUS OPTIONAL] React Basics & Working With Components

0/20

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

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

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

0/6

002 The Starting Project & Your Tasks.mp4

01:33

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

0/17

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

011 Working with Multiple States.mp4

02:30

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

0/9

002 Rendering Lists of Data.mp4

00:46

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

0/18

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

011 Introducing the Second Project.mp4

02:36

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

0/15

002 What’s a Side Effect A Thorough Example.mp4

03:37

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

0/18

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

008 Revisiting Functions & Parameters.mp4

01:49

010 Arrow Functions.mp4

02:11

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

0/23

019 Storing Component Style Files Next To Components.mp4

06:14

040 Module Summary.mp4

037 Outputting List Data Dynamically.mp4

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

018 Best Practice Storing Components in Files & Using a Good Project Structure.mp4

01:48

06:31

014 Alternative Props Syntaxes.mp4

06:44

013 Making Components Reusable with Props [Core Concept].mp4

011 Setting HTML Attributes Dynamically & Loading Image Files.mp4

04:41

010 Using & Outputting Dynamic Values [Core Concept].mp4

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

0/36

033 Disabling Buttons Conditionally.mp4

02:37

025 Rendering Multi-Dimensional Lists.mp4

026 Best Practice Updating Object State Immutably.mp4

08:44

027 Lifting State Up [Core Concept].mp4

09:38

028 Avoid Intersecting States!.mp4

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

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

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

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

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

010 Working with Multiple JSX Slots.mp4

08:42

011 Setting Component Types Dynamically.mp4

08:44

014 Onwards To The Next Project & Advanced Concepts.mp4

01:26

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

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

0/8

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

0/19

012 Creating Flexible Components with Styled Components.mp4

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

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

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

0/6

002 The Starting Project.mp4

01:26

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

006 Using the React DevTools (Browser Extension).mp4

08 – Working with Refs & Portals

0/15

002 Repetition Managing User Input with State (Two-Way-Binding).mp4

03:18

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

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)

0/16

002 Adding a Projects Sidebar Component.mp4

03:11

02:29

003 Styling the Sidebar & Button with Tailwind CSS.mp4

05:00

004 Adding the New Project Component & A Reusable Input Component.mp4

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

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

0/13

002 Understanding Prop Drilling & Project Overview.mp4

01:54

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

013 Introducing the useReducer Hook.mp4

10:06

014 Dispatching Actions & Editing State with useReducer.mp4

10:14

01 – Getting Started

0/9

001 Welcome To The Course!.mp4

01:07

002 What is React.js And Why Would You Use It.mp4

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

0/12

002 A First Component & Some State.mp4

02:21

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

0/13

002 React Builds A Component Tree How React Works Behind The Scenes.mp4

01:16

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

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

011 Using Keys For Resetting Components.mp4

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

0/9

003 Adding a First Class-based Component.mp4

02:10

002 What & Why.mp4

04:52

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

009 Introducing Error Boundaries.mp4

09:52

15 – Sending Http Requests (e.g. Connecting to a Database)

0/15

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

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

16 – Building Custom React Hooks

0/7

002 Revisiting the Rules of Hooks & Why To Use Hooks.mp4

02:07

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

0/16

002 What Are Forms & What’s Tricky About Them.mp4

02:04

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

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

0/17

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

008 Finishing & Using the Cart Context & Reducer.mp4

04:14

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)

0/23

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

019 Connecting Redux Toolkit State.mp4

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

014 Attaching Payloads to Actions.mp4

04:15

012 Dispatching Actions From Inside Components.mp4

01:05

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