Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

The Complete React 19 Developer Course (incl. Next.js 16)

Name: The Complete React 19 Developer Course (incl. Next.js 16)
Rating: 4.5 (78 reviews)

Build Stunning, Real-World Web Applications using React 19, Next.js 16. Learn React TanStack, Redux Toolkit, and more!

Created byDevelopment Island (UK)

Last updated 4/2026

English

English [Auto],

What you'll learn

Set up modern React 19 projects using Vite, including best folder structure practices.
Build user interfaces with JSX, props, conditional rendering, and dynamic lists.
Understand how the Virtual DOM, rendering, and reconciliation work in React.
Master state management using useState, useReducer, Context API, Redux Toolkit, and Zustand.
Handle user events, state updates, form interactions, and event propagation properly.
Build reusable, maintainable, production-ready React components.
Use React’s advanced hooks: useEffect, useMemo, useCallback, useRef, and custom hooks.
Learn when and how to optimize React performance using memoization and virtualization.
Understand React’s rendering cycle: trigger, re-render, batching, commit phase.
Build interactive features such as drag and drop, timers, shopping carts, search filters, and animations.
Manage CRUD operations and data persistence using localStorage and APIs.
Consume REST APIs and handle loading, success, and error states with React Query.
Design scalable React architecture like senior developers do, using clean file and component structure.
Build full-stack applications using Next.js 16 with SSR, SSG, ISR, and streaming.
Understand the difference between Client Components and Server Components in Next.js.
Use Next.js Server Actions for mutation, form handling, and data validation.
Implement authentication: Email/password, Google login, GitHub login, JWT, and protected routes.
Build real-time applications using Next.js 16 Server-Sent Events (SSE).
Integrate React apps with Supabase databases, including data fetching, insertion, and real-time updates.
Build modern fullstack features: messaging, pagination, optimistic updates, and notifications.
Implement form validation using React Hook Form and Yup/Zod.
Build professional-level UI features like dark mode, theme persistence, and admin dashboards.
Use React Router 7 for nested routes, layouts, dynamic params, and programmatic navigation.
Write clean, testable React code using React Testing Library and Jest.
Understand debugging, breakpoints, profiling, and browser developer tools for React apps.
Deploy React and Next.js applications to production environments.
Build a strong portfolio with 9 real-world React 19 and Next.js 16 projects.
Gain the skills to confidently apply for front-end or full-stack React developer roles.
Follow modern React best practices using React 19, Next.js 16, and the latest ecosystem tools.
Learn when to use Context, when to use Redux Toolkit or Zustand, and when to keep state local.
Build both UI-only and full-stack applications, including authentication and database access.
Understand server-side rendering, static generation, and revalidation in Next.js.
Handle routes protection using Next.js middleware and server-side auth checks.
Use Zod for secure and type-safe form validation and input sanitization.
Learn Error Boundaries and Suspense for safer and more resilient React applications.
Build real-time chat applications with live messaging and optimistic UI updates.
Manage images, files, and dynamic user content in Next.js applications.
Apply advanced component design patterns: render props, compound components, controlled props, state reducer pattern, and more.

Course content

29 sections • 251 lectures • 34h 37m total length

React 19 Source Code0:34
Next.js 16 Source Code0:39
How to Setup React 19 with Vite5:59
Set up a React 19 app with Vite, upgrade React and React DOM, configure the eslint plugin via Vite, and run the development server on port 5173.
Your first react component8:13
Build your first React component and render App into the div with id root using ReactDOM. Learn how JSX becomes JavaScript with Babel and how React.StrictMode detects issues in development.
Exporting React Components2:22
Export a React component as default and move it to app.js to enable reuse across the app. Import it in Main.js to improve organization and maintainability.
Building UIs with JSX: Writing Markup in React8:34
Explore JSX in React, where markup and logic merge to create declarative, stateful components. Learn how conditional rendering, component structure, and asset handling in the public folder drive dynamic UIs.
Integrating JavaScript in JSX with Curly Braces4:41
Learn to seamlessly integrate JavaScript expressions in JSX using curly braces to build dynamic, data-driven React components by embedding strings, variables, functions, and objects.
Styling React Components14:55
Learn to style React components using inline style objects, external CSS, and CSS modules; create a components folder with Google, Apple, and Amazon components, and apply scoped styles.
Working with Props in React Components8:38
Learn how to pass data with props between React components and build reusable colored components. Use destructuring, default props, children, and spread syntax to create flexible, maintainable user profiles.
Conditional Rendering 15:01
Learn conditional rendering in React by building a speed message component that uses a speed prop and a speed limit to display dynamic messages and background colors.
Conditional Rendering 25:17
Create dynamic React components through conditional rendering using a to-do list and a to-do item component. Integrate props and both ternary and short-circuiting logic to display a completion indicator.
Rendering Lists5:59
Learn to render dynamic lists in React by mapping over a cars array, using unique keys for efficient updates, and filtering by make with a reusable car list component.
Keeping Components Pure3:59
Explore component purity in React by distinguishing pure functions from impure components, avoiding side effects in render, and ensuring predictable output.
Purity props example4:53
Learn how to keep React components pure by avoiding prop mutation, using spread syntax to extend item lists, and rendering a dynamic shopping list with keys and inline styles.

JSX Review14:37
Review key JSX concepts: create and export components, embed JavaScript in JSX, pass props, conditionally render, render lists efficiently, and keep components pure.
Common mistakes - Best practises14:37
Identify and fix common jsx pitfalls while applying best practices for clean, reusable react components. Master proper syntax, including className, fragments, immutable props, and keyed lists.

Introduction1:23
Build a fully functional property rental app with dynamic listing pages, responsive designs, and interactive features like property availability indicators, using reusable components and styling in a React project.
Component Tree3:30
Design a modular React component tree for a Cambridge rental app, outlining header, title, property list, and footer, with reusable property and attribute components, including image, type label, and icons.
Building the File Structure6:47
Create a scalable, readable react file structure by organizing components into folders, building header, title, property list, and footer, and wiring them into the app for modular, maintainable code.
Build the Header8:07
Build a responsive header with three items—a brand on the left, a middle phone contact, and a right email contact—using Lucid React icons and a fixed top layout.
Build the Title3:52
Build a stylish and responsive title component for a React app by styling an h1 with top margin, inline-block, padding, and a teal bottom border, including a small-screen media query.
Build the Footer10:14
Build a dynamic footer in a React app that shows open or closed status based on current time and weekdays, and displays contact information and phone number when open.
Build the list of Properties14:14
Learn to build a dynamic property list in a React app by composing property and image components, passing props, mapping data, and styling with CSS for responsive cards.
Build the PropertyTypeLabel Component3:31
Create and integrate the property type label inside the property image, passing the type prop from parent to child with CSS styling for a semi-transparent green badge at the top-right.
Build the PropertyBanner Component3:20
Build property banner component inside the property image, render it only when the property is let, and style it as a red banner with bold white text rotated 45 degrees.
Build the IconWithText Component6:11
Build a reusable icon with text component in React by importing icons from the Lucid React library, passing icon and text as props, and styling it within the property info.
Build the PropertyAttribute Component6:54
Build a reusable property attribute component in react to display address, rent, and availability date, including styling options like color and bold, and integrate it into the property component.

Responding to Events3:46
Learn to write and manage react event handlers with onClick, using named functions and console logs to create interactive buttons that promote clean, maintainable code.
Passing Event Handlers from a Parent to a Child4:44
Learn how to pass event handling logic from a parent to a child in React by building a reusable button component, wiring onClick handlers, and changing the page background color.
Understanding Event Propagation4:30
Understand event propagation in React by observing how events bubble from child to parent. Learn to control behavior using the event object's stopPropagation to prevent bubbling.
Preventing Default Behaviour4:22
Learn to prevent default browser behaviors in React, stopping link navigation and form submissions with event.preventDefault, handling click and submit events, and accessing form data.
React State11:03
Learn to use the use state hook to manage state in React components, create multiple state variables, and understand local state with a counter and dynamic color changes.
State batching + Updating state using a value vs function5:02
Learn how to update state in React with the useState hook, distinguishing between value vs function updates to avoid stale state and state batching issues.
Updating Objects in State5:50
Update objects in React state with immutability, using spread syntax for nested updates, and leverage the Emre library's produce function to generate new immutable objects.
Updating Arrays in State10:33
Learn to manage arrays in react state by adding, removing, and updating items using immutable patterns, the spread operator, and Immer, and visualize changes with dynamic sorting and UI.
Create a Shopping Cart15:17
Build an interactive shopping cart with React state, where users add items, view cart details, and compute the total using a prices object and get total function.
Trigger=>render=>VirtualDOM=>Commit14:05
Explore the React component lifecycle from mounting to unmounting through a shopping cart example. Learn how the virtual DOM, render, commit, and reconciliation optimize updates to the real DOM.

Introduction1:29
Build a real world to-do app in React, using useState and immutable updates. Add, edit, delete, sort by priority, complete tasks, and persist data with local storage through reusable components.
Component Tree2:14
Explore the component tree of a to do list app, from the root app component to the task item and edit task form, to see how structure supports scalability.
Building the File Structure5:53
Create separate component files for the app, task form, task controls, task list, task item, and edit task form, and integrate them in App.
Rendering tasks.6:48
Build and render a to-do list in a React app by managing task state with useState, passing tasks as props, rendering with map, showing priority, and a checkbox for done.
Building the TaskControls Component6:45
Build the task controls component to sort tasks by priority and toggle show only incomplete tasks with a checkbox, using useState and prop-based communication.
Building the TaskForm Component7:41
Create a responsive task form component with text and priority inputs, using React state and onChange handlers for two-way binding, and submit via a passed addTask prop.
Toggle task completion3:35
Implement a toggle task done function in the app component, pass it through to the task list and task item components, and update tasks immutably with map and spread syntax.
Delete Tasks3:05
Create a removeTask function in the app to filter out a task by id and update state, and pass it to the task list and task items via onClick.
Edit Tasks12:16
Learn to edit tasks in a to-do list by toggling an editing task id with useState, conditionally rendering the edit form, and updating tasks immutably via an update task function.
Make changes persistent using localStorage4:34
Persist your to-do list data with local storage by creating a local storage utils module for getStoredTasks and updateLocalStorage, saving and loading tasks under the key 'tasks'.

Introduction4:15
Build a UK driving theory quiz app in React using the useReducer hook for state management, with a results view, per-question feedback, media support, and a countdown timer via useEffect.
Component Tree3:46
Explore the component tree of a driving theory test quiz app, powered by useReducer to manage question, answers, timer, progress bar, and submission state with conditional question and result views.
Building the File Structure5:51
Organize the React app by establishing a src file structure, with jsx and css, a data folder for questions, a quiz reducer, and components aligned to the component tree.
Managing Quiz State with useReducer9:58
Build a driving test quiz with React's useReducer, defining a quiz reducer and initial state to track current question, answers, navigation, and a timer via dispatch actions.
QuestionView: QuestionHeader10:14
Explore how data flows into the question view component using a questions array and state to render the current question, time left, answer options, and user answers.
QuestionView: QuestionText5:20
Build a reusable question text component and integrate it into the question view of the quiz app, using a flexbox layout, component tree, and dynamic rendering with an as prop.
QuestionView: AnswerOptions6:45
Create the answer options component inside the question view, render the options with a selected state, and wire up the on answer function to dispatch selections.
QuestionView: MediaDisplay5:37
Learn to build a reusable media display for a question view in React, rendering images or videos conditionally with responsive styling, props management, and autoplay controls.
QuestionView: NavigationControls10:01
Build a navigation controls component for a quiz app, integrating with the question view, and manage current and total questions, dispatching previous, next, and submit actions.
ProgressBar5:17
Build a dynamic, reusable progress bar for a quiz app by passing current and total props and styling it with CSS for smooth, fixed-top progress updates.
AppBanner4:26
Create and integrate an app banner component into the quiz app, then style it with flexbox, padding, a soft blue background, and a border for a polished, responsive layout.
ResultView13:51
Create a result view in the quiz app that shows the user score, detailed answer feedback, explanations, and media. Use props score, questions, and answers to render a pass/fail summary.

Introduction to React Context7:05
Explore how react context works by refactoring prop drilling into a context-based solution. Learn to create a user context with a provider and useContext to share data across components.
Applying React Context to To do List App6:37
Learn to manage the to do list app state with React context by creating a task context and provider, using a custom hook to access actions, and reduce prop drilling.

Requirements

Beginner-Friendly
No Prior React Knowledge Needed
You don’t need prior React experience to get started. If you understand basic JavaScript, you’ll be able to follow this course from the ground up and grow into an advanced React developer.

Description

This course contains the use of artificial intelligence.

The Complete React 19 & Next.js 16 Bootcamp – From Zero to Fullstack Developer

Master React 19, Next.js 16, React Router 7, Redux Toolkit, React Query, Zustand, Supabase, Authentication, Performance Optimization, Drag & Drop, Dark Mode, Real-Time Features, Testing, and More — by building real professional projects step by step.

Why this course is different?

React has become the most in-demand front-end library in the world. Now, with React 19 and Next.js 16, React has reached a new level, combining frontend, backend, real-time communication, database integration, server actions, authentication, and streaming into one powerful fullstack framework.

Most courses still present a number of challenges:

They teach outdated versions of React.
They focus on theory without real projects.
They show basic to-do apps that do not help you get hired.
They do not teach how things actually work under the hood.
They never cover React 19 features, React Router 7, or modern Next.js 16 full-stack features.

This course is different. You will not just "learn React 19," you will master it completely using a project-based approach, covering both frontend and fullstack React development. This includes:

Modern Next.js 16 features
Authentication and databases
Server components and streaming
Error boundaries
Real-time chat
Secure form handling

You will build professional-grade applications, including a real estate app, a portfolio website, a Trello-like Kanban board, a driving test app, a weather app, a card flip game, a full-stack story collection platform, and a real-time chat app with authentication. By the end, you will be ready for real-world jobs, freelance projects, or launching your own SaaS startup.

The Learning Approach:

Throughout the course, you will learn not just the "how," but the "why" — you will understand how React actually works:

Re-render cycles, batching, and component purity
Virtual DOM and reconciliation
Commit phases and state updates
Why React 19 is faster and smarter
Why certain patterns prevent bugs and boost performance
When to use useEffect, useRef, Context, or Reducer — and when NOT to use them
How to structure scalable React apps like senior developers do

What You Will Learn (and Actually Build):

1. Fundamentals of React 19 & JSX — Build a Strong Foundation

Setup React 19 with Vite (modern, fast development environment)
JSX deep dive — writing UI with JavaScript and HTML combined
Passing props, handling events, and writing conditional logic
Rendering lists with the key prop — mistakes to avoid
Styling React apps — CSS Modules, Tailwind, and inline styles
Understanding pure components and writing bug-free React logic
Visualizing your UI as a Tree — the React mental model

Project 1: Cambridge Rentals (Real Estate Application)

A professional UI-based application to display property listings using components.

You will build: Header, Footer, Property Cards, Property attributes, badges, icons, Clean component architecture, and File structure like real production apps.
This project teaches: Component composition, props, reusable components, and JSX best practices.

2. Adding Interactivity — Making React Apps Truly Dynamic

Handling clicks, input events, and form events
Understanding event bubbling and stopping propagation
Updating arrays and objects in state
React state batching — how React updates multiple state changes efficiently
Virtual DOM → Trigger → Re-render → Commit → UI Update
Mini Project: Shopping Cart with Add/Remove Logic

Project 2: To-Do List Manager (LocalStorage + CRUD)

Add, edit, delete tasks, toggle completion
Persist data with localStorage
Create modular components and separation of concerns
This project builds your confidence working with CRUD operations, persistence, and component breakdown.

3. Deep Dive into useReducer — Managing Complex State

When to use useReducer instead of useState
Reducer logic, dispatching actions, and payloads
Avoiding state mutation and designing pure reducer functions
Best practices, debugging, and patterns

Project 3: UK Driving Test App — Built with useReducer

Question navigation, Progress tracking
Score calculation, Result view, Clean state management
This project simulates real-world testing systems, using reducers to manage multi-step workflows.

4. React Context — Global State Without Prop Drilling

When to use context vs. when NOT to use it
Creating context providers and consumers
Combining Context + Reducer (Redux-like logic)

Project 4: Portfolio Website with Dark/Light Mode (Context)

Theme persistence, Scroll-based navigation
Responsive UI, Testimonials, project filtering, animated design
Perfect for your personal portfolio website or freelance clients.

5. Understanding useRef — Controlling the DOM Responsibly

When to use refs (and when NOT to)
Building timers, Accessing DOM nodes, Focusing inputs
Storing mutable values without re-rendering

Project 5: Card Flip Matching Game (useRef)

Fisher-Yates shuffle algorithm
useRef to manage flipping logic
Sound effects and animations, Confetti on win
Game reset functionality
This builds your understanding of DOM manipulation, refs, and game logic in React.

Project 6: Weather App — useEffect + APIs

Live weather API using Open-Meteo
Fetch, transform, and display data
Reusable presentational components
useEffect dependencies and cleanup
Learn how to properly manage API calls and data rendering.

Project 7: Story Collection App (React Router + Context + Supabase)

Multi-language support, Supabase integration
React Router 7 with nested layouts
Data fetching, display, custom scrollbars, pagination
You will understand how to build full-stack apps with React and Supabase.

Project 8: Kanban Board (Drag & Drop like Trello)

Drag & drop using HTML5 DnD API
Zustand for global state
Editable columns and tasks
Dark mode, custom scrollbars, Persist to localStorage
This project teaches UX, state design, and real product building.

6. Custom Hooks, Advanced Patterns, and Performance

Custom Hooks: Learn to create your own hooks in React 19.
Advanced React Patterns: Build Enterprise-Level Components using Render Props Pattern, Compound Components, State Reducer Pattern, Controlled vs. Uncontrolled, HOCs (Higher Order Components), Function as Child Pattern, and Context Module Functions.
Performance Optimization: Make React FAST with React.memo, useCallback, useMemo, Virtualization, Profiler, and Lazy Loading & Suspense.

7. Routing, Forms, and State Management

Routing with React Router 7 (React 19-ready): File and layout-based routing, Dynamic params and query strings, Authentication routes, Code-splitting and lazy loading, Nested routes, and Error handling.
Forms & Advanced Validation: Controlled & uncontrolled inputs, React Hook Form, Schema validation with Yup, Custom input components, and Handling errors and dynamic fields.
Data Fetching & State Management (Modern stack): React Query (TanStack Query) for caching, refetching, and mutation; Zustand for lightweight global state; Redux Toolkit; Error boundaries; and Suspense for async UI.

8. Testing React Apps (React Testing Library)

Unit tests, Integration tests, Snapshot testing
Testing async data fetching
Testing forms and user interactions
Handling loading and error states
By the end, testing will feel simple and natural.

9. Fullstack React with Next.js 16 — The Future of React Development

Learn how to turn React 19 into a complete fullstack framework using Next.js 16. You will master:

File-based Routing & Nested Layouts
SSR vs. SSG vs. ISR vs. Streaming
Server Actions
Client vs. Server Components
Built-in API routes
Real-time messaging (SSE, WebSockets)
Authentication (Email, Google, GitHub) and Protected routes (User/Admin roles)
Database integration and querying
Pagination, optimistic UI updates, and Middleware security

Final Project 9: Fullstack Real-Time Chat with Next.js 16 Server-sent Events (SSE)

Real-time chat rooms
Authentication + Authorization (JWT + OAuth), Role-based access (Admin/User)
Zod validation, Live message broadcasting
Optimistic delete/edit updates
Error boundaries and Suspense
This project gives you production-level fullstack experience.

Key Outcomes:

By the end of this course, you will be able to:

Build modern, beautiful, production-ready React & Next.js apps.
Understand React at a deep, professional level.
Master React 19, hooks, reducers, context, performance, and patterns.
Build full-stack Next.js applications with authentication and databases.
Design scalable architectures used in real jobs and companies.
Manage global state using Redux Toolkit, Zustand, and React Query.
Write tests confidently using React Testing Library.
Build real-time apps with WebSockets and SSE.
Create a strong portfolio of 8+ real projects to showcase to employers.
Apply for React developer jobs, freelancing, or start your own SaaS product.

Who is this course for?

Complete beginners looking to become React developers
React developers wanting to master Redux, Context, Performance, and Testing
JavaScript developers ready to move into frontend or fullstack
Developers preparing for React job interviews or freelancing
Anyone wanting to build powerful, real-world applications with React

No experience? No problem. This course starts from the basics and gradually builds your knowledge — all through fun, real-world projects.

Note: This course uses Codepion technology, which includes AI-powered voiceover and speed typing, helping students learn concepts up to 5× faster through clear explanations and rapid, real-time coding demonstrations. Unlike traditional courses, you won’t have to wait for slow typing or watch instructors struggle with long code — learning is fast, smooth, and mistake-free.

Watch the video previews and see the difference for yourself.

Who this course is for:

Beginners who want to learn React step-by-step
Developers transitioning from JavaScript to modern React
Students preparing for frontend developer interviews
Anyone aiming to build real-world web applications with React 19 and Next.js 16

The Complete React 19 Developer Course (incl. Next.js 16)

What you'll learn

Explore related topics

Course content

React 19 Setup & JSX14 lectures • 1hr 20min

JSX Review - Common mistakes - Best practises2 lectures • 29min

Professional Project - Cambridge Rentals11 lectures • 1hr 8min

Adding Interactivity10 lectures • 1hr 19min

Adding Interactivity Review - Common mistakes - Best practises1 lecture • 5min

Professional Project: To do list App10 lectures • 54min

React Reducer2 lectures • 10min

React reducer Review - Common mistakes and best practises1 lecture • 4min

Professional Project: UK driving test - React reducer12 lectures • 1hr 25min

React Context2 lectures • 14min

Requirements

Description

Who this course is for: