The Ultimate React Course 2023: React, Redux & More
In 2023, React is still the #1 skill to learn if you want to become a successful front-end developer!
But it can be hard. There are so many moving parts, so many different libraries, so many tutorials out there.
That's why you came here... And you came to the right place! This is THE ultimate React course for 2023 and beyond.
A practice-heavy approach to master React by building polished apps, backed up by diagrams, theory, and looks under the hood of React.
The all-in-one package that takes you from zero to truly understanding React and building modern, powerful, and professional web applications.
Real projects. Real explanations. Real React.
[01] Why is this the right React course for you?
This is the most in-depth React course on Udemy, and it's fundamentally different from all the other ones.
Here's why:
Contains the biggest and most professional project, where we implement many common app features (see promo video!)
Super detailed explanations of all important concepts with carefully crafted and animated diagrams
A huge focus on "how to think in React" and modern best practices
A long section that explores how React actually works behind the scenes will give you the confidence to use React effectively on your own
Advanced design patterns like compound components will make you think like a senior React engineer
And these are just the highlights! Check out the full list below (+ the promo video and curriculum).
Also, make no mistake: "React course" actually means "Front-end development with React and modern libraries course".
That's right, besides the React library itself, you will learn and master them all: React Router, Redux, Redux Toolkit, React Query, React Hook Form, Styled Components, Tailwind CSS, and more.
This is how we plan, build, and deploy professional projects! We even use industry-standard tools such as Supabase (fully-fledged back-end), GitHub, Netlify, and Vercel.
As you expect, this course is 100% project-based. So throughout the course, you'll start building your portfolio of 8+ beautiful and high-quality React apps, where each one will showcase a few of the new skills you will be learning.
By the end of the course, you will have all the knowledge and confidence that you need to ace your job interviews and become the professional React developer that companies are looking for.
More
[02] Why am I the right React teacher for you?
My name is Jonas, I'm an experienced web developer and designer, and one of Udemy's top instructors. I've been teaching web development courses since 2015 to over 1,500,000 developers, so I know exactly how students learn and what is needed to master any subject.
With this in mind, I designed the ideal curriculum for this course: a unique blend of real-world projects, deep explanations, and theory lectures, to turn you into a confident React developer in just a couple of weeks.
Ready to become a confident and independent React developer, highly capable of building your own apps? Then don't wait any longer, and start your React journey today!
[03] Still not sure? Here are all the nerdy details of what we'll cover:
React fundamentals [why we even need React, components, JSX, props, events, forms, state, props vs. state]
How to think about state [where to place state, guidelines, lifting state up, local vs. global state, UI vs. remote state]
How to think about components [how to split components, props as API, how to build reusable and composable components, the children prop]
Deep dive into effects and useEffect [data fetching, lifecycle vs. synchronization, when to use effects, effects vs. event handlers]
Deep dive into hooks [rules of hooks, how hooks work, useRef, building super-reusable custom hooks]
Performance optimization [wasted renders, memoization with memo, useMemo, and useCallback, optimizing Context API, code splitting + Suspense]
Advanced state management [useReducer hook, the Context API, Redux, Redux Toolkit, Thunks, React Query]
Building Single-Page Applications (SPA) [Vite, routing with React Router, URL parameters and query strings for state management, data loaders and actions (v6.4+)]
Building real-world features found in many apps [authentication and authorization, data sorting, filtering and pagination, dark mode, dashboard with charts, etc.]
Creating your own back-end with a DB and API using Supabase [gain the power to build full-stack apps on your own!]
How to style React apps [Tailwind CSS, CSS Modules, and Styled Components (CSS-in-JS)]
Advanced React patterns used by senior developers [render props, higher-order components, compound components (to build a modal, a context menu, and more)]
How React works behind the scenes [rendering, virtual DOM, reconciliation, fiber tree, key prop, events, state batching, etc.]
Watch Online The Ultimate React Course 2023: React, Redux & More
| # | Title | Duration |
|---|---|---|
| 1 | Course Roadmap and Projects | 02:58 |
| 2 | Building Our First React App! | 18:54 |
| 3 | Watch Before You Start! | 05:25 |
| 4 | Downloading Course Material | 03:35 |
| 5 | Introduction to Part 1 | 00:56 |
| 6 | Section Overview | 00:40 |
| 7 | Why Do Front-End Frameworks Exist? | 10:28 |
| 8 | React vs. Vanilla JavaScript | 07:09 |
| 9 | What is React? | 09:18 |
| 10 | Setting Up Our Development Environment | 08:48 |
| 11 | Pure React | 14:50 |
| 12 | A Quick Look at React's Official Documentation | 03:17 |
| 13 | Setting Up a New React Project: The Options | 07:42 |
| 14 | Setting Up a Project With Create-React-App | 12:49 |
| 15 | Section Overview | 00:57 |
| 16 | Destructuring Objects and Arrays | 10:59 |
| 17 | Rest/Spread Operator | 09:54 |
| 18 | Template Literals | 04:51 |
| 19 | Ternaries Instead of if/else Statements | 05:50 |
| 20 | Arrow Functions | 05:00 |
| 21 | Short-Circuiting And Logical Operators: &&, ||, ?? | 10:33 |
| 22 | Optional Chaining | 06:31 |
| 23 | The Array map Method | 08:36 |
| 24 | The Array filter Method | 08:37 |
| 25 | The Array reduce Method | 07:22 |
| 26 | The Array sort Method | 06:39 |
| 27 | Working With Immutable Arrays | 11:07 |
| 28 | Asynchronous JavaScript: Promises | 08:12 |
| 29 | Asynchronous JavaScript: Async/Await | 07:31 |
| 30 | Section Overview | 00:55 |
| 31 | Rendering the Root Component and Strict Mode | 07:26 |
| 32 | Before We Start Coding: Debugging | 09:47 |
| 33 | Components as Building Blocks | 04:35 |
| 34 | Creating And Reusing a Component | 09:41 |
| 35 | What is JSX? | 06:26 |
| 36 | Creating More Components | 08:08 |
| 37 | JavaScript Logic in Components | 04:27 |
| 38 | Separation of Concerns | 05:58 |
| 39 | Styling React Applications | 12:18 |
| 40 | Passing and Receiving Props | 09:09 |
| 41 | Props, Immutability, and One-Way Data Flow | 07:10 |
| 42 | CHALLENGE #1: Profile Card (v1) | 17:26 |
| 43 | The Rules of JSX | 03:38 |
| 44 | Rendering Lists | 11:25 |
| 45 | Conditional Rendering With && | 09:17 |
| 46 | Conditional Rendering With Ternaries | 04:46 |
| 47 | Conditional Rendering With Multiple Returns | 05:04 |
| 48 | Extracting JSX Into a New Component | 04:33 |
| 49 | Destructuring Props | 04:53 |
| 50 | React Fragments | 05:37 |
| 51 | Setting Classes and Text Conditionally | 08:01 |
| 52 | Section Summary | 05:34 |
| 53 | CHALLENGE #2: Profile Card (v2) | 08:16 |
| 54 | Section Overview | 01:03 |
| 55 | Let's Build a Steps Component | 14:49 |
| 56 | Handling Events the React Way | 07:22 |
| 57 | What is State in React? | 06:09 |
| 58 | Creating a State Variable With useState | 09:08 |
| 59 | Don't Set State Manually! | 05:18 |
| 60 | The Mechanics of State | 04:52 |
| 61 | Adding Another Piece of State | 08:37 |
| 62 | React Developer Tools | 06:10 |
| 63 | Updating State Based on Current State | 05:17 |
| 64 | More Thoughts About State + State Guidelines | 06:34 |
| 65 | A Vanilla JavaScript Implementation | 06:35 |
| 66 | CHALLENGE #1: Date Counter (v1) | 13:10 |
| 67 | Starting a New Project: The "Far Away" Travel List | 04:09 |
| 68 | Building the Layout | 08:55 |
| 69 | Rendering the Items List | 08:43 |
| 70 | Building a Form and Handling Submissions | 11:56 |
| 71 | Controlled Elements | 18:27 |
| 72 | State vs. Props | 03:31 |
| 73 | EXERCISE #1: Flashcards | 13:57 |
| 74 | CHALLENGE #2: Date Counter (v2) | 10:32 |
| 75 | Section Overview | 00:59 |
| 76 | What is "Thinking in React"? | 05:00 |
| 77 | Fundamentals of State Management | 09:25 |
| 78 | Thinking About State and Lifting State Up | 14:42 |
| 79 | Reviewing "Lifting Up State" | 06:26 |
| 80 | Deleting an Item: More Child-to-Parent Communication! | 08:15 |
| 81 | Updating an Item: Complex Immutable Data Operation | 07:44 |
| 82 | Derived State | 03:04 |
| 83 | Calculating Statistics as Derived State | 10:44 |
| 84 | Sorting Items | 10:49 |
| 85 | Clearing the List | 05:04 |
| 86 | Moving Components Into Separate Files | 08:54 |
| 87 | EXERCISE #1: Accordion Component (v1) | 14:16 |
| 88 | The "children" Prop: Making a Reusable Button | 16:11 |
| 89 | More Reusability With the "children" Prop | 08:14 |
| 90 | EXERCISE #2: Accordion Component (v2) | 10:16 |
| 91 | CHALLENGE #1: Tip Calculator | 22:10 |
| 92 | Section Overview | 00:56 |
| 93 | Project Setup | 03:53 |
| 94 | Building the Static App: List of Friends | 12:03 |
| 95 | Building the Static App: Forms | 09:28 |
| 96 | Displaying the New Friend Form | 06:35 |
| 97 | Adding a New Friend | 18:39 |
| 98 | Selecting a Friend | 15:03 |
| 99 | Creating Controlled Elements | 09:54 |
| 100 | Splitting a Bill | 12:49 |
| 101 | Introduction to Part 2 | 01:16 |
| 102 | Section Overview | 01:01 |
| 103 | Setting Up the "usePopcorn" Project | 04:11 |
| 104 | How to Split a UI Into Components | 12:36 |
| 105 | Splitting Components in Practice | 23:59 |
| 106 | Component Categories | 02:43 |
| 107 | Prop Drilling | 07:32 |
| 108 | Component Composition | 04:52 |
| 109 | Fixing Prop Drilling With Composition (And Building a Layout) | 08:50 |
| 110 | Using Composition to Make a Reusable Box | 06:31 |
| 111 | Passing Elements as Props (Alternative to children) | 04:45 |
| 112 | Building a Reusable Star Rating Component | 11:23 |
| 113 | Creating the Stars | 13:05 |
| 114 | Handling Hover Events | 07:44 |
| 115 | Props as a Component API | 04:29 |
| 116 | Improving Reusability With Props | 19:28 |
| 117 | PropTypes | 07:25 |
| 118 | CHALLENGE #1: Text Expander Component | 18:21 |
| 119 | Section Overview | 01:56 |
| 120 | Project Setup and Walkthrough | 11:12 |
| 121 | Components, Instances, and Elements | 05:10 |
| 122 | Instances and Elements in Practice | 07:54 |
| 123 | How Rendering Works: Overview | 06:56 |
| 124 | How Rendering Works: The Render Phase | 18:29 |
| 125 | How Rendering Works: The Commit Phase | 11:28 |
| 126 | How Diffing Works | 05:53 |
| 127 | Diffing Rules in Practice | 05:14 |
| 128 | The Key Prop | 07:42 |
| 129 | Resetting State With the Key Prop | 04:03 |
| 130 | Using the Key Prop to Fix Our Eat-'N-Split App | 04:08 |
| 131 | Rules for Render Logic: Pure Components | 09:25 |
| 132 | State Update Batching | 09:12 |
| 133 | State Update Batching in Practice | 15:44 |
| 134 | How Events Work in React | 13:43 |
| 135 | Libraries vs. Frameworks & The React Ecosystem | 09:53 |
| 136 | Section Summary: Practical Takeaways | 10:28 |
| 137 | Section Overview | 00:59 |
| 138 | The Component Lifecycle | 04:32 |
| 139 | How NOT to Fetch Data in React | 09:49 |
| 140 | useEffect to the Rescue | 04:41 |
| 141 | A First Look at Effects | 06:24 |
| 142 | Using an async Function | 05:41 |
| 143 | Adding a Loading State | 03:48 |
| 144 | Handling Errors | 13:03 |
| 145 | The useEffect Dependency Array | 12:18 |
| 146 | Synchronizing Queries With Movie Data | 15:09 |
| 147 | Selecting a Movie | 13:20 |
| 148 | Loading Movie Details | 17:44 |
| 149 | Adding a Watched Movie | 26:12 |
| 150 | Adding a New Effect: Changing Page Title | 08:45 |
| 151 | The useEffect Cleanup Function | 04:22 |
| 152 | Cleaning Up the Title | 05:23 |
| 153 | Cleaning Up Data Fetching | 10:17 |
| 154 | One More Effect: Listening to a Keypress | 14:07 |
| 155 | CHALLENGE #1: Currency Converter | 16:44 |
| 156 | Section Overview | 00:58 |
| 157 | React Hooks and Their Rules | 10:56 |
| 158 | The Rules of Hooks in Practice | 08:37 |
| 159 | More Details of useState | 12:31 |
| 160 | Initializing State With a Callback (Lazy Initial State) | 13:31 |
| 161 | useState Summary | 03:15 |
| 162 | How NOT to Select DOM Elements in React | 03:39 |
| 163 | Introducing Another Hook: useRef | 05:37 |
| 164 | Refs to Select DOM Elements | 10:10 |
| 165 | Refs to Persist Data Between Renders | 10:16 |
| 166 | What are Custom Hooks? When to Create One? | 04:23 |
| 167 | Creating our First Custom Hook: useMovies | 13:03 |
| 168 | Creating useLocalStorageState | 09:07 |
| 169 | Creating useKey | 08:20 |
| 170 | CHALLENGE #1: useGeolocate | 07:28 |
| 171 | Section Overview | 01:17 |
| 172 | Our First Class Component | 09:33 |
| 173 | Working With Event Handlers | 10:26 |
| 174 | Class Components vs. Function Components | 05:38 |
| 175 | Starting the "Classy Weather" App | 07:46 |
| 176 | Fetching Weather Data | 09:40 |
| 177 | Displaying the Weather | 14:11 |
| 178 | Removing Boilerplate Code With Class Fields | 04:06 |
| 179 | Child to Parent Communication | 04:20 |
| 180 | Lifecycle Methods | 15:37 |
| 181 | Introduction to Part 3 | 01:12 |
| 182 | Section Overview | 01:04 |
| 183 | Yet Another Hook: useReducer | 18:00 |
| 184 | Managing Related Pieces of State | 12:24 |
| 185 | Managing State With useReducer | 14:15 |
| 186 | The "React Quiz" App | 07:58 |
| 187 | Loading Questions from a Fake API | 18:32 |
| 188 | Handling Loading, Error, and Ready Status | 09:06 |
| 189 | Starting a New Quiz | 04:55 |
| 190 | Displaying Questions | 07:46 |
| 191 | Handling New Answers | 16:43 |
| 192 | Moving to the Next Question | 06:23 |
| 193 | Displaying Progress | 08:58 |
| 194 | Finishing a Quiz | 15:08 |
| 195 | Restarting a Quiz | 07:06 |
| 196 | Setting Up a Timer With useEffect | 20:57 |
| 197 | Section Summary: useState vs. useReducer | 05:55 |
| 198 | CHALLENGE #1: Creating a Bank Account With useReducer | 19:51 |
| 199 | Section Overview | 01:02 |
| 200 | Creating Our First App With Vite: "WorldWise" | 15:42 |
| 201 | Routing and Single-Page Applications (SPAs) | 06:41 |
| 202 | Implementing Main Pages and Routes | 12:16 |
| 203 | Linking Between Routes With <Link /> and <NavLink /> | 09:58 |
| 204 | Styling Options For React Applications | 05:51 |
| 205 | Using CSS Modules | 16:31 |
| 206 | Building the Pages | 17:00 |
| 207 | Building the App Layout | 08:45 |
| 208 | Nested Routes and Index Route | 13:26 |
| 209 | Implementing the Cities List | 18:43 |
| 210 | Implementing the Countries List | 11:08 |
| 211 | Storing State in the URL | 05:32 |
| 212 | Dynamic Routes With URL Parameters | 10:29 |
| 213 | Reading and Setting a Query String | 10:35 |
| 214 | Programmatic Navigation with useNavigate | 11:51 |
| 215 | Programmatic Navigation with <Navigate /> | 04:13 |
| 216 | Section Overview | 01:00 |
| 217 | CHALLENGE #1: Understand "The Atomic Blog" App | 04:23 |
| 218 | What is the Context API? | 05:17 |
| 219 | Creating and Providing a Context | 09:27 |
| 220 | Consuming the Context | 10:54 |
| 221 | Advanced Pattern: A Custom Provider and Hook | 16:16 |
| 222 | Thinking In React: Advanced State Management | 11:39 |
| 223 | Back to "WorldWise": Creating a CitiesContext | 08:33 |
| 224 | Consuming the CitiesContext | 04:27 |
| 225 | Finishing the City View | 17:59 |
| 226 | Including a Map With the Leaflet Library | 09:26 |
| 227 | Displaying City Markers on Map | 05:59 |
| 228 | Interacting With the Map | 13:39 |
| 229 | Setting Map Position With Geolocation | 11:34 |
| 230 | Fetching City Data in the Form | 17:43 |
| 231 | Creating a New City | 23:29 |
| 232 | Deleting a City | 05:38 |
| 233 | Advanced State Management System: Context + useReducer | 22:39 |
| 234 | Adding Fake Authentication: Setting Up Context | 11:04 |
| 235 | Adding Fake Authentication: Implementing "Login" | 16:25 |
| 236 | Adding Fake Authentication: Protecting a Route | 11:22 |
| 237 | CHALLENGE #2: Refactoring "React Quiz" to Context API | 08:23 |
| 238 | Section Overview | 01:04 |
| 239 | Performance Optimization and Wasted Renders | 06:07 |
| 240 | The Profiler Developer Tool | 08:22 |
| 241 | A Surprising Optimization Trick With children | 11:50 |
| 242 | Understanding memo | 05:30 |
| 243 | memo in Practice | 13:18 |
| 244 | Understanding useMemo and useCallback | 06:40 |
| 245 | useMemo in Practice | 08:43 |
| 246 | useCallback in Practice | 10:10 |
| 247 | Optimizing Context Re-Renders | 14:49 |
| 248 | Back to The "WorldWise" App | 12:38 |
| 249 | Optimizing Bundle Size With Code Splitting | 15:53 |
| 250 | Don't Optimize Prematurely! | 03:00 |
| 251 | useEffect Rules and Best Practices | 10:02 |
| 252 | CHALLENGE #1: Fix Performance Issues in "Workout Timer" | 12:16 |
| 253 | Setting State Based on Other State Updates | 11:56 |
| 254 | Using Helper Functions In Effects | 15:05 |
| 255 | Closures in Effects | 09:53 |
| 256 | Section Overview | 01:08 |
| 257 | Introduction to Redux | 12:15 |
| 258 | Creating a Reducer: Bank Account | 10:48 |
| 259 | Creating a Redux Store | 09:47 |
| 260 | Working With Action Creators | 06:29 |
| 261 | Adding More State: Customer | 12:31 |
| 262 | Professional Redux File Structure: State Slices | 11:48 |
| 263 | Back to React! Connecting our Redux App With React | 05:47 |
| 264 | Dispatching Actions from Our React App | 17:22 |
| 265 | The Legacy Way of Connecting Components to Redux | 04:51 |
| 266 | Redux Middleware and Thunks | 04:29 |
| 267 | Making an API Call With Redux Thunks | 17:51 |
| 268 | The Redux DevTools | 10:22 |
| 269 | What is Redux Toolkit (RTK)? | 03:41 |
| 270 | Creating the Store With RTK | 04:38 |
| 271 | Creating the Account Slice | 21:44 |
| 272 | Back to Thunks | 05:03 |
| 273 | Creating the Customer Slice | 09:15 |
| 274 | Redux vs. Context API | 07:44 |
| 275 | Introduction to Part 4 | 01:28 |
| 276 | Section Overview | 00:52 |
| 277 | Setting Up a New Project: "Fast React Pizza Co." | 08:14 |
| 278 | Application Planning | 21:25 |
| 279 | Setting Up a Professional File Structure | 08:21 |
| 280 | A New Way Of Implementing Routes | 10:31 |
| 281 | Building the App Layout | 11:19 |
| 282 | Fetching Data With React Router "Loaders": Pizza Menu | 11:51 |
| 283 | Displaying a Loading Indicator | 06:01 |
| 284 | Handling Errors With Error Elements | 06:25 |
| 285 | Fetching Orders | 12:41 |
| 286 | Writing Data With React Router "Actions" | 19:05 |
| 287 | Error Handling in Form Actions | 10:27 |
| 288 | Section Overview | 01:00 |
| 289 | What is Tailwind CSS? | 07:57 |
| 290 | Setting Up Tailwind CSS | 12:04 |
| 291 | Working With Color | 09:00 |
| 292 | Styling Text | 10:01 |
| 293 | The Box Model: Spacing, Borders, and Display | 11:18 |
| 294 | Responsive Design | 10:50 |
| 295 | Using Flexbox | 06:32 |
| 296 | Using CSS Grid | 12:21 |
| 297 | Styling Buttons: Element States and Transitions | 12:13 |
| 298 | Styling Form Elements | 10:23 |
| 299 | Reusing Styles With @apply | 04:29 |
| 300 | Reusing Styles With React Components | 12:28 |
| 301 | Absolute Positioning, z-index, and More | 06:31 |
| 302 | Configuring Tailwind: Custom Font Family | 10:54 |
| 303 | Styling the Menu | 18:28 |
| 304 | Styling the Cart | 11:47 |
| 305 | Styling the Order Form | 13:22 |
| 306 | Styling the Order Overview | 13:55 |
| 307 | Section Overview | 00:40 |
| 308 | Modeling the "User" State With Redux Toolkit | 13:25 |
| 309 | Reading and Updating the User State | 10:38 |
| 310 | Modeling the "Cart" State | 14:21 |
| 311 | Adding Menu Items to the Cart | 07:07 |
| 312 | Building the Cart Overview With Redux Selectors | 09:00 |
| 313 | Building the Cart Page | 07:06 |
| 314 | Deleting Cart Items | 14:45 |
| 315 | Updating Cart Quantities | 13:33 |
| 316 | Using the Cart for New Orders | 14:32 |
| 317 | Redux Thunks With createAsyncThunk | 16:05 |
| 318 | Integrating Geolocation | 16:05 |
| 319 | Fetching Data Without Navigation: useFetcher | 12:45 |
| 320 | Updating Data Without Navigation | 14:38 |
| 321 | Section Overview | 00:55 |
| 322 | Application Planning | 18:30 |
| 323 | Setting Up the Project: "The Wild Oasis" | 08:12 |
| 324 | Introduction to Styled Components | 12:23 |
| 325 | Global Styles With Styled Components | 14:37 |
| 326 | Styled Component Props and the "css" Function | 10:26 |
| 327 | Building More Reusable Styled Components | 11:04 |
| 328 | Setting Up Pages and Routes | 06:28 |
| 329 | Building the App Layout | 14:22 |
| 330 | Building the Sidebar and Main Navigation | 13:10 |
| 331 | Section Overview | 00:47 |
| 332 | What is Supabase? | 02:25 |
| 333 | Creating a New Database | 05:28 |
| 334 | Modeling Application State | 05:35 |
| 335 | Creating Tables | 09:32 |
| 336 | Relationships Between Tables | 08:30 |
| 337 | Adding Security Policies (RLS) | 06:19 |
| 338 | Connecting Supabase With Our React App | 08:46 |
| 339 | Setting Up Storage Buckets | 04:40 |
| 340 | Section Overview | 00:47 |
| 341 | What is React Query? | 06:21 |
| 342 | Setting Up React Query | 07:20 |
| 343 | Fetching Cabin Data | 21:42 |
| 344 | Mutations: Deleting a Cabin | 17:22 |
| 345 | Displaying Toasts (Notifications) | 08:42 |
| 346 | Introducing Another Library: React Hook Form | 11:18 |
| 347 | Creating a New Cabin | 12:14 |
| 348 | Handling Form Errors | 22:43 |
| 349 | Uploading Images to Supabase | 14:42 |
| 350 | Editing a Cabin | 30:40 |
| 351 | Abstracting React Query Into Custom Hooks | 17:27 |
| 352 | Duplicating Cabins | 06:50 |
| 353 | Fetching Applications Settings | 08:48 |
| 354 | Updating Application Settings | 11:29 |
| 355 | Section Overview | 01:14 |
| 356 | An Overview of Reusability in React | 05:45 |
| 357 | Setting Up an Example | 06:20 |
| 358 | The Render Props Pattern | 07:43 |
| 359 | A Look at Higher-Order Components (HOC) | 08:07 |
| 360 | The Compound Component Pattern | 18:18 |
| 361 | Building a Modal Window Using a React Portal | 19:55 |
| 362 | Converting the Modal to a Compound Component | 21:46 |
| 363 | Detecting a Click Outside the Modal | 13:38 |
| 364 | Confirming Cabin Deletions | 08:43 |
| 365 | Building a Reusable Table | 11:46 |
| 366 | Applying the Render Props Pattern | 04:39 |
| 367 | Building a Reusable Context Menu | 32:36 |
| 368 | Section Overview | 01:18 |
| 369 | Client-Side Filtering: Filtering Cabins | 18:50 |
| 370 | Client-Side Sorting: Sorting Cabins | 20:26 |
| 371 | Building the Bookings Table | 18:00 |
| 372 | Uploading Sample Data | 06:16 |
| 373 | API-Side Filtering: Filtering Bookings | 17:11 |
| 374 | API-Side Sorting: Sorting Bookings | 06:54 |
| 375 | Building a Reusable Pagination Component | 15:53 |
| 376 | API-Side Pagination: Paginating Bookings | 10:40 |
| 377 | Prefetching With React Query | 07:59 |
| 378 | Building the Single Booking Page | 15:18 |
| 379 | Checking In a Booking | 28:19 |
| 380 | Adding Optional Breakfast | 14:05 |
| 381 | Checking Out a Booking (+ Fixing a Small Bug) | 09:51 |
| 382 | Deleting a Booking | 13:34 |
| 383 | Authentication: User Login With Supabase | 22:07 |
| 384 | Authorization: Protecting Routes | 23:25 |
| 385 | User Logout | 09:01 |
| 386 | Fixing an Important Bug | 05:36 |
| 387 | Building the Sign Up Form | 11:00 |
| 388 | User Sign Up | 15:02 |
| 389 | Authorization on Supabase: Protecting Database (RLS) | 04:41 |
| 390 | Building The App Header | 10:19 |
| 391 | Updating User Data and Password | 28:27 |
| 392 | Implementing Dark Mode With CSS Variables | 21:30 |
| 393 | Building the Dashboard Layout | 04:27 |
| 394 | Computing Recent Bookings and Stays | 15:22 |
| 395 | Displaying Statistics | 12:03 |
| 396 | Displaying a Line Chart With the Recharts Library | 22:56 |
| 397 | Displaying a Pie Chart | 15:53 |
| 398 | Displaying Stays for Current Day | 20:42 |
| 399 | Error Boundaries | 09:45 |
| 400 | Final Touches + Fixing Bugs | 14:40 |
| 401 | Section Overview | 01:10 |
| 402 | Deploying to Netlify | 11:21 |
| 403 | Setting Up a Git and GitHub Repository | 16:17 |
| 404 | Deploying to Vercel | 05:55 |
| 405 | Where to Go from Here | 03:21 |
Similar courses to The Ultimate React Course 2023: React, Redux & More
Doctor Appointment Booking App with React ,Firebase , ANT D
Build a Slack Chat App with React, Redux, and Firebase
Classic React
React - The Complete Guide 2024
Go Full Stack with Spring Boot and React
MERN Stack Web Development with Ultimate Authentication
MERN Stack Front To Back: Full Stack React, Redux & Node.js.
React Summit Remote Edition 2021
