The Ultimate React Course 2023: React, Redux & More

67h 14m 41s
English
Paid
January 20, 2024

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

Join premium to watch
Go to premium
# 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

Make 20 React Apps

Make 20 React AppsChris Sev

Duration 12 hours 20 minutes 3 seconds
Build a Slack Chat App with React, Redux, and Firebase
Go Full Stack with Spring Boot and React

Go Full Stack with Spring Boot and Reactudemy

Duration 11 hours 43 minutes 36 seconds
The complete React Fullstack course ( 2021 edition )

The complete React Fullstack course ( 2021 edition )udemy

Duration 76 hours 58 minutes 6 seconds
Stripe Payments JavaScript Course

Stripe Payments JavaScript Coursefireship.io

Duration 1 hour 29 minutes 26 seconds
Server Side Rendering with React and Redux
Modern React with Redux [2023 Update]

Modern React with Redux [2023 Update]udemyStephen Grider

Duration 37 hours 44 minutes 46 seconds
The Ultimate React Course 2024: React, Redux & More

The Ultimate React Course 2024: React, Redux & Moreudemy

Duration 83 hours 56 minutes 37 seconds
The Modern React 18 Bootcamp - A Complete Developer Guide
Build a Spotify Connected App

Build a Spotify Connected Appfullstack.io

Duration 3 hours 47 minutes 28 seconds