The Ultimate React Course 2025: React, Next.js, Redux & More
-
Welcome, Welcome, Welcome!
-
PART 1: REACT FUNDAMENTALS [4 PROJECTS]
-
A First Look at ReactSection Overview0sWhy Do Front-End Frameworks Exist?0sReact vs. Vanilla JavaScript0sWhat is React?0sSetting Up Our Development Environment0sPure React0sA Quick Look at React’s Official Documentation0sSetting Up a New React Project: The Options0sSetting Up a Project With Create-React-App0s
-
[Optional] Review of Essential JavaScript for ReactSection Overview0sDestructuring Objects and Arrays0sRest/Spread Operator0sTemplate Literals0sTernaries Instead of if/else Statements0sArrow Functions0sShort-Circuiting And Logical Operators: &&, ||, ??0sOptional Chaining0sThe Array map Method0sThe Array filter Method0sThe Array reduce Method0sThe Array sort Method0sWorking With Immutable Arrays0sAsynchronous JavaScript: Promises0sAsynchronous JavaScript: Async/Await0s
-
Working With Components, Props, and JSXSection Overview0sRendering the Root Component and Strict Mode0sBefore We Start Coding: Debugging0sComponents as Building Blocks0sCreating And Reusing a Component0sWhat is JSX?0sCreating More Components0sJavaScript Logic in Components0sSeparation of Concerns0sStyling React Applications0sPassing and Receiving Props0sProps, Immutability, and One-Way Data Flow0sCHALLENGE #1: Profile Card (v1)0sThe Rules of JSX0sRendering Lists0sConditional Rendering With &&0sConditional Rendering With Ternaries0sConditional Rendering With Multiple Returns0sExtracting JSX Into a New Component0sDestructuring Props0sReact Fragments0sSetting Classes and Text Conditionally0sSection Summary0sCHALLENGE #2: Profile Card (v2)0s
-
State, Events, and Forms: Interactive ComponentsSection Overview0sLet’s Build a Steps Component0sHandling Events the React Way0sWhat is State in React?0sCreating a State Variable With useState0sDon’t Set State Manually!0sThe Mechanics of State0sAdding Another Piece of State0sReact Developer Tools0sUpdating State Based on Current State0sMore Thoughts About State + State Guidelines0sA Vanilla JavaScript Implementation0sCHALLENGE #1: Date Counter (v1)0sStarting a New Project: The “Far Away” Travel List0sBuilding the Layout0sRendering the Items List0sBuilding a Form and Handling Submissions0sControlled Elements0sState vs. Props0sEXERCISE #1: Flashcards0sCHALLENGE #2: Date Counter (v2)0s
-
Thinking In React: State ManagementSection Overview0sWhat is “Thinking in React”?0sFundamentals of State Management0sThinking About State and Lifting State Up0sReviewing “Lifting Up State”0sDeleting an Item: More Child-to-Parent Communication!0sUpdating an Item: Complex Immutable Data Operation0sDerived State0sCalculating Statistics as Derived State0sSorting Items0sClearing the List0sMoving Components Into Separate Files0sEXERCISE #1: Accordion Component (v1)0sThe “children” Prop: Making a Reusable Button0sMore Reusability With the “children” Prop0sEXERCISE #2: Accordion Component (v2)0sCHALLENGE #1: Tip Calculator0s
-
[Optional] Practice Project: Eat-‘N-Split
-
PART 2: INTERMEDIATE REACT [2 PROJECTS]
-
Thinking in React: Components, Composition, and ReusabilitySection Overview0sSetting Up the “usePopcorn” Project0sHow to Split a UI Into Components0sSplitting Components in Practice0sComponent Categories0sProp Drilling0sComponent Composition0sFixing Prop Drilling With Composition (And Building a Layout)0sUsing Composition to Make a Reusable Box0sPassing Elements as Props (Alternative to children)0sBuilding a Reusable Star Rating Component0sCreating the Stars0sHandling Hover Events0sProps as a Component API0sImproving Reusability With Props0sPropTypes0sCHALLENGE #1: Text Expander Component0s
-
How React Works Behind the ScenesSection Overview0sProject Setup and Walkthrough0sComponents, Instances, and Elements0sInstances and Elements in Practice0sHow Rendering Works: Overview0sHow Rendering Works: The Render Phase0sHow Rendering Works: The Commit Phase0sHow Diffing Works0sDiffing Rules in Practice0sThe Key Prop0sResetting State With the Key Prop0sUsing the Key Prop to Fix Our Eat-‘N-Split App0sRules for Render Logic: Pure Components0sState Update Batching0sState Update Batching in Practice0sHow Events Work in React0sLibraries vs. Frameworks & The React Ecosystem0sSection Summary: Practical Takeaways0s
-
Effects and Data FetchingSection Overview0sThe Component Lifecycle0sHow NOT to Fetch Data in React0suseEffect to the Rescue0sA First Look at Effects0sUsing an async Function0sAdding a Loading State0sHandling Errors0sThe useEffect Dependency Array0sSynchronizing Queries With Movie Data0sSelecting a Movie0sLoading Movie Details0sAdding a Watched Movie0sAdding a New Effect: Changing Page Title0sThe useEffect Cleanup Function0sCleaning Up the Title0sCleaning Up Data Fetching0sOne More Effect: Listening to a Keypress0sCHALLENGE #1: Currency Converter0s
-
Custom Hooks, Refs, and More StateSection Overview0sReact Hooks and Their Rules0sThe Rules of Hooks in Practice0sMore Details of useState0sInitializing State With a Callback (Lazy Initial State)0suseState Summary0sHow NOT to Select DOM Elements in React0sIntroducing Another Hook: useRef0sRefs to Select DOM Elements0sRefs to Persist Data Between Renders0sWhat are Custom Hooks? When to Create One?0sCreating our First Custom Hook: useMovies0sCreating useLocalStorageState0sCreating useKey0sCHALLENGE #1: useGeolocate0s
-
[Optional] React Before Hooks: Class-Based ReactSection Overview0sOur First Class Component0sWorking With Event Handlers0sClass Components vs. Function Components0sStarting the “Classy Weather” App0sFetching Weather Data0sDisplaying the Weather0sRemoving Boilerplate Code With Class Fields0sChild to Parent Communication0sLifecycle Methods0s
-
PART 3: ADVANCED REACT + REDUX [4 PROJECTS]
-
The Advanced useReducer HookSection Overview0sYet Another Hook: useReducer0sManaging Related Pieces of State0sManaging State With useReducer0sThe “React Quiz” App0sLoading Questions from a Fake API0sHandling Loading, Error, and Ready Status0sStarting a New Quiz0sDisplaying Questions0sHandling New Answers0sMoving to the Next Question0sDisplaying Progress0sFinishing a Quiz0sRestarting a Quiz0sSetting Up a Timer With useEffect0sSection Summary: useState vs. useReducer0sCHALLENGE #1: Creating a Bank Account With useReducer0s
-
React Router: Building Single-Page Applications (SPA)Section Overview0sCreating Our First App With Vite: “WorldWise”0sRouting and Single-Page Applications (SPAs)0sImplementing Main Pages and Routes0sLinking Between Routes With <Link / and <NavLink /0sStyling Options For React Applications0sUsing CSS Modules0sBuilding the Pages0sBuilding the App Layout0sNested Routes and Index Route0sImplementing the Cities List0sImplementing the Countries List0sStoring State in the URL0sDynamic Routes With URL Parameters0sReading and Setting a Query String0sProgrammatic Navigation with useNavigate0sProgrammatic Navigation with <Navigate /0s
-
Advanced State Management: The Context APISection Overview0sCHALLENGE #1: Understand “The Atomic Blog” App0sWhat is the Context API?0sCreating and Providing a Context0sConsuming the Context0sAdvanced Pattern: A Custom Provider and Hook0sThinking In React: Advanced State Management0sBack to “WorldWise”: Creating a CitiesContext0sConsuming the CitiesContext0sFinishing the City View0sIncluding a Map With the Leaflet Library0sDisplaying City Markers on Map0sInteracting With the Map0sSetting Map Position With Geolocation0sFetching City Data in the Form0sCreating a New City0sDeleting a City0sAdvanced State Management System: Context + useReducer0sAdding Fake Authentication: Setting Up Context0sAdding Fake Authentication: Implementing “Login”0sAdding Fake Authentication: Protecting a Route0sCHALLENGE #2: Refactoring “React Quiz” to Context API0s
-
Performance Optimization and Advanced useEffectSection Overview0sPerformance Optimization and Wasted Renders0sThe Profiler Developer Tool0sA Surprising Optimization Trick With children0sUnderstanding memo0smemo in Practice0sUnderstanding useMemo and useCallback0suseMemo in Practice0suseCallback in Practice0sOptimizing Context Re-Renders0sBack to The “WorldWise” App0sOptimizing Bundle Size With Code Splitting0sDon’t Optimize Prematurely!0suseEffect Rules and Best Practices0sCHALLENGE #1: Fix Performance Issues in “Workout Timer”0sSetting State Based on Other State Updates0sUsing Helper Functions In Effects0sClosures in Effects0s
-
Redux and Modern Redux Toolkit (With Thunks)Section Overview0sIntroduction to Redux0sCreating a Reducer: Bank Account0sCreating a Redux Store0sWorking With Action Creators0sAdding More State: Customer0sProfessional Redux File Structure: State Slices0sBack to React! Connecting our Redux App With React0sDispatching Actions from Our React App0sThe Legacy Way of Connecting Components to Redux0sRedux Middleware and Thunks0sMaking an API Call With Redux Thunks0sThe Redux DevTools0sWhat is Redux Toolkit (RTK)?0sCreating the Store With RTK0sCreating the Account Slice0sBack to Thunks0sCreating the Customer Slice0sRedux vs. Context API0s
-
PART 4: PROFESSIONAL REACT DEVELOPMENT [2 PROJECTS]
-
React Router With Data Loading (v6.4+)Section Overview0sSetting Up a New Project: “Fast React Pizza Co.”0sApplication Planning0sSetting Up a Professional File Structure0sA New Way Of Implementing Routes0sBuilding the App Layout0sFetching Data With React Router “Loaders”: Pizza Menu0sDisplaying a Loading Indicator0sHandling Errors With Error Elements0sFetching Orders0sWriting Data With React Router “Actions”0sError Handling in Form Actions0s
-
[Optional] Tailwind CSS Crash Course: Styling the AppSection Overview0sWhat is Tailwind CSS?0sSetting Up Tailwind CSS0sWorking With Color0sStyling Text0sThe Box Model: Spacing, Borders, and Display0sResponsive Design0sUsing Flexbox0sUsing CSS Grid0sStyling Buttons: Element States and Transitions0sStyling Form Elements0sReusing Styles With @apply0sReusing Styles With React Components0sAbsolute Positioning, z-index, and More0sConfiguring Tailwind: Custom Font Family0sStyling the Menu0sStyling the Cart0sStyling the Order Form0sStyling the Order Overview0s
-
Adding Redux and Advanced React RouterSection Overview0sModeling the “User” State With Redux Toolkit0sReading and Updating the User State0sModeling the “Cart” State0sAdding Menu Items to the Cart0sBuilding the Cart Overview With Redux Selectors0sBuilding the Cart Page0sDeleting Cart Items0sUpdating Cart Quantities0sUsing the Cart for New Orders0sRedux Thunks With createAsyncThunk0sIntegrating Geolocation0sFetching Data Without Navigation: useFetcher0sUpdating Data Without Navigation0s
-
Setting Up Our Biggest Project + Styled ComponentsSection Overview0sApplication Planning0sSetting Up the Project: “The Wild Oasis”0sIntroduction to Styled Components0sGlobal Styles With Styled Components0sStyled Component Props and the “css” Function0sBuilding More Reusable Styled Components0sSetting Up Pages and Routes0sBuilding the App Layout0sBuilding the Sidebar and Main Navigation0s
-
Supabase Crash Course: Building a Back-End!
-
React Query: Managing Remote StateSection Overview0sWhat is React Query?0sSetting Up React Query0sMake Sure to Use React Query v4!Fetching Cabin Data0sMutations: Deleting a Cabin0sDisplaying Toasts (Notifications)0sIntroducing Another Library: React Hook Form0sCreating a New Cabin0sHandling Form Errors0sUploading Images to Supabase0sEditing a Cabin0sAbstracting React Query Into Custom Hooks0sDuplicating Cabins0sFetching Applications Settings0sUpdating Application Settings0s
-
Advanced React PatternsSection Overview0sAn Overview of Reusability in React0sSetting Up an Example0sThe Render Props Pattern0sA Look at Higher-Order Components (HOC)0sThe Compound Component Pattern0sBuilding a Modal Window Using a React Portal0sConverting the Modal to a Compound Component0sDetecting a Click Outside the Modal0sConfirming Cabin Deletions0sBuilding a Reusable Table0sApplying the Render Props Pattern0sBuilding a Reusable Context Menu0s
-
[Optional] Implementing More Features: Authentication, Dark Mode, Dashboard, etcSection Overview0sClient-Side Filtering: Filtering Cabins0sClient-Side Sorting: Sorting Cabins0sBuilding the Bookings Table0sUploading Sample Data0sAPI-Side Filtering: Filtering Bookings0sAPI-Side Sorting: Sorting Bookings0sBuilding a Reusable Pagination Component0sAPI-Side Pagination: Paginating Bookings0sPrefetching With React Query0sBuilding the Single Booking Page0sChecking In a Booking0sAdding Optional Breakfast0sChecking Out a Booking (+ Fixing a Small Bug)0sDeleting a Booking0sAuthentication: User Login With Supabase0sAuthorization: Protecting Routes0sUser Logout0sFixing an Important Bug0sBuilding the Sign Up Form0sUser Sign Up0sAuthorization on Supabase: Protecting Database (RLS)0sBuilding The App Header0sUpdating User Data and Password0sImplementing Dark Mode With CSS Variables0sBuilding the Dashboard Layout0sComputing Recent Bookings and Stays0sDisplaying Statistics0sDisplaying a Line Chart With the Recharts Library0sDisplaying a Pie Chart0sDisplaying Stays for Current Day0sError Boundaries0sFinal Touches + Fixing Bugs0s
-
Deployment With Netlify and Vercel
-
PART 5: FULL-STACK REACT WITH NEXT.JS [1 PROJECT]
-
Overview of Next.js With the “App” RouterSection Overview0sDownload Fresh Starter Files + Slides!An Overview of Server-Side Rendering (SSR)0sExperiment: Manual SSR With React DOM + Node.js0sThe Missing Piece: Hydration0sImplementing Hydration0sWhat is Next.js?0sSetting Up a Next.js Project0sFrequent Next.js Updates + DocumentationDefining Routes and Pages0sNavigating Between Pages0sCreating a Layout0sWhat are React Server Components? (RSC – Part 1)0sFetching Data in a Page0sAdding Interactivity With Client Components0sDisplaying a Loading Indicator0sHow RSC Works Behind the Scenes (RSC – Part 2)0sRSC vs. SSR: How are They Related? (RSC – Part 3)0s
-
Starting to Build the “Wild Oasis” WebsiteSection Overview0sProject Planning: “The Wild Oasis” Customer Website0sProject Organization0sStyling With Tailwind CSS0sAdding Page Metadata and Favicon0sLoading and Optimizing Fonts0sImproving the Navigation and Root Layout0sOptimizing Images With Next.js <Image / Component0sBuilding the Home Page0sBuilding the About Page With Responsive Images0sAdding Nested Routes and Pages0sAdding a Nested Layout0s
-
Data Fetching, Caching, and RenderingSection Overview0sSetting Up Supabase0sFetching and Displaying Cabin List0sStreaming Route Segments With loading.js File0sWhat is React Suspense?0sStreaming UI With Suspense: Cabin List0sDynamic Route Segments: Building the Cabin Page0sGenerating Dynamic Metadata0sError Handling: Setting Up Error Boundaries0sError Handling: “Not Found” Errors0sDifferent Types of SSR: Static vs. Dynamic Rendering0sAnalyzing Rendering in Our App0sMaking Dynamic Pages Static With generateStaticParams0sStatic Site Generation (SSG)0sPartial Pre-Rendering0sHow Next.js Caches Data0sExperimenting With Caching and ISR0sCHALLENGE #1: Fetching the Number of Cabins0s
-
Client and Server InteractionsSection Overview0sBlurring the Boundary Between Server and Client (RSC – Part 4)0sClient Components in Server Components0sHighlighting Current Side Navigation Link0sSharing State Between Client and Server: The URL0sAdvanced: Server Components in Client Components0sData Fetching Strategies for the Reservation Section0sUsing the Context API for State Management0sCreating an API Endpoint With Route Handlers0s
-
Authentication With NextAuth (Auth.js)
-
Mutations With Server Actions + Modern React HooksSection Overview0sWhat are Server Actions?0sUpdating the Profile Using a Server Action0sManual Cache Revalidation0sDisplaying a Loading Indicator: The useFormStatus Hook0sBuilding the Guest’s Reservations Page0sDeleting a Reservation0sAnother Loading Indicator: The useTransition Hook0sCHALLENGE #1: Updating a Reservation0sRemoving Reservations Immediately: The useOptimistic Hook0sBack to the Cabin Page: Finishing the Date Selector0sCreating a New Reservation0s
-
Deployment With Vercel
-
[OPTIONAL] Legacy Next.js: The “Pages” RouterSection Overview0sSetting Up Another Project0sRoutes, Pages, and Navigation0sDynamic Routes0sCreating a Layout With a Custom _App0sCreating Pages0sDefining Page Title and Favicon0sFetching Data With getStaticProps (SSG)0sFetching Data With getServerSideProps (SSR)0sAPI Routes0sHandling Form Submissions0s
-
The End!
In 2024, 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 2024 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 epic React (+ Next.js) 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
Many sections (16 hours!) on Next.js with the modern “app” router (with React Server Components and Server Actions)
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, Next.js, 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 10+ 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.
[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,900,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 and Next.js developer in just a couple of weeks.
Ready to become a confident and independent React + Next.js 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]
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.]
Next.js with the “app” router, React Server Components, and Server Actions [server-side rendering, static vs. dynamic rendering, state management between server and client, data loading strategies, streaming, caching, image and font optimization, authentication with NextAuth, modern React hooks (useFormState and useOptimistic)]
[04] By signing up today, you’ll also get:
Up-to-date HD-quality videos, that are easy to search and reference (great for Xlbake Business learners)
Downloadable slides PDF for 70+ theory videos (not boring, I promise!)
Professional English captions (not auto-generated)
Downloadable assets and starter and final code for each project
Free and fast support in the course Q&A
10+ challenges and exercises to practice your skills (solutions included)
What's included
- 84 hours on-demand video
- 9 articles
- 2 downloadable resources
- Access on mobile and TV
- Certificate of completion