React – The Complete Guide 2023 (incl. React Router & Redux)

About Course

Learn React.js from scratch with this comprehensive course. Get a complete understanding of React, from the basics to advanced concepts, including components, props, state, hooks, and Redux. This course is taught by an experienced instructor and includes tons of examples, demos, and real-world projects.

**Key Features:**

Thorough introduction to React.js
Components, props & dynamic data binding
Working with user events and state
React Hooks (in-depth)
Styling React apps with Styled Components and CSS Modules
Redux & Redux Toolkit
Routing with React Router
Deploying React Apps
Tons of examples and demo projects
JavaScript refresher included

**This course is completely free and available on Theetay. It is taught on platforms like Udemy, Udacity, Coursera, MasterClass, NearPeer, and others. Enroll today and start your journey as a React developer!**

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 750,000 students in this course & more than 2,500,000 students I taught across all my courses
Build multiple demo projects & explore realistic examples
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
Build fullstack React apps with NextJS
Get started with React Unit Testing

Course Content

01 – Getting Started

A Message from the Professor
001 Welcome To The Course!.mp4

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

00:00
003 ReactJS vs Vanilla JavaScript Why Use React.mp4

00:00
004 Editing Our First React App.mp4

00:00
005 About This Course _ Course Outline.mp4

00:00
006 The Two Ways (Paths) Of Taking This Course.mp4

00:00
007 Getting The Most Out Of This Course.mp4

00:00
008 Join our Online Learning Community.html

00:00
009 Creating React Projects.mp4

00:00
010 Why Do You Need A Special Project Setup.mp4

00:00
external-links.txt

00:00
Section Quiz

02 – JavaScript Refresher

001 Module Introduction.mp4

00:00
002 Starting Project.mp4

00:00
003 Adding JavaScript To A Page _ How React Projects Differ.mp4

00:00
004 React Projects Use a Build Process.mp4

00:00
005 import _ export.mp4

00:00
006 Revisiting Variables _ Values.mp4

00:00
007 Revisiting Operators.mp4

00:00
008 Revisiting Functions _ Parameters.mp4

00:00
010 Arrow Functions.mp4

00:00
011 More on the Arrow Function Syntax.html

00:00
012 Revisiting Objects _ Classes.mp4

00:00
013 Arrays _ Array Methods like map().mp4

00:00
015 Destructuring.mp4

00:00
016 Destructuring in Function Parameter Lists.html

00:00
017 The Spread Operator.mp4

00:00
018 Revisiting Control Structures.mp4

00:00
019 Manipulating the DOM – Not With React!.mp4

00:00
020 Using Functions as Values.mp4

00:00
021 Defining Functions Inside Of Functions.mp4

00:00
022 Reference vs Primitive Values.mp4

00:00
023 Next-Gen JavaScript – Summary.html

00:00
024 JS Array Functions.html

00:00
025 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

03 – React Essentials – Components, JSX, Props, State _ More

001 Module Introduction.mp4

00:00
002 It_s All About Components! (Core Concept).mp4

00:00
003 Setting Up The Starting Project.mp4

00:00
004 JSX _ React Components (Core Concept).mp4

00:00
005 Creating _ Using a First Custom Component.mp4

00:00
006 A Closer Look Components _ File Extensions.html

00:00
008 How React Handles Components _ How It Builds A Component Tree (Core Concept).mp4

00:00
010 Using _ Outputting Dynamic Values (Core Concept).mp4

00:00
011 Setting HTML Attributes Dynamically _ Loading Image Files.mp4

00:00
013 Making Components Reusable with Props (Core Concept).mp4

00:00
014 Alternative Props Syntaxes.mp4

00:00
015 More Prop Syntaxes.html

00:00
018 Best Practice Storing Components in Files _ Using a Good Project Structure.mp4

00:00
019 Storing Component Style Files Next To Components.mp4

00:00
020 Component Composition The special children Prop (Core Concept).mp4

00:00
022 Reacting to Events (Core Concept).mp4

00:00
023 Passing Functions as Values to Props.mp4

00:00
025 Passing Custom Arguments to Event Functions.mp4

00:00
028 How NOT to Update the UI – A Look Behind The Scenes of React (Core Concept).mp4

00:00
029 Managing State _ Using Hooks (Core Concept).mp4

00:00
031 Deriving _ Outputting Data Based on State.mp4

00:00
033 Rendering Content Conditionally.mp4

00:00
035 CSS Styling _ Dynamic Styling.mp4

00:00
037 Outputting List Data Dynamically.mp4

00:00
040 Module Summary.mp4

00:00
external-links.txt

00:00
Section Quiz

04 – React Essentials – Deep Dive

001 Module Introduction.mp4

00:00
002 You Don_t Have To Use JSX!.mp4

00:00
003 Working with Fragments.mp4

00:00
005 When Should You Split Components.mp4

00:00
006 Splitting Components By Feature _ State.mp4

00:00
007 Problem Props Are Not Forwarded To Inner Elements.mp4

00:00
008 Forwarding Props To Wrapped Elements.mp4

00:00
010 Working with Multiple JSX Slots.mp4

00:00
011 Setting Component Types Dynamically.mp4

00:00
012 Setting Default Prop Values.mp4

00:00
014 Onwards To The Next Project _ Advanced Concepts.mp4

00:00
015 Not All Content Must Go Into Components.mp4

00:00
016 Closer Look public vs assets for Image Storage.html

00:00
017 New Project First Steps Towards Our Tic-Tac-Toe Game.mp4

00:00
018 Concept Repetition Splitting Components _ Building Reusable Components.mp4

00:00
019 Concept Repetition Working with State.mp4

00:00
020 Component Instances Work In Isolation!.mp4

00:00
021 Conditional Content _ A Suboptimal Way Of Updating State.mp4

00:00
022 Best Practice Updating State Based On Old State Correctly.mp4

00:00
023 User Input _ Two-Way-Binding.mp4

00:00
025 Rendering Multi-Dimensional Lists.mp4

00:00
026 Best Practice Updating Object State Immutably.mp4

00:00
027 Lifting State Up (Core Concept).mp4

00:00
028 Avoid Intersecting States!.mp4

00:00
029 Prefer Computed Values _ Avoid Unnecessary State Management.mp4

00:00
030 Deriving State From Props.mp4

00:00
031 Sharing State Across Components.mp4

00:00
032 Reducing State Management _ Identifying Unnecessary State.mp4

00:00
033 Disabling Buttons Conditionally.mp4

00:00
034 Outsourcing Data Into A Separate File.mp4

00:00
035 Lifting Computed Values Up.mp4

00:00
036 Deriving Computed Values From Other Computed Values.mp4

00:00
037 Tic-Tac-Toe Game The Game Over Screen _ Checking for a Draw.mp4

00:00
038 Why Immutability Matters – Always!.mp4

00:00
039 When NOT To Lift State Up.mp4

00:00
040 An Alternative To Lifting State Up.mp4

00:00
041 Final Polishing _ Improving Components.mp4

00:00
external-links.txt

00:00
Section Quiz

05 – React Essentials – Practice Project

001 Module Introduction _ A Challenge For You!.mp4

00:00
002 Adding a Header Component.mp4

00:00
003 Getting Started with a User Input Component.mp4

00:00
004 Handling Events _ Using Two-Way-Binding.mp4

00:00
005 Lifting State Up.mp4

00:00
006 Computing Values _ Properly Handling Number Values.mp4

00:00
007 Outputting Results in a List _ Deriving More Values.mp4

00:00
008 Outputting Content Conditionally.mp4

00:00
external-links.txt

00:00
Section Quiz

06 – Styling React Components

001 Module Introduction _ Starting Project.mp4

00:00
002 Splitting CSS Code Across Multiple Files.mp4

00:00
003 Styling React Apps with Vanilla CSS – Pros _ Cons.mp4

00:00
004 Vanilla CSS Styles Are NOT Scoped To Components!.mp4

00:00
005 Styling React Apps with Inline Styles.mp4

00:00
006 Dynamic _ Conditional Inline Styles.mp4

00:00
008 Dynamic _ Conditional Styling with CSS Files _ CSS Classes.mp4

00:00
010 Scoping CSS Rules with CSS Modules.mp4

00:00
011 Introducing Styled Components (Third-party Package).mp4

00:00
012 Creating Flexible Components with Styled Components.mp4

00:00
013 Dynamic _ Conditional Styling with Styled Components.mp4

00:00
014 Styled Components Pseudo Selectors, Nested Rules _ Media Queries.mp4

00:00
015 Creating Reusable Components _ Component Combinations.mp4

00:00
016 Introducing Tailwind CSS For React App Styling.mp4

00:00
017 Adding _ Using Tailwind CSS In A React Project.mp4

00:00
018 Tailwind Media Queries _ Pseudo Selectors.mp4

00:00
019 Dynamic _ Conditional Styling with Tailwind.mp4

00:00
020 Migrating The Demo App to Tailwind CSS.mp4

00:00
021 Tailwind CSS Pros _ Cons.mp4

00:00
022 — LEGACY CONTENT BELOW —.html

00:00
023 Module Introduction.mp4

00:00
024 Setting Dynamic Inline Styles.mp4

00:00
026 Setting CSS Classes Dynamically.mp4

00:00
028 Introducing Styled Components.mp4

00:00
029 Styled Components _ Dynamic Props.mp4

00:00
030 Styled Components _ Media Queries.mp4

00:00
031 Using CSS Modules.mp4

00:00
032 Dynamic Styles with CSS Modules.mp4

00:00
033 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

07 – Debugging React Apps

08 – Working with Refs _ Portals

001 Module Introduction _ Starting Project.mp4

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

00:00
003 Repetition Fragments.html

00:00
004 Introducing Refs Connecting _ Accessing HTML Elements via Refs.mp4

00:00
005 Manipulating the DOM via Refs.mp4

00:00
007 Refs vs State Values.mp4

00:00
008 Adding Challenges to the Demo Project.mp4

00:00
009 Setting Timers _ Managing State.mp4

00:00
010 Using Refs for More Than DOM Element Connections.mp4

00:00
012 Adding a Modal Component.mp4

00:00
013 Forwarding Refs to Custom Components.mp4

00:00
015 Exposing Component APIs via the useImperativeHandle Hook.mp4

00:00
017 More Examples When To Use Refs _ State.mp4

00:00
018 Sharing State Across Components.mp4

00:00
019 Enhancing the Demo App Result Modal.mp4

00:00
020 Closing the Modal via the ESC (Escape) Key.html

00:00
021 Introducing _ Understanding Portals.mp4

00:00
023 — LEGACY CONTENT BELOW —.html

00:00
024 Module Introduction.mp4

00:00
025 JSX Limitations _ Workarounds.mp4

00:00
026 Creating a Wrapper Component.mp4

00:00
027 React Fragments.mp4

00:00
028 Introducing React Portals.mp4

00:00
029 Working with Portals.mp4

00:00
030 Working with refs.mp4

00:00
031 Controlled vs Uncontrolled Components.mp4

00:00
032 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

09 – Practice Project Project Management App (with Components, State, Refs _ More)

001 Module Introduction _ Starting Project.mp4

00:00
002 Adding a Projects Sidebar Component.mp4

00:00
003 Styling the Sidebar _ Button with Tailwind CSS.mp4

00:00
004 Adding the New Project Component _ A Reusable Input Component.mp4

00:00
005 Styling Buttons _ Inputs with Tailwind CSS.mp4

00:00
006 Splitting Components to Split JSX _ Tailwind Styles (for Higher Reusability).mp4

00:00
007 Managing State to Switch Between Components.mp4

00:00
008 Collecting User Input with Refs _ Forwarded Refs.mp4

00:00
009 Handling Project Creation _ Updating the UI.mp4

00:00
010 Validating User Input _ Showing an Error Modal via useImperativeHandle.mp4

00:00
011 Styling the Modal via Tailwind CSS.mp4

00:00
012 Making Projects Selectable _ Viewing Project Details.mp4

00:00
013 Handling Project Deletion.mp4

00:00
014 Adding Project Tasks _ A Tasks Component.mp4

00:00
015 Managing Tasks _ Understanding Prop Drilling.mp4

00:00
016 Clearing Tasks _ Fixing Minor Bugs.mp4

00:00
external-links.txt

00:00
Section Quiz

10 – React_s Context API _ useReducer – Advanced State Management

001 Module Introduction.mp4

00:00
002 Understanding Prop Drilling _ Project Overview.mp4

00:00
003 Prop Drilling Component Composition as a Solution.mp4

00:00
004 Introducing the Context API.mp4

00:00
005 Creating _ Providing The Context.mp4

00:00
006 Consuming the Context.mp4

00:00
007 Linking the Context to State.mp4

00:00
008 A Different Way Of Consuming Context.mp4

00:00
009 What Happens When Context Values Change.mp4

00:00
010 Migrating the Entire Demo Project to use the Context API.mp4

00:00
011 Outsourcing Context _ State Into a Separate Provider Component.mp4

00:00
013 Introducing the useReducer Hook.mp4

00:00
014 Dispatching Actions _ Editing State with useReducer.mp4

00:00
external-links.txt

00:00
Section Quiz

11 – Handling Side Effects _ Working with the useEffect() Hook

001 Module Introduction _ Starting Project.mp4

00:00
002 What_s a Side Effect A Thorough Example.mp4

00:00
003 A Potential Problem with Side Effects An Infinite Loop.mp4

00:00
004 Using useEffect for Handling (Some) Side Effects.mp4

00:00
005 Not All Side Effects Need useEffect.mp4

00:00
006 useEffect Not Needed Another Example.mp4

00:00
007 Preparing Another Use-Case For useEffect.mp4

00:00
008 Using useEffect for Syncing With Browser APIs.mp4

00:00
009 Understanding Effect Dependencies.mp4

00:00
010 Fixing a Small Bug.html

00:00
011 Preparing Another Problem That Can Be Fixed with useEffect.mp4

00:00
012 Introducing useEffect_s Cleanup Function.mp4

00:00
013 The Problem with Object _ Function Dependencies.mp4

00:00
014 The useCallback Hook.mp4

00:00
015 useEffect_s Cleanup Function Another Example.mp4

00:00
016 Optimizing State Updates.mp4

00:00
017 — LEGACY CONTENT BELOW —.html

00:00
018 Module Introduction.mp4

00:00
019 What are Side Effects _ Introducing useEffect.mp4

00:00
020 Using the useEffect() Hook.mp4

00:00
021 useEffect _ Dependencies.mp4

00:00
022 What to add _ Not to add as Dependencies.html

00:00
023 Using the useEffect Cleanup Function.mp4

00:00
024 useEffect Summary.mp4

00:00
025 Introducing useReducer _ Reducers In General.mp4

00:00
026 Using the useReducer() Hook.mp4

00:00
027 useReducer _ useEffect.mp4

00:00
028 Adding Nested Properties As Dependencies To useEffect.html

00:00
029 useReducer vs useState for State Management.mp4

00:00
030 Introducing React Context (Context API).mp4

00:00
031 Using the React Context API.mp4

00:00
032 Tapping Into Context with the useContext Hook.mp4

00:00
033 Making Context Dynamic.mp4

00:00
034 Building _ Using a Custom Context Provider Component.mp4

00:00
035 React Context Limitations.mp4

00:00
036 Learning the Rules of Hooks.mp4

00:00
037 Refactoring an Input Component.mp4

00:00
038 Diving into Forward Refs.mp4

00:00
039 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

12 – Practice Project Building a Quiz App

001 Module Introduction _ Starting Project.mp4

00:00
002 A First Component _ Some State.mp4

00:00
003 Deriving Values, Outputting Questions _ Registering Answers.mp4

00:00
004 Shuffling Answers _ Adding Quiz Logic.mp4

00:00
005 Adding Question Timers.mp4

00:00
006 Working with Effect Dependencies _ useCallback.mp4

00:00
007 Using Effect Cleanup Functions _ Using Keys for Resetting Components.mp4

00:00
008 Highlighting Selected Answers _ Managing More State.mp4

00:00
009 Splitting Components Up To Solve Problems.mp4

00:00
010 Moving Logic To Components That Actually Need It (Moving State Down).mp4

00:00
011 Setting Different Timers Based On The Selected Answer.mp4

00:00
012 Outputting Quiz Results.mp4

00:00
013 — LEGACY CONTENT BELOW —.html

00:00
014 Module Introduction.mp4

00:00
015 Starting Setup.mp4

00:00
016 Adding a Header Component.mp4

00:00
017 Adding the Cart Button Component.mp4

00:00
018 Adding a Meals Component.mp4

00:00
019 Adding Individual Meal Items _ Displaying Them.mp4

00:00
020 Adding a Form.mp4

00:00
021 Fixing Form Input IDs.html

00:00
022 Working on the Shopping Cart Component.mp4

00:00
023 Adding a Modal via a React Portal.mp4

00:00
024 Managing Cart _ Modal State.mp4

00:00
025 Adding a Cart Context.mp4

00:00
026 Using the Context.mp4

00:00
027 Adding a Cart Reducer.mp4

00:00
028 Working with Refs _ Forward Refs.mp4

00:00
029 Outputting Cart Items.mp4

00:00
030 Working on a More Complex Reducer Logic.mp4

00:00
031 Making Items Removable.mp4

00:00
032 Using the useEffect Hook.mp4

00:00
033 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

13 – A Look Behind The Scenes Of React _ Optimization Techniques

001 Module Introduction.mp4

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

00:00
003 Analyzing Component Function Executions via React_s DevTools Profiler.mp4

00:00
004 Avoiding Component Function Executions with memo().mp4

00:00
005 Avoiding Component Function Executions with Clever Structuring.mp4

00:00
006 Understanding the useCallback() Hook.mp4

00:00
007 Understanding the useMemo() Hook.mp4

00:00
008 React Uses A Virtual DOM – Time To Explore It!.mp4

00:00
009 Why Keys Matter When Managing State!.mp4

00:00
010 More Reasons For Why Keys Matter.mp4

00:00
011 Using Keys For Resetting Components.mp4

00:00
012 State Scheduling _ Batching.mp4

00:00
013 Optimizing React with MillionJS.mp4

00:00
external-links.txt

00:00

14 – An Alternative Way Of Building Components Class-based Components

001 Module Introduction.mp4

00:00
002 What _ Why.mp4

00:00
003 Adding a First Class-based Component.mp4

00:00
004 Working with State _ Events.mp4

00:00
005 The Component Lifecycle (Class-based Components Only!).mp4

00:00
006 Lifecycle Methods In Action.mp4

00:00
007 Class-based Components _ Context.mp4

00:00
008 Class-based vs Functional Components A Summary.mp4

00:00
009 Introducing Error Boundaries.mp4

00:00
010 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

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

001 Module Introduction.mp4

00:00
002 How (Not) To Connect To A Database.mp4

00:00
003 Starting Project _ Dummy Backend API.mp4

00:00
004 Preparing the App For Data Fetching.mp4

00:00
005 How NOT To Send HTTP Requests (And Why It_s Wrong).mp4

00:00
006 Sending HTTP Requests (GET Request) via useEffect.mp4

00:00
007 Using async await.mp4

00:00
008 Handling Loading States.mp4

00:00
009 Handling HTTP Errors.mp4

00:00
010 Transforming Fetched Data.mp4

00:00
011 Extracting Code _ Improving Code Structure.mp4

00:00
012 Sending Data with POST Requests.mp4

00:00
013 Using Optimistic Updating.mp4

00:00
014 Deleting Data (via DELETE HTTP Requests).mp4

00:00
015 Practice Fetching Data.mp4

00:00
016 — LEGACY CONTENT BELOW —.html

00:00
017 Module Introduction.mp4

00:00
018 How To (Not) Connect To A Database.mp4

00:00
019 Using the Star Wars API.html

00:00
020 Our Starting App _ Backend.mp4

00:00
021 Sending a GET Request.mp4

00:00
022 Using async await.mp4

00:00
023 Handling Loading _ Data States.mp4

00:00
024 Handling Http Errors.mp4

00:00
025 Using useEffect() For Requests.mp4

00:00
026 Preparing The Project For The Next Steps.mp4

00:00
027 Sending a POST Request.mp4

00:00
028 Wrap Up.mp4

00:00
029 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

16 – Building Custom React Hooks

001 Module Introduction _ Starting Project.mp4

00:00
002 Revisiting the Rules of Hooks _ Why To Use Hooks.mp4

00:00
003 Creating a Custom Hook.mp4

00:00
004 Custom Hook Managing State _ Returning State Values.mp4

00:00
005 Exposing Nested Functions From The Custom Hook.mp4

00:00
006 Using A Custom Hook in Multiple Components.mp4

00:00
007 Creating Flexible Custom Hooks.mp4

00:00
008 — LEGACY CONTENT BELOW —.html

00:00
009 Module Introduction.mp4

00:00
010 What are Custom Hooks.mp4

00:00
011 Creating a Custom React Hook Function.mp4

00:00
012 Using Custom Hooks.mp4

00:00
013 Configuring Custom Hooks.mp4

00:00
014 Onwards To A More Realistic Example.mp4

00:00
015 Building a Custom Http Hook.mp4

00:00
016 Using the Custom Http Hook.mp4

00:00
017 Adjusting the Custom Hook Logic.mp4

00:00
018 Using The Custom Hook In More Components.mp4

00:00
019 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

17 – Working with Forms _ User Input

001 Module Introduction _ Starting Project.mp4

00:00
002 What Are Forms _ What_s Tricky About Them.mp4

00:00
003 Handling Form Submission.mp4

00:00
004 Managing _ Getting User Input via State _ Generic Handlers.mp4

00:00
005 Getting User Input via Refs.mp4

00:00
006 Getting Values via FormData _ Native Browser APIs.mp4

00:00
007 Resetting Forms.mp4

00:00
008 Validating Input on Every Keystroke via State.mp4

00:00
009 Validating Input Upon Lost Focus (Blur).mp4

00:00
010 Validating Input Upon Form Submission.mp4

00:00
011 Validating Input via Built-in Validation Props.mp4

00:00
012 Mixing Custom _ Built-in Validation Logic.mp4

00:00
013 Building _ Using a Reusable Input Component.mp4

00:00
014 Outsourcing Validation Logic.mp4

00:00
015 Creating a Custom useInput Hook.mp4

00:00
016 Using Third-Party Form Libraries.mp4

00:00
017 — LEGACY CONTENT BELOW —.html

00:00
018 Module Introduction.mp4

00:00
019 Our Starting Setup.mp4

00:00
020 What_s So Complex About Forms.mp4

00:00
021 Dealing With Form Submission _ Getting User Input Values.mp4

00:00
022 Adding Basic Validation.mp4

00:00
023 Providing Validation Feedback.mp4

00:00
024 Handling the was touched State.mp4

00:00
025 React To Lost Focus.mp4

00:00
026 Refactoring _ Deriving States.mp4

00:00
027 Managing The Overall Form Validity.mp4

00:00
028 Adding A Custom Input Hook.mp4

00:00
029 Re-Using The Custom Hook.mp4

00:00
030 A Challenge For You!.mp4

00:00
031 Applying Our Hook _ Knowledge To A New Form.mp4

00:00
032 Summary.mp4

00:00
033 Bonus Using useReducer().mp4

00:00
034 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

18 – Practice Project Building a Food Order App

001 Module Introduction _ Starting Project.mp4

00:00
002 Planning the App _ Adding a First Component.mp4

00:00
003 Fetching Meals Data (GET HTTP Request).mp4

00:00
004 Adding a MealItem Component.mp4

00:00
005 Formatting _ Outputting Numbers as Currency.mp4

00:00
006 Creating a Configurable _ Flexible Custom Button Component.mp4

00:00
007 Getting Started with Cart Context _ Reducer.mp4

00:00
008 Finishing _ Using the Cart Context _ Reducer.mp4

00:00
009 Adding a Reusable Modal Component with useEffect.mp4

00:00
010 Opening the Cart in the Modal via a New Context.mp4

00:00
011 Working on the Cart Items.mp4

00:00
012 Adding a Custom Input Component _ Managing Modal Visibility.mp4

00:00
013 Handling Form Submission _ Validation.mp4

00:00
014 Sending a POST Request with Order Data.mp4

00:00
015 Adding a Custom HTTP Hook _ Avoiding Common Errors.mp4

00:00
016 Handling HTTP Loading _ Error States.mp4

00:00
017 Finishing Touches.mp4

00:00
018 — LEGACY CONTENT BELOW —.html

00:00
019 Module Introduction.mp4

00:00
020 Moving Meals Data To The Backend.mp4

00:00
021 Fetching Meals via Http.mp4

00:00
022 Handling the Loading State.mp4

00:00
023 Handling Errors.mp4

00:00
024 Adding A Checkout Form.mp4

00:00
025 Reading Form Values.mp4

00:00
026 Adding Form Validation.mp4

00:00
027 Submitting _ Sending Cart Data.mp4

00:00
028 Adding Better User Feedback.mp4

00:00
029 Summary.mp4

00:00
030 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

19 – Diving into Redux (An Alternative To The Context API)

001 Module Introduction.mp4

00:00
002 Another Look At State In React Apps.mp4

00:00
003 Redux vs React Context.mp4

00:00
004 How Redux Works.mp4

00:00
005 MUST READ Redux createStore() is (not) deprecated.html

00:00
006 Exploring The Core Redux Concepts.mp4

00:00
007 More Redux Basics.mp4

00:00
008 Preparing a new Project.mp4

00:00
009 Creating a Redux Store for React.mp4

00:00
010 Providing the Store.mp4

00:00
011 Using Redux Data in React Components.mp4

00:00
012 Dispatching Actions From Inside Components.mp4

00:00
013 Redux with Class-based Components.mp4

00:00
014 Attaching Payloads to Actions.mp4

00:00
015 Working with Multiple State Properties.mp4

00:00
016 How To Work With Redux State Correctly.mp4

00:00
017 Redux Challenges _ Introducing Redux Toolkit.mp4

00:00
018 Adding State Slices.mp4

00:00
019 Connecting Redux Toolkit State.mp4

00:00
020 Migrating Everything To Redux Toolkit.mp4

00:00
021 Working with Multiple Slices.mp4

00:00
022 Reading _ Dispatching From A New Slice.mp4

00:00
023 Splitting Our Code.mp4

00:00
024 Summary.mp4

00:00
external-links.txt

00:00
Section Quiz

20 – Advanced Redux

001 Module Introduction.mp4

00:00
002 Redux _ Side Effects (and Asynchronous Code).mp4

00:00
003 Refresher Practice Part 12.mp4

00:00
004 Refresher Practice Part 22.mp4

00:00
005 Redux _ Async Code.mp4

00:00
006 Frontend Code vs Backend Code.mp4

00:00
007 Where To Put Our Logic.mp4

00:00
008 Using useEffect with Redux.mp4

00:00
009 A Problem with useEffect().html

00:00
010 Handling Http States _ Feedback with Redux.mp4

00:00
011 Using an Action Creator Thunk.mp4

00:00
012 Getting Started with Fetching Data.mp4

00:00
013 Finalizing the Fetching Logic.mp4

00:00
014 Exploring the Redux DevTools.mp4

00:00
015 Summary.mp4

00:00
external-links.txt

00:00
Section Quiz

21 – Building a Multi-Page SPA with React Router

001 Module Introduction.mp4

00:00
002 Routing Multiple Pages in Single-Page Applications.mp4

00:00
003 Project Setup _ Installing React Router.mp4

00:00
004 Defining Routes.mp4

00:00
005 Adding a Second Route.mp4

00:00
006 Exploring an Alternative Way of Defining Routes.mp4

00:00
007 Navigating between Pages with Links.mp4

00:00
008 Layouts _ Nested Routes.mp4

00:00
009 Showing Error Pages with errorElement.mp4

00:00
010 Working with Navigation Links (NavLink).mp4

00:00
011 Navigating Programmatically.mp4

00:00
012 Defining _ Using Dynamic Routes.mp4

00:00
013 Adding Links for Dynamic Routes.mp4

00:00
014 Understanding Relative _ Absolute Paths.mp4

00:00
015 Working with Index Routes.mp4

00:00
016 Onwards to a new Project Setup.mp4

00:00
017 Time to Practice Problem.mp4

00:00
018 Time to Practice Solution.mp4

00:00
019 Data Fetching with a loader().mp4

00:00
020 Using Data From A Loader In The Route Component.mp4

00:00
021 More loader() Data Usage.mp4

00:00
022 Where Should loader() Code Be Stored.mp4

00:00
023 When Are loader() Functions Executed.mp4

00:00
024 Reflecting The Current Navigation State in the UI.mp4

00:00
025 Returning Responses in loader()s.mp4

00:00
026 Which Kind Of Code Goes Into loader()s.mp4

00:00
027 Error Handling with Custom Errors.mp4

00:00
028 Extracting Error Data _ Throwing Responses.mp4

00:00
029 The json() Utility Function.mp4

00:00
030 Dynamic Routes _ loader()s.mp4

00:00
031 The useRouteLoaderData() Hook _ Accessing Data From Other Routes.mp4

00:00
032 Planning Data Submission.mp4

00:00
033 Working with action() Functions.mp4

00:00
034 Submitting Data Programmatically.mp4

00:00
035 Updating the UI State Based on the Submission Status.mp4

00:00
036 Validating User Input _ Outputting Validation Errors.mp4

00:00
037 Reusing Actions via Request Methods.mp4

00:00
038 Behind-the-Scenes Work with useFetcher().mp4

00:00
039 Deferring Data Fetching with defer().mp4

00:00
040 Controlling Which Data Should Be Deferred.mp4

00:00
041 Module Summary.mp4

00:00
042 Upgrading from React Router v5.html

00:00
043 Module Resources.html

00:00
044 Old Lectures.html

00:00
external-links.txt

00:00
Section Quiz

22 – Adding Authentication To React Apps

001 Module Introduction.mp4

00:00
002 How Authentication Works.mp4

00:00
003 Project Setup _ Route Setup.mp4

00:00
004 Working with Query Parameters.mp4

00:00
005 Implementing the Auth Action.mp4

00:00
006 Validating User Input _ Outputting Validation Errors.mp4

00:00
007 Adding User Login.mp4

00:00
008 Attaching Auth Tokens to Outgoing Requests.mp4

00:00
009 Adding User Logout.mp4

00:00
010 Updating the UI Based on Auth Status.mp4

00:00
011 Important loader()s must return null or any other value.html

00:00
012 Adding Route Protection.mp4

00:00
013 Adding Automatic Logout.mp4

00:00
014 Managing the Token Expiration.mp4

00:00
015 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

23 – Deploying React Apps

001 Module Introduction.mp4

00:00
002 Deployment Steps.mp4

00:00
003 Understanding Lazy Loading.mp4

00:00
004 Adding Lazy Loading.mp4

00:00
005 Building the Code For Production.mp4

00:00
006 Deployment Example.mp4

00:00
007 Server-side Routing _ Required Configuration.mp4

00:00
external-links.txt

00:00
Section Quiz

24 – React Query Tanstack Query Handling HTTP Requests With Ease

001 Module Introduction.mp4

00:00
002 Project Setup _ Overview.mp4

00:00
003 React Query What _ Why.mp4

00:00
004 Installing _ Using Tanstack Query – And Seeing Why It_s Great!.mp4

00:00
005 Understanding _ Configuring Query Behaviors – Cache _ Stale Data.mp4

00:00
006 Dynamic Query Functions _ Query Keys.mp4

00:00
007 The Query Configuration Object _ Aborting Requests.mp4

00:00
008 Enabled _ Disabled Queries.mp4

00:00
009 Changing Data with Mutations.mp4

00:00
010 Fetching More Data _ Testing the Mutation.mp4

00:00
011 Acting on Mutation Success _ Invalidating Queries.mp4

00:00
012 A Challenge! The Problem.mp4

00:00
013 A Challenge! The Solution.mp4

00:00
014 Disabling Automatic Refetching After Invalidations.mp4

00:00
015 Enhancing the Demo App _ Repeating Mutation Concepts.mp4

00:00
016 React Query Advantages In Action.mp4

00:00
017 Updating Data with Mutations.mp4

00:00
018 Optimistic Updating.mp4

00:00
019 Using the Query Key As Query Function Input.mp4

00:00
020 React Query _ React Router.mp4

00:00
external-links.txt

00:00
Section Quiz

25 – A (Pretty Deep Dive) Introduction to Next.js

001 Module Introduction.mp4

00:00
002 What is NextJS.mp4

00:00
003 Key Feature 1 Built-in Server-side Rendering (Improved SEO!).mp4

00:00
004 Key Feature 2 Simplified Routing with File-based Routing.mp4

00:00
005 Key Feature 3 Build Fullstack Apps.mp4

00:00
006 Creating a New Next.js Project _ App.mp4

00:00
007 Analyzing the Created Project.mp4

00:00
008 Adding First Pages.mp4

00:00
009 Adding Nested Paths _ Pages (Nested Routes).mp4

00:00
010 Creating Dynamic Pages (with Parameters).mp4

00:00
011 Extracting Dynamic Parameter Values.mp4

00:00
012 Linking Between Pages.mp4

00:00
013 Onwards to a bigger Project!.mp4

00:00
014 Preparing the Project Pages.mp4

00:00
015 Outputting a List of Meetups.mp4

00:00
016 Adding the New Meetup Form.mp4

00:00
017 The _app.js File _ Layout Wrapper.mp4

00:00
018 Using Programmatic (Imperative) Navigation.mp4

00:00
019 Adding Custom Components _ CSS Modules.mp4

00:00
020 How Pre-rendering Works _ Which Problem We Face.mp4

00:00
021 Data Fetching for Static Pages.mp4

00:00
022 More on Static Site Generation (SSG).mp4

00:00
023 Exploring Server-side Rendering (SSR) with getServerSideProps.mp4

00:00
024 Working with Params for SSG Data Fetching.mp4

00:00
025 Preparing Paths with getStaticPaths _ Working With Fallback Pages.mp4

00:00
026 Introducing API Routes.mp4

00:00
027 Working with MongoDB.mp4

00:00
028 Sending Http Requests To Our API Routes.mp4

00:00
029 Getting Data From The Database.mp4

00:00
030 Getting Meetup Details Data _ Preparing Pages.mp4

00:00
031 Adding head Metadata.mp4

00:00
032 Deploying Next.js Projects.mp4

00:00
033 Using Fallback Pages _ Re-deploying.mp4

00:00
034 Summary.mp4

00:00
external-links.txt

00:00
Section Quiz

26 – Animating React Apps

001 Module Introduction.mp4

00:00
002 Project Setup _ Overview.mp4

00:00
003 Animating with CSS Transitions.mp4

00:00
004 Animating with CSS Animations.mp4

00:00
005 Introducing Framer Motion.mp4

00:00
006 Framer Motion Basics _ Fundamentals.mp4

00:00
007 Animating Between Conditional Values.mp4

00:00
008 Adding Entry Animations.mp4

00:00
009 Animating Element Disappearances Removal.mp4

00:00
010 Making Elements Pop With Hover Animations.mp4

00:00
011 Reusing Animation States.mp4

00:00
012 Nested Animations _ Variants.mp4

00:00
013 Animating Staggered Lists.mp4

00:00
014 Animating Colors _ Working with Keyframes.mp4

00:00
015 Imperative Animations.mp4

00:00
016 Animating Layout Changes.mp4

00:00
017 Orchestrating Multi-Element Animations.mp4

00:00
018 Combining Animations With Layout Animations.mp4

00:00
019 Animating Shared Elements.mp4

00:00
020 Re-triggering Animations via Keys.mp4

00:00
021 Scroll-based Animations.mp4

00:00
external-links.txt

00:00
Section Quiz

27 – Testing React Apps (Unit Tests)

001 Module Introduction.mp4

00:00
002 What _ Why.mp4

00:00
003 Understanding Different Kinds Of Tests.mp4

00:00
004 What To Test _ How To Test.mp4

00:00
005 Understanding the Technical Setup _ Involved Tools.mp4

00:00
006 Running a First Test.mp4

00:00
007 Writing Our First Test.mp4

00:00
008 Grouping Tests Together With Test Suites.mp4

00:00
009 Testing User Interaction _ State.mp4

00:00
010 Testing Connected Components.mp4

00:00
011 Testing Asynchronous Code.mp4

00:00
012 Working With Mocks.mp4

00:00
013 Summary _ Further Resources.mp4

00:00
external-links.txt

00:00
Section Quiz

28 – React + TypeScript

001 Module Introduction.mp4

00:00
002 What _ Why.mp4

00:00
003 Installing _ Using TypeScript.mp4

00:00
004 Exploring the Base Types.mp4

00:00
005 Working with Array _ Object Types.mp4

00:00
006 Understanding Type Inference.mp4

00:00
007 Using Union Types.mp4

00:00
008 Understanding Type Aliases.mp4

00:00
009 Functions _ Function Types.mp4

00:00
010 Diving Into Generics.mp4

00:00
011 A Closer Look At Generics.html

00:00
012 Creating a React + TypeScript Project.mp4

00:00
013 Working with Components _ TypeScript.mp4

00:00
014 Working with Props _ TypeScript.mp4

00:00
015 Adding a Data Model.mp4

00:00
016 Time to Practice Exercise Time!.mp4

00:00
017 Form Submissions In TypeScript Projects.mp4

00:00
018 Working with refs _ useRef.mp4

00:00
019 Working with Function Props.mp4

00:00
020 Managing State _ TypeScript.mp4

00:00
021 Adding Styling.mp4

00:00
022 Time to Practice Removing a Todo.mp4

00:00
023 The Context API _ TypeScript.mp4

00:00
024 Summary.mp4

00:00
025 Bonus Exploring tsconfig.json.mp4

00:00
external-links.txt

00:00
Section Quiz

29 – Optional React Summary _ Core Feature Walkthrough

001 Module Introduction.mp4

00:00
002 What Is React _ Why Would You Use It.mp4

00:00
003 React Projects – Requirements.mp4

00:00
004 Creating React Projects.mp4

00:00
005 Out Starting Project.mp4

00:00
006 Understanding How React Works.mp4

00:00
007 Building A First Custom Component.mp4

00:00
008 Outputting Dynamic Values.mp4

00:00
009 Reusing Components.mp4

00:00
010 Passing Data to Components with Props.mp4

00:00
011 CSS Styling _ CSS Modules.mp4

00:00
012 Exercise _ Another Component.mp4

00:00
013 Preparing the App For State Management.mp4

00:00
014 Adding Event Listeners.mp4

00:00
015 Working with State.mp4

00:00
016 Lifting State Up.mp4

00:00
017 The Special children Prop.mp4

00:00
018 State _ Conditional Content.mp4

00:00
019 Adding a Shared Header _ More State Management.mp4

00:00
020 Adding Form Buttons.mp4

00:00
021 Handling Form Submission.mp4

00:00
022 Updating State Based On Previous State.mp4

00:00
023 Outputting List Data.mp4

00:00
024 Adding a Backend to the React SPA.mp4

00:00
025 Sending a POST HTTP Request.mp4

00:00
026 Handling Side Effects with useEffect().mp4

00:00
027 Handle Loading State.mp4

00:00
028 Understanding _ Adding Routing.mp4

00:00
029 Adding Routes.mp4

00:00
030 Working with Layout Routes.mp4

00:00
031 Refactoring Route Components _ More Nesting.mp4

00:00
032 Linking _ Navigating.mp4

00:00
033 Data Fetching via loader()s.mp4

00:00
034 Submitting Data with action()s.mp4

00:00
035 Dynamic Routes.mp4

00:00
036 Module Summary.mp4

00:00
037 Module Resources.html

00:00
external-links.txt

00:00
Section Quiz

30 – Course Roundup

31 – Course Update

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

5.0

Total 1 Rating

1 Rating

0 Rating

Muhammad Waleed Akhtar

4 months ago

very good

About Course

What Will You Learn?

Course Content

01 – Getting Started

A Message from the Professor

001 Welcome To The Course!.mp4

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

003 ReactJS vs Vanilla JavaScript Why Use React.mp4

004 Editing Our First React App.mp4

005 About This Course _ Course Outline.mp4

006 The Two Ways (Paths) Of Taking This Course.mp4

007 Getting The Most Out Of This Course.mp4

008 Join our Online Learning Community.html

009 Creating React Projects.mp4

010 Why Do You Need A Special Project Setup.mp4

external-links.txt

Section Quiz

02 – JavaScript Refresher

001 Module Introduction.mp4

002 Starting Project.mp4

003 Adding JavaScript To A Page _ How React Projects Differ.mp4

004 React Projects Use a Build Process.mp4

005 import _ export.mp4

006 Revisiting Variables _ Values.mp4

007 Revisiting Operators.mp4

008 Revisiting Functions _ Parameters.mp4

010 Arrow Functions.mp4

011 More on the Arrow Function Syntax.html

012 Revisiting Objects _ Classes.mp4

013 Arrays _ Array Methods like map().mp4

015 Destructuring.mp4

016 Destructuring in Function Parameter Lists.html

017 The Spread Operator.mp4

018 Revisiting Control Structures.mp4

019 Manipulating the DOM – Not With React!.mp4

020 Using Functions as Values.mp4

021 Defining Functions Inside Of Functions.mp4

022 Reference vs Primitive Values.mp4

023 Next-Gen JavaScript – Summary.html

024 JS Array Functions.html

025 Module Resources.html

external-links.txt

Section Quiz

03 – React Essentials – Components, JSX, Props, State _ More

001 Module Introduction.mp4

002 It_s All About Components! (Core Concept).mp4

003 Setting Up The Starting Project.mp4

004 JSX _ React Components (Core Concept).mp4

005 Creating _ Using a First Custom Component.mp4

006 A Closer Look Components _ File Extensions.html

008 How React Handles Components _ How It Builds A Component Tree (Core Concept).mp4

010 Using _ Outputting Dynamic Values (Core Concept).mp4

011 Setting HTML Attributes Dynamically _ Loading Image Files.mp4

013 Making Components Reusable with Props (Core Concept).mp4

014 Alternative Props Syntaxes.mp4

015 More Prop Syntaxes.html

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

019 Storing Component Style Files Next To Components.mp4

020 Component Composition The special children Prop (Core Concept).mp4

022 Reacting to Events (Core Concept).mp4

023 Passing Functions as Values to Props.mp4

025 Passing Custom Arguments to Event Functions.mp4

028 How NOT to Update the UI – A Look Behind The Scenes of React (Core Concept).mp4

029 Managing State _ Using Hooks (Core Concept).mp4

031 Deriving _ Outputting Data Based on State.mp4

033 Rendering Content Conditionally.mp4

035 CSS Styling _ Dynamic Styling.mp4

037 Outputting List Data Dynamically.mp4

040 Module Summary.mp4

external-links.txt

Section Quiz

04 – React Essentials – Deep Dive

001 Module Introduction.mp4

002 You Don_t Have To Use JSX!.mp4

003 Working with Fragments.mp4

005 When Should You Split Components.mp4

006 Splitting Components By Feature _ State.mp4

007 Problem Props Are Not Forwarded To Inner Elements.mp4

008 Forwarding Props To Wrapped Elements.mp4

010 Working with Multiple JSX Slots.mp4