We may earn an affiliate commission when you visit our partners.
Jonas Schmedtmann

Just launched 16 BONUS hours of Next.js content in May 2024.

Take this course after taking my #1 bestselling JavaScript course (900,000+ students)

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.

Read more

Just launched 16 BONUS hours of Next.js content in May 2024.

Take this course after taking my #1 bestselling JavaScript course (900,000+ students)

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

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]

  • 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 Udemy 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)

Enroll now

What's inside

Learning objectives

  • Become an advanced, confident, and modern react developer from scratch
  • Build 10+ beautiful projects, including two huge professional real-world apps
  • Become job-ready by working with libraries and tools used in professional projects
  • Join my other 1,900,000+ happy students on this journey
  • Think like a senior react engineer with advanced design patterns
  • Next..js "app" router with cutting-edge react server components + server actions
  • State management: thinking about state, where to place, local vs. global, ui vs. remote
  • Build reusable, composable, and versatile components
  • Master the confusing but important useeffect hook once and for all
  • Build many custom hooks, reusable in your future projects
  • Build single-page applications with react router (including v6.4+ with data loading)
  • Performance optimization with memo, usememo, usecallback, and code splitting
  • Advanced react features: usereducer, context api, cloneelement, portals, etc.
  • Advanced state management with redux, redux toolkit, thunks, react query
  • Build real-world app features: authentication, data sorting, filtering and pagination, dark mode, charts, etc.
  • Understand how react actually works behind the scenes: virtual dom, reconciliation, fiber tree, key prop, etc.
  • Style your apps with tailwind css, css modules, styled components (css-in-js)
  • Practice your skills with many challenges, exercises, and practice projects
  • Show more
  • Show less

Syllabus

Welcome, Welcome, Welcome!
Course Roadmap and Projects
Building Our First React App!
Watch Before You Start!
Read more
Read Before You Start!
Downloading Course Material
PART 1: REACT FUNDAMENTALS [4 PROJECTS]
Introduction to Part 1
Useful Resources for Part 1
A First Look at React
Section Overview
Why Do Front-End Frameworks Exist?
React vs. Vanilla JavaScript
What is React?
Setting Up Our Development Environment
Pure React
A Quick Look at React's Official Documentation
Setting Up a New React Project: The Options
Setting Up a Project With Create-React-App
[Optional] Review of Essential JavaScript for React
Destructuring Objects and Arrays
Rest/Spread Operator
Template Literals
Ternaries Instead of if/else Statements
Arrow Functions
Short-Circuiting And Logical Operators: &&, ||, ??
Optional Chaining
The Array map Method
The Array filter Method
The Array reduce Method
The Array sort Method
Working With Immutable Arrays
Asynchronous JavaScript: Promises
Asynchronous JavaScript: Async/Await
Working With Components, Props, and JSX
Rendering the Root Component and Strict Mode
Before We Start Coding: Debugging
Components as Building Blocks
Creating And Reusing a Component
What is JSX?
Creating More Components
JavaScript Logic in Components
Separation of Concerns
Styling React Applications
Passing and Receiving Props
Props, Immutability, and One-Way Data Flow
CHALLENGE #1: Profile Card (v1)
The Rules of JSX
Rendering Lists
Conditional Rendering With &&
Conditional Rendering With Ternaries
Conditional Rendering With Multiple Returns
Extracting JSX Into a New Component
Destructuring Props
React Fragments
Setting Classes and Text Conditionally
Section Summary
CHALLENGE #2: Profile Card (v2)
State, Events, and Forms: Interactive Components
Let's Build a Steps Component
Handling Events the React Way
What is State in React?
Creating a State Variable With useState
Don't Set State Manually!
The Mechanics of State
Adding Another Piece of State
React Developer Tools
Updating State Based on Current State
More Thoughts About State + State Guidelines
A Vanilla JavaScript Implementation
CHALLENGE #1: Date Counter (v1)
Starting a New Project: The "Far Away" Travel List
Building the Layout
Rendering the Items List
Building a Form and Handling Submissions
Controlled Elements
State vs. Props
EXERCISE #1: Flashcards
CHALLENGE #2: Date Counter (v2)
Thinking In React: State Management
What is "Thinking in React"?
Fundamentals of State Management
Thinking About State and Lifting State Up
Reviewing "Lifting Up State"
Deleting an Item: More Child-to-Parent Communication!
Updating an Item: Complex Immutable Data Operation
Derived State
Calculating Statistics as Derived State
Sorting Items
Clearing the List
Moving Components Into Separate Files
EXERCISE #1: Accordion Component (v1)
The "children" Prop: Making a Reusable Button
More Reusability With the "children" Prop
EXERCISE #2: Accordion Component (v2)
CHALLENGE #1: Tip Calculator

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Covers React Router, Redux, Redux Toolkit, React Query, React Hook Form, Styled Components, Tailwind CSS, and Next.js, which are all valuable tools for front-end development
Uses industry-standard tools such as Supabase, GitHub, Netlify, and Vercel, which are essential for professional front-end development workflows
Includes a section that explores how React works behind the scenes, giving learners the confidence to use React effectively on their own
Requires learners to have taken the instructor's JavaScript course, which may pose a barrier to entry for some students
Teaches Next.js with the 'app' router, React Server Components, and Server Actions, which are cutting-edge technologies in web development
Emphasizes a practice-heavy approach by building polished apps, which is ideal for learners who prefer hands-on experience

Save this course

Save The Ultimate React Course 2024: React, Next.js, Redux & More to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in The Ultimate React Course 2024: React, Next.js, Redux & More with these activities:
Review Essential JavaScript Concepts
Solidify your understanding of JavaScript fundamentals before diving into React. This will make learning React concepts easier and faster.
Browse courses on Modern JavaScript
Show steps
  • Review array methods like map, filter, and reduce.
  • Practice working with asynchronous JavaScript using Promises and async/await.
  • Familiarize yourself with ES6+ features like destructuring, spread syntax, and arrow functions.
Read 'Learning React, 2nd Edition' by Alex Banks and Eve Porcello
Supplement the course material with a well-regarded book on React. This will provide a different perspective and reinforce key concepts.
Show steps
  • Read the first few chapters covering React fundamentals.
  • Work through the examples and exercises in the book.
  • Compare the book's approach to the course's teachings.
Build a Simple To-Do App with React
Apply your knowledge by building a practical project. This will help you solidify your understanding of React components, state management, and event handling.
Show steps
  • Set up a new React project using Create React App or Vite.
  • Create components for adding, displaying, and deleting to-do items.
  • Implement state management to handle the list of to-do items.
  • Add styling to make the app visually appealing.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Follow Advanced React Tutorials on React Router v6
Deepen your understanding of React Router v6 by following advanced tutorials. This will help you master complex routing scenarios and data loading techniques.
Show steps
  • Find tutorials covering advanced React Router v6 concepts.
  • Implement data loading and actions using React Router v6.
  • Explore different routing strategies for single-page applications.
Write a Blog Post on React Performance Optimization
Reinforce your understanding of React performance optimization techniques by writing a blog post. This will require you to research and explain concepts like memoization, code splitting, and the Context API.
Show steps
  • Research different React performance optimization techniques.
  • Write a clear and concise blog post explaining these techniques.
  • Include code examples to illustrate the concepts.
Contribute to an Open Source React Project
Gain practical experience and contribute to the React community by contributing to an open-source project. This will expose you to real-world codebases and collaborative development workflows.
Show steps
  • Find an open-source React project that interests you.
  • Identify a bug or feature to work on.
  • Submit a pull request with your changes.
Read 'Fullstack React, The Complete Guide to ReactJS and Friends' by Anthony Accomazzo et al.
Expand your knowledge beyond the course by exploring full-stack React development. This will give you a broader understanding of the React ecosystem.
Show steps
  • Read the sections on server-side rendering and data fetching.
  • Experiment with building a full-stack application using the book's examples.
  • Compare the book's approach to the course's teachings.

Career center

Learners who complete The Ultimate React Course 2024: React, Next.js, Redux & More will develop knowledge and skills that may be useful to these careers:
React Developer
A React developer specializes in building user interfaces using the React library. Because the course is focused on React, it is an ideal fit for a React developer. The course covers React fundamentals, advanced state management, performance optimization, and styling. The course also covers Next.js, a framework that is often used with React. The course also covers many libraries and tools including React Router, Redux, and Tailwind CSS. A person who wishes to enter this field should take this course to build a portfolio and to learn how to think like a professional React engineer.
Frontend Developer
A frontend developer is responsible for building the user-facing parts of websites and web applications. This course focuses on React, which is a core technology for many frontend developers. This course's project-based approach, along with its coverage of React fundamentals, state management, performance optimization, and building single-page applications, provides an ideal foundation for a career as a frontend developer. The learner will have built 10+ React applications, using libraries and tools that are used professionally. This course even covers styling with tools such as Tailwind CSS, a technology sought after by many companies.
User Interface Engineer
A user interface engineer focuses on building the interactive elements of a website or an application. This course covers core concepts that are required of a user interface engineer, including React fundamentals, building reusable and composable components, state management, and performance optimization. The course's project-based approach allows a user interface engineer to build a portfolio of 10+ apps using React, many of which could be included in a portfolio. The course also covers advanced design patterns, making the aspiring user interface engineer think like a senior level engineer.
Web Application Developer
Web application developers build interactive web applications. The course provides the practical skills to do this job. This course covers many concepts necessary for web application development, such as React fundamentals, building components, managing state, and using hooks. The course's focus on advanced state management with Redux, Redux Toolkit, and React Query will provide a great foundation for making dynamic and powerful web applications. The course emphasizes understanding how React works behind the scenes, giving a Web application developer greater control over the applications they build.
UI/UX Developer
A UI/UX developer combines user interface and user experience design principles to build effective and visually appealing applications. This course provides a strong foundation in the technical skills necessary for a UI/UX developer. The course teaches React fundamentals, component building, state management, and styling with Tailwind CSS. The course goes into advanced design patterns that are relevant for a UI/UX developer. This course is an important piece of a UI/UX developer's training, helping with the practical development aspect of the role.
Full-Stack Developer
Full stack developers handle both frontend and backend development. This course helps build a foundation for the frontend aspects. The course's coverage of React, along with styling with Tailwind CSS, component building, state management, and routing, provide the necessary foundation to build sophisticated user interfaces. Furthermore, this course discusses incorporating a backend using Supabase, showing how to build full stack apps. This holistic approach is very valuable to someone wanting to become a full stack developer. This course is an ideal way to get started learning full stack development.
Software Engineer
A software engineer designs, develops, and tests software applications. This course helps provide the necessary foundation to be a software engineer, providing a strong grounding in frontend development using React. With a project-based approach, the course not only explains the concepts behind React libraries and tools, but allows the learner to gain practical experience. Many software engineers will go on to become full stack developers, and the course does explain how to connect frontend code with a backend technology using Supabase. This course is a starting point to becoming a software engineer.
JavaScript Developer
Javascript developers write code using Javascript. Though this course does not focus on Javascript, Javascript is the primary technology used to build React applications. Because React is the focus of this course, this Javascript developer will be able to enhance their skills in that area. The course covers multiple libraries and tools that are relevant for Javascript development, including React Router, Redux, and Next.js. This course also shows how to think like a professional React engineer. A Javascript developer should take this course to bolster their skills with React.
Application Architect
An application architect designs the structure of software systems. This course may be useful for application architects because it shows the architecture of the frontend of different web applications. The course touches on best practices, component building, and reusable code. Advanced design patterns, as discussed in the course, would be highly relevant for this role. This course provides a strong understanding of the practical development side of software development, which is important for an application architect.
Mobile Application Developer
Mobile application developers create applications for mobile platforms such as iOS and Android. This course would help in a mobile development environment because it shows how to create user interfaces that are interactive. This course goes over many important concepts including state management, hooks, and routing. With this course's project based approach, the learner will have a portfolio of 10+ applications to demonstrate their skill. This course also goes over styling tools like Tailwind CSS, which will be relevant in the mobile application space.
Web Designer
A web designer focuses on the aesthetic and usability of websites. While this web designer role is not primarily about coding, understanding how user interfaces are built is very helpful. The course’s focus on React allows a web designer to better understand the development side of building websites and applications, and how interactive elements behave. The course covers styling with Tailwind CSS. This course may help a web designer work more effectively with engineers and understand the technical limitations of the user interfaces that they design.
Technical Project Manager
A technical project manager leads a team to build software. This course may be useful for a technical project manager because it provides a strong foundation in frontend development. The course's focus on React, along with styling with Tailwind CSS, allows project managers to better understand the development process. The course introduces state management, which helps in understanding how React applications work, and a project manager would better understand the scope of work involved in developing such applications. This practical understanding can greatly aide a technical project manager.
Technology Consultant
Technology consultants advise clients on technology strategies. This course may be useful for technology consultants. The course teaches React, a popular library for building many types of applications, and it also covers many relevant tools, such as React Router, Redux, and Next.js. The course goes into the details of how React works, which is valuable for understanding how modern web applications are built. The projects built in this course by the learner would be helpful in understanding the practical application of these technologies.
Software Development Manager
A software development manager oversees a team of developers. This course may be useful for software development managers because it provides a practical understanding of what is involved in frontend development with React. The course goes over fundamental concepts such as state management, component building, and performance optimization. It also goes into advanced design patterns and covers some libraries such as Redux. This is valuable to a software development manager, as it helps them speak intelligently about development practices.
Solutions Architect
Solutions architects design and oversee the implementation of complex IT systems. While this course primarily focuses on frontend development, it may be useful for solutions architects. The course introduces how to design and componentize user interfaces using React, which would be helpful in designing complex user interfaces. The course also touches on styling with Tailwind CSS, which is a popular technology. Ultimately, this course may provide a better understanding of user interface design for solutions architects.

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in The Ultimate React Course 2024: React, Next.js, Redux & More.
Provides a comprehensive introduction to React, covering fundamental concepts and best practices. It's a great resource for understanding the core principles behind React development. The book also includes practical examples and exercises to reinforce learning. It is particularly useful for those who prefer a structured, textbook-like approach to learning React.
Provides a comprehensive guide to building full-stack applications with React. It covers topics such as server-side rendering, data fetching, and authentication. It's a valuable resource for those who want to learn how to build complete web applications with React. This book is more valuable as additional reading than it is as a current reference.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Similar courses are unavailable at this time. Please try again later.
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser