Course Content
Subtitle Guide – Hướng dẫn thêm phụ đề
0/1
Set up subtitle for video – Hướng dẫn thêm phụ đề
01 – Welcome, Welcome, Welcome!
0/6
Download Resource Files
001 Course Roadmap and Projects
02:57
002 Building Our First React App!_part1
09:26
002 Building Our First React App!_part2
09:26
003 Watch Before You Start!
05:24
005 Downloading Course Material
03:34
02 – PART 1 REACT FUNDAMENTALS [4 PROJECTS]
0/2
Download Resource Files
001 Introduction to Part 1
00:55
03 – A First Look at React
0/10
Download Resource Files
001 Section Overview
00:39
002 Why Do Front-End Frameworks Exist
10:27
003 React vs. Vanilla JavaScript
07:08
004 What is React
09:17
005 Setting Up Our Development Environment
08:47
006 Pure React
14:49
007 A Quick Look at React’s Official Documentation
03:16
008 Setting Up a New React Project The Options
07:41
009 Setting Up a Project With Create-React-App
12:48
04 – [Optional] Review of Essential JavaScript for React
0/17
Download Resource Files
001 Section Overview
00:56
002 Destructuring Objects and Arrays
10:58
003 RestSpread Operator
09:53
004 Template Literals
04:50
005 Ternaries Instead of ifelse Statements
05:49
006 Arrow Functions
04:59
007 Short-Circuiting And Logical Operators &&, ,_part1
05:16
007 Short-Circuiting And Logical Operators &&, ,_part2
05:16
008 Optional Chaining
06:30
009 The Array map Method
08:35
010 The Array filter Method
08:36
011 The Array reduce Method
07:21
012 The Array sort Method
06:38
013 Working With Immutable Arrays
11:06
014 Asynchronous JavaScript Promises
08:11
015 Asynchronous JavaScript AsyncAwait
07:30
05 – Working With Components, Props, and JSX
0/33
Download Resource Files
001 Section Overview
00:54
002 Rendering the Root Component and Strict Mode
07:25
003 Before We Start Coding Debugging
09:46
004 Components as Building Blocks
04:34
005 Creating And Reusing a Component_part1
04:50
005 Creating And Reusing a Component_part2
04:50
006 What is JSX
06:25
007 Creating More Components
08:07
008 JavaScript Logic in Components
04:26
009 Separation of Concerns
05:57
010 Styling React Applications_part1
06:08
010 Styling React Applications_part2
06:08
011 Passing and Receiving Props_part1
04:34
011 Passing and Receiving Props_part2
04:34
012 Props, Immutability, and One-Way Data Flow
07:09
013 CHALLENGE #1 Profile Card (v1)_part1
05:48
013 CHALLENGE #1 Profile Card (v1)_part2
05:48
013 CHALLENGE #1 Profile Card (v1)_part3
05:48
014 The Rules of JSX
03:37
015 Rendering Lists_part1
05:42
015 Rendering Lists_part2
05:42
016 Conditional Rendering With &&_part1
04:38
016 Conditional Rendering With &&_part2
04:38
017 Conditional Rendering With Ternaries
04:45
018 Conditional Rendering With Multiple Returns
05:03
019 Extracting JSX Into a New Component
04:32
020 Destructuring Props
04:52
021 React Fragments
05:36
022 Setting Classes and Text Conditionally
08:00
023 Section Summary
05:33
024 CHALLENGE #2 Profile Card (v2)_part1
04:07
024 CHALLENGE #2 Profile Card (v2)_part2
04:07
06 – State, Events, and Forms Interactive Components
0/25
Download Resource Files
001 Section Overview
01:02
002 Let’s Build a Steps Component
14:48
003 Handling Events the React Way
07:21
004 What is State in React
06:08
005 Creating a State Variable With useState
09:07
006 Don’t Set State Manually!
05:17
007 The Mechanics of State
04:51
008 Adding Another Piece of State
08:36
009 React Developer Tools
06:09
010 Updating State Based on Current State
05:16
011 More Thoughts About State + State Guidelines
06:33
012 A Vanilla JavaScript Implementation
06:34
013 CHALLENGE #1 Date Counter (v1)
13:09
014 Starting a New Project The Far Away Travel List
04:08
015 Building the Layout
08:54
016 Rendering the Items List
08:42
017 Building a Form and Handling Submissions_part1
05:57
017 Building a Form and Handling Submissions_part2
05:57
018 Controlled Elements_part1
09:13
018 Controlled Elements_part2
09:13
019 State vs. Props
03:30
020 EXERCISE #1 Flashcards_part1
06:58
020 EXERCISE #1 Flashcards_part2
06:58
021 CHALLENGE #2 Date Counter (v2)
10:31
07 – Thinking In React State Management
0/27
Download Resource Files
001 Section Overview
00:58
002 What is Thinking in React
04:59
003 Fundamentals of State Management
09:24
004 Thinking About State and Lifting State Up_part1
07:20
004 Thinking About State and Lifting State Up_part2
07:20
005 Reviewing Lifting Up State
06:25
006 Deleting an Item More Child-to-Parent Communication!
08:14
007 Updating an Item Complex Immutable Data Operation
07:43
008 Derived State
03:03
009 Calculating Statistics as Derived State_part1
05:21
009 Calculating Statistics as Derived State_part2
05:21
010 Sorting Items_part1
05:24
010 Sorting Items_part2
05:24
011 Clearing the List
05:03
012 Moving Components Into Separate Files_part1
04:26
012 Moving Components Into Separate Files_part2
04:26
013 EXERCISE #1 Accordion Component (v1)_part1
07:07
013 EXERCISE #1 Accordion Component (v1)_part2
07:07
014 The children Prop Making a Reusable Button_part1
08:05
014 The children Prop Making a Reusable Button_part2
08:05
015 More Reusability With the children Prop_part1
04:06
015 More Reusability With the children Prop_part2
04:06
016 EXERCISE #2 Accordion Component (v2)_part1
05:07
016 EXERCISE #2 Accordion Component (v2)_part2
05:07
017 CHALLENGE #1 Tip Calculator_part1
11:04
017 CHALLENGE #1 Tip Calculator_part2
11:04
08 – [Optional] Practice Project Eat-‘N-Split
0/15
Download Resource Files
001 Section Overview
00:55
002 Project Setup
03:52
003 Building the Static App List of Friends
12:02
004 Building the Static App Forms
09:27
005 Displaying the New Friend Form
06:34
006 Adding a New Friend_part1
09:19
006 Adding a New Friend_part2_part1
04:39
006 Adding a New Friend_part2_part2
04:39
007 Selecting a Friend_part1
07:31
007 Selecting a Friend_part2
07:31
008 Creating Controlled Elements_part1
04:56
008 Creating Controlled Elements_part2
04:56
009 Splitting a Bill_part1
06:24
009 Splitting a Bill_part2
06:24
09 – PART 2 INTERMEDIATE REACT [2 PROJECTS]
0/2
Download Resource Files
001 Introduction to Part 2
01:15
10 – Thinking in React Components, Composition, and Reusability
0/24
Download Resource Files
001 Section Overview
01:00
002 Setting Up the usePopcorn Project
04:10
003 How to Split a UI Into Components
12:35
004 Splitting Components in Practice_part1
07:59
004 Splitting Components in Practice_part2
07:59
004 Splitting Components in Practice_part3
07:59
005 Component Categories
02:42
006 Prop Drilling
07:31
007 Component Composition
04:51
008 Fixing Prop Drilling With Composition (And Building a Layout)
08:49
009 Using Composition to Make a Reusable Box
06:30
010 Passing Elements as Props (Alternative to children)
04:44
011 Building a Reusable Star Rating Component_part1
05:41
011 Building a Reusable Star Rating Component_part2
05:41
012 Creating the Stars_part1
06:32
012 Creating the Stars_part2
06:32
013 Handling Hover Events
07:43
014 Props as a Component API
04:28
015 Improving Reusability With Props_part1
09:43
015 Improving Reusability With Props_part2
09:43
016 PropTypes
07:24
017 CHALLENGE #1 Text Expander Component_part1
09:10
017 CHALLENGE #1 Text Expander Component_part2
09:10
11 – How React Works Behind the Scenes
0/22
Download Resource Files
001 Section Overview
01:55
002 Project Setup and Walkthrough
11:11
003 Components, Instances, and Elements
05:09
004 Instances and Elements in Practice_part1
03:56
004 Instances and Elements in Practice_part2
03:56
005 How Rendering Works Overview
06:55
006 How Rendering Works The Render Phase_part1
09:14
006 How Rendering Works The Render Phase_part2
09:14
007 How Rendering Works The Commit Phase
11:27
008 How Diffing Works
05:52
009 Diffing Rules in Practice
05:13
010 The Key Prop
07:41
011 Resetting State With the Key Prop
04:02
012 Using the Key Prop to Fix Our Eat-‘N-Split App
04:07
013 Rules for Render Logic Pure Components
09:24
014 State Update Batching
09:11
015 State Update Batching in Practice_part1
07:51
015 State Update Batching in Practice_part2
07:51
016 How Events Work in React
13:42
017 Libraries vs. Frameworks & The React Ecosystem
09:52
018 Section Summary Practical Takeaways
10:27
12 – Effects and Data Fetching
0/35
Download Resource Files
001 Section Overview
00:58
002 The Component Lifecycle
04:31
003 How NOT to Fetch Data in React_part1
04:54
003 How NOT to Fetch Data in React_part2
04:54
004 useEffect to the Rescue
04:40
005 A First Look at Effects
06:23
006 Using an async Function
05:40
007 Adding a Loading State
03:47
008 Handling Errors_part1
06:31
008 Handling Errors_part2
06:31
009 The useEffect Dependency Array
12:17
010 Synchronizing Queries With Movie Data_part1
07:34
010 Synchronizing Queries With Movie Data_part2
07:34
011 Selecting a Movie_part1
04:26
011 Selecting a Movie_part2
04:26
011 Selecting a Movie_part3
04:26
012 Loading Movie Details_part1
05:54
012 Loading Movie Details_part2
05:54
012 Loading Movie Details_part3
05:54
013 Adding a Watched Movie_part1
05:14
013 Adding a Watched Movie_part2
05:14
013 Adding a Watched Movie_part3
05:14
013 Adding a Watched Movie_part4
05:14
013 Adding a Watched Movie_part5
05:14
014 Adding a New Effect Changing Page Title_part1
04:22
014 Adding a New Effect Changing Page Title_part2
04:22
015 The useEffect Cleanup Function
04:21
016 Cleaning Up the Title
05:22
017 Cleaning Up Data Fetching_part1
05:08
017 Cleaning Up Data Fetching_part2
05:08
018 One More Effect Listening to a Keypress_part1
07:03
018 One More Effect Listening to a Keypress_part2
07:03
019 CHALLENGE #1 Currency Converter_part1
08:21
019 CHALLENGE #1 Currency Converter_part2
08:21
13 – Custom Hooks, Refs, and More State
0/21
Download Resource Files
001 Section Overview
00:57
002 React Hooks and Their Rules
10:55
003 The Rules of Hooks in Practice
08:36
004 More Details of useState_part1
06:15
004 More Details of useState_part2
06:15
005 Initializing State With a Callback (Lazy Initial State)_part1
06:45
005 Initializing State With a Callback (Lazy Initial State)_part2
06:45
006 useState Summary
03:14
007 How NOT to Select DOM Elements in React
03:38
008 Introducing Another Hook useRef
05:36
009 Refs to Select DOM Elements_part1
05:04
009 Refs to Select DOM Elements_part2
05:04
010 Refs to Persist Data Between Renders_part1
05:07
010 Refs to Persist Data Between Renders_part2
05:07
011 What are Custom Hooks When to Create One
04:22
012 Creating our First Custom Hook useMovies_part1
06:31
012 Creating our First Custom Hook useMovies_part2
06:31
013 Creating useLocalStorageState
09:06
014 Creating useKey
08:19
015 CHALLENGE #1 useGeolocate
07:27
14 – [Optional] React Before Hooks Class-Based React
0/14
Download Resource Files
001 Section Overview
01:16
002 Our First Class Component
09:32
003 Working With Event Handlers
10:25
004 Class Components vs. Function Components
05:37
005 Starting the Classy Weather App
07:45
006 Fetching Weather Data_part1
04:49
006 Fetching Weather Data_part2
04:49
007 Displaying the Weather_part1
07:05
007 Displaying the Weather_part2
07:05
008 Removing Boilerplate Code With Class Fields
04:05
009 Child to Parent Communication
04:19
010 Lifecycle Methods_part1
07:48
010 Lifecycle Methods_part2
07:48
15 – PART 3 ADVANCED REACT + REDUX [4 PROJECTS]
0/2
Download Resource Files
001 Introduction to Part 3
01:11
16 – The Advanced useReducer Hook
0/24
Download Resource Files
001 Section Overview
01:03
002 Yet Another Hook useReducer_part1
08:59
002 Yet Another Hook useReducer_part2
08:59
003 Managing Related Pieces of State_part1
06:11
003 Managing Related Pieces of State_part2
06:11
004 Managing State With useReducer
14:14
005 The React Quiz App
07:57
006 Loading Questions from a Fake API_part1
09:15
006 Loading Questions from a Fake API_part2
09:15
007 Handling Loading, Error, and Ready Status
09:05
008 Starting a New Quiz
04:54
009 Displaying Questions
07:45
010 Handling New Answers
16:42
011 Moving to the Next Question
06:22
012 Displaying Progress
08:57
013 Finishing a Quiz_part1
07:33
013 Finishing a Quiz_part2
07:33
014 Restarting a Quiz
07:05
015 Setting Up a Timer With useEffect_part1
06:58
015 Setting Up a Timer With useEffect_part2
06:58
015 Setting Up a Timer With useEffect_part3
06:58
016 Section Summary useState vs. useReducer
05:54
017 CHALLENGE #1 Creating a Bank Account With useReducer
19:50
17 – React Router Building Single-Page Applications (SPA)
0/27
Download Resource Files
001 Section Overview
01:01
002 Creating Our First App With Vite WorldWise_part1
07:50
002 Creating Our First App With Vite WorldWise_part2
07:50
003 Routing and Single-Page Applications (SPAs)
06:40
004 Implementing Main Pages and Routes
12:15
005 Linking Between Routes With Link and NavLink
09:57
006 Styling Options For React Applications
05:50
007 Using CSS Modules_part1
08:15
007 Using CSS Modules_part2
08:15
008 Building the Pages
16:59
009 Building the App Layout
08:44
010 Nested Routes and Index Route_part1
06:42
010 Nested Routes and Index Route_part2
06:42
011 Implementing the Cities List_part1
06:14
011 Implementing the Cities List_part2
06:14
011 Implementing the Cities List_part3
06:14
012 Implementing the Countries List_part1
05:33
012 Implementing the Countries List_part2
05:33
013 Storing State in the URL
05:31
014 Dynamic Routes With URL Parameters_part1
05:14
014 Dynamic Routes With URL Parameters_part2
05:14
015 Reading and Setting a Query String_part1
05:17
015 Reading and Setting a Query String_part2
05:17
016 Programmatic Navigation with useNavigate_part1
05:55
016 Programmatic Navigation with useNavigate_part2
05:55
017 Programmatic Navigation with Navigate
04:12
18 – Advanced State Management The Context API
0/48
Download Resource Files
001 Section Overview
00:59
002 CHALLENGE #1 Understand The Atomic Blog App
04:22
003 What is the Context API
05:17
004 Creating and Providing a Context_part1
04:43
004 Creating and Providing a Context_part2
04:43
005 Consuming the Context_part1
05:26
005 Consuming the Context_part2
05:26
006 Advanced Pattern A Custom Provider and Hook_part1
08:07
006 Advanced Pattern A Custom Provider and Hook_part2
08:07
007 Thinking In React Advanced State Management
11:38
008 Back to WorldWise Creating a CitiesContext_part1
04:16
008 Back to WorldWise Creating a CitiesContext_part2
04:16
009 Consuming the CitiesContext
04:26
010 Finishing the City View_part1
05:59
010 Finishing the City View_part2
05:59
010 Finishing the City View_part3
05:59
011 Including a Map With the Leaflet Library_part1
04:42
011 Including a Map With the Leaflet Library_part2
04:42
012 Displaying City Markers on Map
05:58
013 Interacting With the Map_part1
04:32
013 Interacting With the Map_part2
04:32
013 Interacting With the Map_part3
04:32
014 Setting Map Position With Geolocation_part1
05:47
014 Setting Map Position With Geolocation_part2
05:46
015 Fetching City Data in the Form_part1
04:25
015 Fetching City Data in the Form_part2
04:25
015 Fetching City Data in the Form_part3
04:25
015 Fetching City Data in the Form_part4
04:25
016 Creating a New City_part1
04:41
016 Creating a New City_part2
04:41
016 Creating a New City_part3
04:41
016 Creating a New City_part4
04:41
016 Creating a New City_part5
04:41
017 Deleting a City_part1
02:48
017 Deleting a City_part2
02:48
018 Advanced State Management System Context + useReducer_part1
05:39
018 Advanced State Management System Context + useReducer_part2
05:39
018 Advanced State Management System Context + useReducer_part3
05:39
018 Advanced State Management System Context + useReducer_part4
05:39
019 Adding Fake Authentication Setting Up Context_part1
05:31
019 Adding Fake Authentication Setting Up Context_part2
05:31
020 Adding Fake Authentication Implementing Login_part1
05:28
020 Adding Fake Authentication Implementing Login_part2
05:28
020 Adding Fake Authentication Implementing Login_part3
05:28
021 Adding Fake Authentication Protecting a Route_part1
05:40
021 Adding Fake Authentication Protecting a Route_part2
05:40
022 CHALLENGE #2 Refactoring React Quiz to Context API
08:22
19 – Performance Optimization and Advanced useEffect
0/30
Download Resource Files
001 Section Overview
01:03
002 Performance Optimization and Wasted Renders
06:06
003 The Profiler Developer Tool
08:21
004 A Surprising Optimization Trick With children_part1
05:54
004 A Surprising Optimization Trick With children_part2
05:54
005 Understanding memo
05:29
006 memo in Practice_part1
06:38
006 memo in Practice_part2
06:38
007 Understanding useMemo and useCallback
06:39
008 useMemo in Practice_part1
04:21
008 useMemo in Practice_part2
04:21
009 useCallback in Practice_part1
05:04
009 useCallback in Practice_part2
05:04
010 Optimizing Context Re-Renders_part1
07:24
010 Optimizing Context Re-Renders_part2
07:24
011 Back to The WorldWise App_part1_part1
03:09
011 Back to The WorldWise App_part1_part2
03:09
011 Back to The WorldWise App_part2
06:18
012 Optimizing Bundle Size With Code Splitting_part1
05:17
012 Optimizing Bundle Size With Code Splitting_part2
05:17
012 Optimizing Bundle Size With Code Splitting_part3
05:17
013 Don’t Optimize Prematurely!
02:59
014 useEffect Rules and Best Practices
10:01
015 CHALLENGE #1 Fix Performance Issues in Workout Timer
12:15
016 Setting State Based on Other State Updates_part1
05:57
016 Setting State Based on Other State Updates_part2
05:57
017 Using Helper Functions In Effects_part1
07:32
017 Using Helper Functions In Effects_part2
07:32
018 Closures in Effects
09:52
20 – Redux and Modern Redux Toolkit (With Thunks)
0/28
Download Resource Files
001 Section Overview
01:07
002 Introduction to Redux
12:14
003 Creating a Reducer Bank Account
10:47
004 Creating a Redux Store
09:46
005 Working With Action Creators
06:28
006 Adding More State Customer
12:30
007 Professional Redux File Structure State Slices_part1
05:53
007 Professional Redux File Structure State Slices_part2
05:53
008 Back to React! Connecting our Redux App With React
05:46
009 Dispatching Actions from Our React App_part1
05:47
009 Dispatching Actions from Our React App_part2
05:47
009 Dispatching Actions from Our React App_part3
05:47
010 The Legacy Way of Connecting Components to Redux
04:50
011 Redux Middleware and Thunks
04:28
012 Making an API Call With Redux Thunks_part1
05:56
012 Making an API Call With Redux Thunks_part2
05:56
012 Making an API Call With Redux Thunks_part3
05:56
013 The Redux DevTools
10:21
014 What is Redux Toolkit (RTK)
03:40
015 Creating the Store With RTK
04:37
016 Creating the Account Slice_part1
07:14
016 Creating the Account Slice_part2
07:14
016 Creating the Account Slice_part3
07:14
017 Back to Thunks
05:02
018 Creating the Customer Slice_part1
04:37
018 Creating the Customer Slice_part2
04:37
019 Redux vs. Context API
07:43
21 – PART 4 PROFESSIONAL REACT DEVELOPMENT [2 PROJECTS]
0/2
Download Resource Files
001 Introduction to Part 4
01:27
22 – React Router With Data Loading (v6.4+)
0/18
Download Resource Files
001 Section Overview
00:51
002 Setting Up a New Project Fast React Pizza Co
08:13
003 Application Planning
21:24
004 Setting Up a Professional File Structure
08:20
005 A New Way Of Implementing Routes
10:30
006 Building the App Layout
11:18
007 Fetching Data With React Router Loaders Pizza Menu_part1
05:55
007 Fetching Data With React Router Loaders Pizza Menu_part2
05:55
008 Displaying a Loading Indicator
06:00
009 Handling Errors With Error Elements
06:24
010 Fetching Orders_part1
06:20
010 Fetching Orders_part2
06:20
011 Writing Data With React Router Actions_part1
06:21
011 Writing Data With React Router Actions_part2
06:21
011 Writing Data With React Router Actions_part3
06:21
012 Error Handling in Form Actions_part1
05:13
012 Error Handling in Form Actions_part2
05:13
23 – [Optional] Tailwind CSS Crash Course Styling the App
0/35
Download Resource Files
001 Section Overview
00:59
002 What is Tailwind CSS
07:56
003 Setting Up Tailwind CSS_part1
06:01
003 Setting Up Tailwind CSS_part2
06:01
004 Working With Color_part1
04:29
004 Working With Color_part2
04:29
005 Styling Text_part1
05:00
005 Styling Text_part2
05:00
006 The Box Model Spacing, Borders, and Display_part1
05:38
006 The Box Model Spacing, Borders, and Display_part2
05:38
007 Responsive Design_part1
05:24
007 Responsive Design_part2
05:24
008 Using Flexbox
06:31
009 Using CSS Grid_part1
06:10
009 Using CSS Grid_part2
06:10
010 Styling Buttons Element States and Transitions_part1
06:06
010 Styling Buttons Element States and Transitions_part2
06:06
011 Styling Form Elements_part1
05:11
011 Styling Form Elements_part2
05:11
012 Reusing Styles With @apply
04:28
013 Reusing Styles With React Components_part1
06:13
013 Reusing Styles With React Components_part2
06:13
014 Absolute Positioning, z-index, and More
06:30
015 Configuring Tailwind Custom Font Family_part1
05:26
015 Configuring Tailwind Custom Font Family_part2
05:26
016 Styling the Menu_part1
06:09
016 Styling the Menu_part2
06:09
016 Styling the Menu_part3
06:09
017 Styling the Cart_part1
05:53
017 Styling the Cart_part2
05:53
018 Styling the Order Form_part1
06:40
018 Styling the Order Form_part2
06:40
019 Styling the Order Overview_part1
06:57
019 Styling the Order Overview_part2
06:57
24 – Adding Redux and Advanced React Router
0/30
Download Resource Files
001 Section Overview
00:39
002 Modeling the User State With Redux Toolkit_part1
06:42
002 Modeling the User State With Redux Toolkit_part2
06:41
003 Reading and Updating the User State_part1
05:18
003 Reading and Updating the User State_part2
05:18
004 Modeling the Cart State
14:20
005 Adding Menu Items to the Cart
07:06
006 Building the Cart Overview With Redux Selectors_part1
04:29
006 Building the Cart Overview With Redux Selectors_part2
04:29
007 Building the Cart Page_part1
03:32
007 Building the Cart Page_part2
03:32
008 Deleting Cart Items_part1
07:22
008 Deleting Cart Items_part2
07:22
009 Updating Cart Quantities_part1
06:46
009 Updating Cart Quantities_part2_part1
03:23
009 Updating Cart Quantities_part2_part2
03:23
010 Using the Cart for New Orders_part1
07:15
010 Using the Cart for New Orders_part2
07:15
011 Redux Thunks With createAsyncThunk_part1
05:21
011 Redux Thunks With createAsyncThunk_part2
05:21
011 Redux Thunks With createAsyncThunk_part3
05:21
012 Integrating Geolocation_part1
05:21
012 Integrating Geolocation_part2
05:21
012 Integrating Geolocation_part3
05:21
013 Fetching Data Without Navigation useFetcher_part1
06:22
013 Fetching Data Without Navigation useFetcher_part2
06:22
014 Updating Data Without Navigation_part1
04:52
014 Updating Data Without Navigation_part2
04:52
014 Updating Data Without Navigation_part3
04:52
25 – Setting Up Our Biggest Project + Styled Components
0/17
Download Resource Files
001 Section Overview
00:54
002 Application Planning_part1
09:14
002 Application Planning_part2
09:14
004 Setting Up the Project The Wild Oasis
08:11
005 Introduction to Styled Components
12:22
006 Global Styles With Styled Components_part1
07:18
006 Global Styles With Styled Components_part2
07:18
007 Styled Component Props and the css Function_part1
05:12
007 Styled Component Props and the css Function_part2
05:12
008 Building More Reusable Styled Components_part1
05:31
008 Building More Reusable Styled Components_part2
05:31
009 Setting Up Pages and Routes
06:27
010 Building the App Layout_part1
07:10
010 Building the App Layout_part2
07:10
011 Building the Sidebar and Main Navigation_part1
06:34
011 Building the Sidebar and Main Navigation_part2
06:34
26 – Supabase Crash Course Building a Back-End!
0/10
Download Resource Files
001 Section Overview
00:46
002 What is Supabase
02:24
003 Creating a New Database
05:27
004 Modeling Application State
05:34
005 Creating Tables
09:31
006 Relationships Between Tables
08:29
007 Adding Security Policies (RLS)
06:18
008 Connecting Supabase With Our React App
08:45
009 Setting Up Storage Buckets
04:39
27 – React Query Managing Remote State
0/37
Download Resource Files
001 Section Overview
00:46
002 What is React Query
06:20
003 Setting Up React Query_part1
03:39
003 Setting Up React Query_part2
03:39
004 Fetching Cabin Data_part1_part1
03:36
004 Fetching Cabin Data_part1_part2
03:36
004 Fetching Cabin Data_part2_part1
03:36
004 Fetching Cabin Data_part2_part2
03:36
004 Fetching Cabin Data_part3
07:13
005 Mutations Deleting a Cabin_part1
05:47
005 Mutations Deleting a Cabin_part2
05:47
005 Mutations Deleting a Cabin_part3
05:47
006 Displaying Toasts (Notifications)
08:41
007 Introducing Another Library React Hook Form_part1
05:38
007 Introducing Another Library React Hook Form_part2
05:38
008 Creating a New Cabin_part1
06:06
008 Creating a New Cabin_part2
06:06
009 Handling Form Errors_part1
04:32
009 Handling Form Errors_part2
04:32
009 Handling Form Errors_part3
04:32
009 Handling Form Errors_part4
04:32
009 Handling Form Errors_part5
04:32
010 Uploading Images to Supabase_part1
07:20
010 Uploading Images to Supabase_part2
07:20
011 Editing a Cabin_part1
07:40
011 Editing a Cabin_part2
07:39
011 Editing a Cabin_part3
07:39
011 Editing a Cabin_part4
07:39
012 Abstracting React Query Into Custom Hooks_part1
05:48
012 Abstracting React Query Into Custom Hooks_part2
05:48
012 Abstracting React Query Into Custom Hooks_part3
05:48
013 Duplicating Cabins
06:49
014 Fetching Applications Settings_part1
04:23
014 Fetching Applications Settings_part2
04:23
015 Updating Application Settings_part1
05:44
015 Updating Application Settings_part2
05:44
28 – Advanced React Patterns
0/28
Download Resource Files
001 Section Overview
01:13
002 An Overview of Reusability in React
05:44
003 Setting Up an Example_part1
03:09
003 Setting Up an Example_part2
03:09
004 The Render Props Pattern
07:42
005 A Look at Higher-Order Components (HOC)_part1
04:03
005 A Look at Higher-Order Components (HOC)_part2
04:03
006 The Compound Component Pattern_part1
09:08
006 The Compound Component Pattern_part2
09:08
007 Building a Modal Window Using a React Portal_part1
06:38
007 Building a Modal Window Using a React Portal_part2
06:38
007 Building a Modal Window Using a React Portal_part3
06:38
008 Converting the Modal to a Compound Component_part1
07:15
008 Converting the Modal to a Compound Component_part2
07:15
008 Converting the Modal to a Compound Component_part3
07:15
009 Detecting a Click Outside the Modal_part1
06:48
009 Detecting a Click Outside the Modal_part2
06:48
010 Confirming Cabin Deletions_part1
04:21
010 Confirming Cabin Deletions_part2
04:20
011 Building a Reusable Table_part1
05:52
011 Building a Reusable Table_part2
05:52
012 Applying the Render Props Pattern
04:38
013 Building a Reusable Context Menu_part1
06:31
013 Building a Reusable Context Menu_part2
06:31
013 Building a Reusable Context Menu_part3
06:31
013 Building a Reusable Context Menu_part4
06:31
013 Building a Reusable Context Menu_part5
06:31
29 – [Optional] Implementing More Features Authentication, Dark Mode, Dashboard, etc
0/79
Download Resource Files
001 Section Overview
01:17
002 Client-Side Filtering Filtering Cabins_part1
06:16
002 Client-Side Filtering Filtering Cabins_part2
06:16
002 Client-Side Filtering Filtering Cabins_part3
06:16
003 Client-Side Sorting Sorting Cabins_part1
06:48
003 Client-Side Sorting Sorting Cabins_part2
06:48
003 Client-Side Sorting Sorting Cabins_part3
06:48
004 Building the Bookings Table_part1
05:59
004 Building the Bookings Table_part2
05:59
004 Building the Bookings Table_part3
05:59
005 Uploading Sample Data
06:15
006 API-Side Filtering Filtering Bookings_part1
05:43
006 API-Side Filtering Filtering Bookings_part2
05:43
006 API-Side Filtering Filtering Bookings_part3
05:43
007 API-Side Sorting Sorting Bookings
06:53
008 Building a Reusable Pagination Component_part1
05:17
008 Building a Reusable Pagination Component_part2
05:17
008 Building a Reusable Pagination Component_part3
05:17
009 API-Side Pagination Paginating Bookings_part1
05:19
009 API-Side Pagination Paginating Bookings_part2
05:19
010 Prefetching With React Query
07:58
011 Building the Single Booking Page_part1
07:39
011 Building the Single Booking Page_part2
07:38
012 Checking In a Booking_part1
05:39
012 Checking In a Booking_part2
05:39
012 Checking In a Booking_part3
05:39
012 Checking In a Booking_part4
05:39
012 Checking In a Booking_part5
05:39
013 Adding Optional Breakfast_part1
04:41
013 Adding Optional Breakfast_part2
04:41
013 Adding Optional Breakfast_part3
04:41
014 Checking Out a Booking (+ Fixing a Small Bug)_part1
04:55
014 Checking Out a Booking (+ Fixing a Small Bug)_part2
04:55
015 Deleting a Booking_part1
06:46
015 Deleting a Booking_part2
06:46
016 Authentication User Login With Supabase_part1
05:31
016 Authentication User Login With Supabase_part2
05:31
016 Authentication User Login With Supabase_part3
05:31
016 Authentication User Login With Supabase_part4
05:31
017 Authorization Protecting Routes_part1
07:48
017 Authorization Protecting Routes_part2
07:48
017 Authorization Protecting Routes_part3
07:47
018 User Logout
09:00
019 Fixing an Important Bug
05:35
020 Building the Sign Up Form_part1
05:29
020 Building the Sign Up Form_part2
05:29
021 User Sign Up_part1
07:30
021 User Sign Up_part2
07:30
022 Authorization on Supabase Protecting Database (RLS)
04:40
023 Building The App Header_part1
05:09
023 Building The App Header_part2
05:09
024 Updating User Data and Password_part1
07:06
024 Updating User Data and Password_part2
07:06
024 Updating User Data and Password_part3
07:06
024 Updating User Data and Password_part4
07:06
025 Implementing Dark Mode With CSS Variables_part1
05:22
025 Implementing Dark Mode With CSS Variables_part2
05:22
025 Implementing Dark Mode With CSS Variables_part3
05:22
025 Implementing Dark Mode With CSS Variables_part4
05:22
026 Building the Dashboard Layout
04:26
027 Computing Recent Bookings and Stays
15:21
028 Displaying Statistics_part1
06:01
028 Displaying Statistics_part2
06:01
029 Displaying a Line Chart With the Recharts Library_part1
05:43
029 Displaying a Line Chart With the Recharts Library_part2
05:43
029 Displaying a Line Chart With the Recharts Library_part3
05:43
029 Displaying a Line Chart With the Recharts Library_part4
05:43
030 Displaying a Pie Chart_part1
05:17
030 Displaying a Pie Chart_part2
05:17
030 Displaying a Pie Chart_part3
05:17
031 Displaying Stays for Current Day_part1
06:53
031 Displaying Stays for Current Day_part2
06:53
031 Displaying Stays for Current Day_part3
06:53
032 Error Boundaries_part1
04:52
032 Error Boundaries_part2
04:52
033 Final Touches + Fixing Bugs_part1
04:53
033 Final Touches + Fixing Bugs_part2
04:53
033 Final Touches + Fixing Bugs_part3
04:52
30 – Deployment With Netlify and Vercel
0/7
Download Resource Files
001 Section Overview
01:09
002 Deploying to Netlify_part1
05:40
002 Deploying to Netlify_part2
05:40
003 Setting Up a Git and GitHub Repository_part1
08:08
003 Setting Up a Git and GitHub Repository_part2
08:08
004 Deploying to Vercel
05:54
31 – The End!
0/2
Download Resource Files
001 Where to Go from Here
03:20
The Ultimate React Course 2024: React, Next.js, Redux & More
Join the conversation
Previous
Next

Please contact me via telegram

DMCA.com Protection Status