5.00
(1 Rating)
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!**
What Will You 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 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
-
001 Module Introduction.mp4
00:00 -
002 The Starting Project.mp4
00:00 -
003 Understanding React Error Messages.mp4
00:00 -
004 Using the Browser Debugger _ Breakpoints.mp4
00:00 -
005 Understanding React_s Strict Mode.mp4
00:00 -
006 Using the React DevTools (Browser Extension).mp4
00:00 -
external-links.txt
00:00 -
Section Quiz
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
-
001 Course Roundup.mp4
00:00 -
002 Bonus!.html
00:00
31 – Course Update
-
001 Course Update Overview, Explanation _ Migration Guide.mp4
00:00 -
external-links.txt
00:00 -
Section Quiz
Earn a certificate
Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.
Student Ratings & Reviews
5.0
Total 1 Rating
5
1 Rating
4
0 Rating
3
0 Rating
2
0 Rating
1
0 Rating
very good