16 Best React Courses for 2024: Hooks and Components
Learn React 18, the most popular front-end framework for the web, with these free and paid courses.
In this Best Courses Guide (BCG), I’ve scoured the web to find the most up-to-date and comprehensive courses to learn React from top institutions (University of Helsinki, Scrimba, Frontend Masters) and experienced React devs (Brian Holt, Jack Herrington, Josh Comeau). React is one of the most in-demand front-end frameworks, and mastering it can open up exciting career opportunities.
These courses are all up-to-date with React 18, with the majority of the courses being free, though there are some juicy paid ones. I made sure to choose ones that follow the latest toolings and best practices, so you won’t waste time learning outdated techniques like Create React App (everyone uses Vite now) or Class components (replaced by hooks). And even better – everything you’ll learn will still apply to React 19 once it’s out.
Some of the courses will teach you how to become a full-stack developer, with deep dives on Node.js, Express.js, React Router, and SQL/noSQL. Others focus on the front-end, including Redux, React Query, and Tailwind CSS.
So whether you’ve just learned JavaScript a few days ago, or already have had some experience with React, there’s sure to be a course for you!
Note that all of these courses assume you know some JavaScript. If you don’t, then check the free courses in my JavaScript BCG.
Click on the shortcuts for more details:
- Top Picks
- Why Learn React?
- Courses Overview
- Beginner Courses
- Intermediate Courses
- What Next?
- Why You Should Trust Us
- BCG Methodology
Here are my top picks. Click on one to skip to the course details:
Why Learn React?
React is a library for creating interactive user interfaces (UIs), used for frontend web apps to detect user input, fetch data, and update the user interface with data.
- #1 Most Popular:
- React has been the most popular front-end framework, by every metric and source, ever since it surpassed Angular in 2016. It is used at Facebook, Netflix, Uber, The New York Times, Discord, DropBox, to name a few
- To that end, there’s no shortage of jobs for React developers (try it yourself: search for React jobs in the US on LinkedIn)
- Beginners rejoice, as you’ll have tons of learning resources at your disposal and huge React communities to join and learn from
- Additionally, React developers are well-compensated. The average annual salary for a React dev in the US is $95K–$129K according to Glassdoor and ZipRecruiter
- Component-based and Declarative:
- It is component-based, meaning UIs are built from individual, reusable components that can manage their own state
- React makes it easy to create dynamic and responsive UIs that automatically update based on changes in the application’s data
- Open Source:
- React is an open-source library maintained by Facebook and a large community of individual developers and companies
- Rich Ecosystem:
- React is not a full framework, but rather a library that can be used with other libraries and tools to build complete web applications
- As such, there’s a huge ecosystem of libraries, tools, and extensions for React: React Query, React Router, Redux, MUI Core
- React Native:
- React is widely used for building web applications, but can also be used for building mobile apps through the React Native framework.
Courses Overview
- 10 of the courses are free or partially free, while 5 are paid
- 9 of the courses are for React beginners, while 6 require familiarity with React.
Beginner Courses
Best Full-Stack Course with Free Certificates (University of Helsinki)
“In the spirit of Linus Torvalds, all teaching should be open source.” — Matti Luukkainen, creator of Full Stack Open
If you’re aiming to be a full-stack developer with React, then Full Stack Open is the best course for you, period, with an average total completion time of 276 hours. In fact, I’m astounded that the entire course is totally free and open source.
Developed by Helsinki University in collaboration with Unity and other partner companies, the course comes with a unique promise: Finnish graduates who complete the course with maximum credits will be offered a job interview.
While this offer is specific to Finnish students, it should give you confidence that whatever you’ll learn here in this course will be relevant in the real world.
Some of the features I love about this course are:
- Comprehensive: The course is modular. You first take the core track and then can choose to complete none, any, or all of the optional modules.
- Core: React (duh), Redux, Node.js, Express.js, React Router, React Query, MongoDB,
- Optional: GraphQL, TypeScript, React Native, CI/CD (GitHub Actions), Docker, PostgreSQL
- Constantly up-to-date:
- JavaScript developers often joke that there’s a new framework to learn every week. Luckily, modules are updated or added whenever something new appears
- For example, when the course first launched in 2018, Create React App and MongoDB were trendy. But now in 2024 Create React App has been made obsolete by Vite and PostgreSQL is twice as popular than MongoDB among professionals
- This also means that people who have completed the course in previous years can return to complete new modules
- Hands-on Exercises:
- There are 138+ core exercises in total, with an average of 24 exercises for each of the 7 add-on modules. The grading works on an honor system: you submit your solution, view the model solution, and then move on — no manual or automatic feedback. However, there’s a system in place to detect plagiarism
- Free Certifications:
- After submitting a set amount of exercises, you’ll receive a free certificate of completion, with additional certificates for each optional module you choose
- University Credits:
- While not necessary, you can earn ECTS credits with Open University (free signup) or even your own university if they accept it. You’ll be able to take a graded exam (in Finnish/English) and submit a full-stack project
- Active Community:
- The Discord community and Telegram are active, where you can meet fellow course-takers and teaching assistants
- Multiple languages:
- Originally in Finnish, it has been translated to English, Finnish, Mandarin (fully), as well as Spanish, French, and Portuguese (partially).
| Institution | University of Helsinki |
| Provider | Independent |
| Prerequisites | Familiarity with programming and basic knowledge of web programming, databases, and Git. |
| Workload | 105–260 hours |
| Enrollments | 30K+ |
| Rating | 4.9/5.0 (19) |
| Cost | Free |
| Certificate | None |
Best React Development Bootcamp with Live Sessions (Noble Desktop)
If you prefer instructor-led learning, Noble Desktop’s React Development Bootcamp offers real-time feedback and accountability that pre-recorded courses can’t match.
What I find interesting is that this program runs both in-person (NYC campus) and online (Zoom). Even if you’re attending online, you’ll have individual attention and can see other students in the classroom. You’ll be able to interact with instructors, receive feedback, and ask questions during sessions. Plus, you’ll get access to class recordings and workbooks – pretty helpful for catching up if you miss a class or reviewing what you learned.
Key Benefits
- Small class sizes (8-15 students)
- Free retake within one year
- Certificate of completion to showcase achievements
- Detailed class files with real-world projects
Noble Desktop knows what they’re doing – they’ve been around for over three decades providing instruction with industry experts. So you can rest assured your mentorship will not be with someone who just finished the course. Don’t take my word for it – student reviews on Yelp and Google praise their practical approach and instructor quality.
What will you take away from this course?
- Foundations of React Development
- Learn the fundamentals of React, including components, props, and state, and how to structure web applications
- React Hooks and State Management
- Explore React Hooks like useEffect, useState, and useContext, and how to improve app functionality with Higher Order Components (HOCs)
- Routing and Full-Stack Integration
- Use React Router for integration with APIs for CRUD operations and communication with back-end services
- Node.js and Database Integration
- Gain experience in Node.js, NPM, and database integration to create a full stack development pipeline
- Cloud Deployment with AWS
- Deploy web apps to the cloud using AWS, including DNS management and alternative deployment stacks for scalable applications
- Mobile and AI Features
- Expand your skills to include mobile-friendly design for iOS and Android and integrate AI capabilities
- Advanced React Projects
- Develop production-grade applications that incorporate front-end security and state management strategies
- Comprehensive Full-Stack Development
- Understand the full MERN stack workflow, from project setup to deploying fully functioning applications
Flexible Schedule Options
- 3 weeks full-time (weekdays)
- 2 months part-time (evenings)
“The instructor is great, the material is fun and engaging, and the skills you learn are powerful. I love React.js! What a neat framework, and it’s so cool to find out what’s inside this web dev industry staple.” – Jake Thomas
| Institution | Noble Desktop |
| Provider | Direct (NYC campus or Live Online) |
| Instructors | Art Yudin, Brian McClain, Colin Jaffe |
| Level | Beginner to Intermediate |
| Workload | 72 hours |
| Rating | 4.8/5.0 (Yelp) and 5.0/5.0 (Google) |
| Certificate | Certificate of Completion |
Best Free Interactive Course for Beginners (Scrimba)
While watching people code can be helpful sometimes, isn’t the best way to learn coding is by… actually coding?
If you struggle to stay engaged with the traditional video or text tutorials, then you’ll find Scrimba’s courses a breath of fresh air, and perhaps even power through them. Don’t trust me? Here’s why:
- Interactive Screencasts:
- Instructor wrote some code you don’t understand? You can pause, edit, and run the code directly within the tutorial video (called Scrims) — awesome for hands-on learning
- In-browser Coding Environment:
- Focus more on coding, less on tooling. You’ll do everything in the browser, no need to hassle with a local development environment
- Vibrant Community:
- They have an active Discord server, where you can share your projects, request code reviews, and get career/programming advice from peers and instructors.
Now, let’s explore what you’ll learn in Scrimba’s free course: Learn React with Bob Ziroll. Bob is an amazing instructor with many positive reviews, and in this 13-14 hour course, you’ll build eight projects, from prototyping with Figma to deploying with Netlify to Firebase. The course covers:
- Modern React fundamentals, including JSX, components, props, state, and more
- Creating reusable and well-structured React components
- Best practices for structuring and managing state in React applications
- Advanced React features such as making API calls and using the useEffect hook for a meme generator and working with local storage for a notes app.
If you’re a student in college or university, you can get a free 1 month trial of all of their pro courses if you have a GitHub education account. I highly recommend you use this privilege to explore their other courses, such as Advanced React (also by Bob) or their 70+ hour Frontend Developer Career Path that offers a professional certificate.
| Institution | Scrimba |
| Instructor | Bob Ziroll |
| Prerequisites | Basic HTML/CSS and JavaScript |
| Workload | 13–14 hours |
| Enrollments | 368K |
| Cost | Free |
| Certificate | None |
Best Free Resource for Developers (React)
The first resource you should look at is the official React documentation. Hold on, don’t close this tab just because I mentioned reading the docs!
If you’re comfortable with JavaScript and good with self-learning then the docs are the way to go, especially since it’s free and concise. At least, that’s the sentiment I’ve gathered from many React developers on Reddit and other programming communities.
Since last year, the React team has made significant improvements to the quality of their documentation and learning materials. You’ll find engaging code examples, runnable code snippets for interactive in-browser learning, and best practices to follow.
For a brief introduction to React, check out the Quick Start guide, where you’ll be introduced to the 80% of React concepts that are used daily by building a simple Tic-Tac-Toe game. You’ll also learn how to think like a React developer.
But if you have the time for a deeper dive, explore the Learn React section. It covers topics from basic to advanced:
- Describing the UI: Teaches the basics of building user interfaces with React, including writing and composing components
- Adding Interactivity: Covers state management, event handling, and user input in React applications
- Managing State: Dives deeper into state management techniques and best practices
- Escape Hatches: Explains advanced React concepts and APIs for handling complex scenarios.
Of course, not everyone is cut out for independent self-learning, especially if you’ve just learned how to program a few hours ago. So make sure to explore the rest of the courses.
| Institution | React |
| Provider | Meta Open Source |
| Prerequisites | Basic HTML/CSS and JavaScript |
| Workload | N/A |
| Cost | Free |
| Certificate | None |
Best Free Beginners Course in Hindi (Hitesh Choudhary)
To our readers from India, I’ve got a special surprise for you!
Chai aur react is a free YouTube playlist made by Hitesh Choudhary, a popular Indian educator. It teaches you the foundation of React with relatable explanations of theory and hands-on practice. By the end of the course, not only will you have a bunch of projects for your portfolio, but you’ll also gain hands-on experience in creating a full-stack application using Appwrite, integrating advanced tools like React Router, Redux-Toolkit, and Tailwind.
What will you take away from this course?
- Fundamentals of React:
- Understand the React flow and structure, create your own React library and JSX, and learn about the Virtual DOM, Fibre, and reconciliation
- React Hooks and Projects:
- Why do we need hooks? To demonstrate their usefulness, you’ll build a currency convertor using useState, useEffect, useRef, useCallback, and even your own custom hooks
- Routing and State Management:
- Learn React Router and Context API through crash courses and projects. Understand how to use Redux Toolkit in large projects and configure it properly
- Backend Integration and Deployment:
- Integrate Appwrite backend for authentication, database, file upload, and custom queries. Learn how to deploy a React app to production and handle CORS issues
- Advanced React Concepts:
- Learn how to create production-grade React components, use React Hook Form in production, build pages, and handle slugs. Then, connect the frontend and backend using fullstack proxy and CORS
- React Interview Preparation:
- Test your React skills with interview questions on topics like state management, data types, and handling APIs using custom React Query, Axios, and race conditions.
Prefer English? He has a second channel for English content, and also re-released this playlist in English, albeit shorter.
As you go through the course, you’ll inevitably encounter problems you can’t solve on your own. Join Hitesh’s Discord server to find help or even career advice.
| Channel | Chai aur Code |
| Provider | YouTube |
| Instructor | Hitesh Choudhary |
| Prerequisites | Basic HTML/CSS and JavaScript |
| Workload | ≈20 hours |
| Views | 1.8M |
| Cost | Free |
| Certificate | None |
Best Free Premium Courses for Students (Brian Holt)
If you’re a broke college/university student yearning for the sweet taste of a premium in-depth course taught by an experienced instructor, then good news — Brian Holt’s Complete Intro to React, v8 and Intermediate React, v5 are free for students (normally requires a paid subscription).
All you need is a student email with Github Education and you’ll get free 6-months access to all courses and workshops on Frontend Masters (but if you don’t have one, his course handbook is freely accessible).
Brian Holt has accrued an impressive portfolio over his decade-long journey: currently SQLite Cloud’s VP of Product, his past gigs include JavaScript engineer and PM at Netflix, Stripe, Snowflake, LinkedIn, Microsoft, and Reddit. So, if you were harboring any doubts about his expertise, rest assured — Brian absolutely knows his stuff.
These two courses from him will get you from React newbie to mastering React and its ecosystem of tools and techniques.
- Complete Intro to React, v8
- You’ll build a real-world pet adoption application using the latest React 18 features, including hooks, effects, context, and portals
- It goes beyond just an introductory React course, starting from the ground up
- Some tools you’ll cover from the broader React ecosystem are Vite, ESLint, TailwindCSS, React Router, and React Query
- Intermediate React, v5
- You’ll continue working on the AdoptMe web app to make it more scalable and performant
- Use hooks, Redux and other advanced techniques to optimize performance and manage state: from useMemo to useCallback, to Redux Toolkit, and hydration, and more
- You’ll also learn how to style your CSS with TailWind, explore the benefits of TypeScript in a React project, and finally set up automated testing of the frontend with React Testing Library and Vitest.
By the way, Frontend Masters has tons of great courses for web developers, covering Vue, Angular, Node.js, and even Full Stack. Couple of popular YouTubers like ThePrimeagen and Kevin Powell teach there, and you’ll even find the creators of Vue and Qwik on the platform!
| Provider | Frontend Masters |
| Instructor | Brian Holt |
| Prerequisites | Basic HTML/CSS and JavaScript |
| Workload | 12 hours |
| Cost | Free Trial/Paid Subscription |
| Certificate | None |
Best Partially Free Book for Beginners (Robin Wieruch)
Are you a bookworm? Then the best resource for React that will always be up-to-date is Robin Wieruch’s book: The Road to React. All you need to know is basic HTML, CSS and JavaScript.
There are multiple ways to learn from The Road to React:
- You can view the source material on GitHub for free (about 253 pages long)
- Buy the publication of the source material (EPUB, PDF, or Online)
- Or pay extra to also access the companion course, which is made up of 50+ exercises and 80+ course modules.
It’s written to be like a hands-on tutorial, where you’ll build real-world applications (with features such as client-side filtering, server-side filtering, and pagination) from scratch with modern React code and following best practices.
Some of the things you’ll learn from the book (excluding the modules) include:
- React fundamentals:
- Learn the core concepts of React, including components, JSX syntax, props, state, hooks, event handling, and working with forms
- React’s Legacy:
- While rare, you may find old React Class Components in the wild. You’ll learn how to work with their state management, as well as imperative programming techniques in React
- Styling in React:
- Explore various methods for styling React components, such as using CSS, CSS Modules, and Styled Components, and learn how to incorporate SVGs in your React applications
- React maintenance:
- Discover techniques for optimizing React application performance, integrating TypeScript for improved code quality, implementing testing strategies, and structuring React projects effectively
- Real-world React and deployment:
- Learn how to implement advanced features like sorting, pagination, and search functionality, understand the build process, and deploy React applications to platforms like Firebase.
By the way, you should also see if you’re interested in the course modules too, since they also teach subsidiary skills a React developer ought to know, like React Router and Docker.
| Provider | Independent |
| Instructor | Robin Wieruch |
| Prerequisites | Basic experience with HTML/CSS and JavaScript |
| Workload | 250+ pages |
| Cost | Free/Paid |
| Certificate | None |
Best Paid Comprehensive Course (Jonas Schmedtmann)
If you like video courses and want a complete all-in-one package to learn React, the best paid one in my opinion is Jonas Schmedtmann’s The Ultimate React Course 2024.
Why did I choose Jonas’ course over other more popular courses (like Maximilian Schwarzmüller’s) on Udemy?
- Stellar Reviews:
- Better Explanations:
- Up-to-date:
- He teaches popular libraries, concepts, and tools used in modern web development: Vite, React Router, Redux, Redux Toolkit, React Query, React Hook Form, Styled Components, Tailwind CSS, Supabase, GitHub, Netlify, and Vercel.
Being 67 hours long and filled with coding challenges and guided projects, by the end of this course you’ll be confident enough in your React skills to build professional React applications.
| Provider | Udemy |
| Instructor | Jonas Schmedtmann |
| Prerequisites | Basic HTML/CSS and JavaScript |
| Workload | 67 hours |
| Enrollments | 85K |
| Rating | 11K |
| Cost | Paid |
| Certificate | Paid |
Best Premium Course for Beginners (Josh W Comeau)
The next three courses are taught by the best of the best React instructors on the Internet, with excellent reviews all around. However, they are also pretty pricey . The good news is, if you’re a student or live in a low-income country, you can get a pretty hefty discount (I’ve seen a 50% price cut).
Joy of React is an interactive paid online course that was just released last year, yet has already amassed a ton of reviews. Amongst them are engineers at Grab, Github, Google, Shopify, Qualcomm, and even the creator of jQuery and co-creator of React Native!
Wondering what exactly makes the course so special?
- Interactive and fun:
- Sick of watching people code? Josh made his own interactive learning platform equivalent to the likes of Codecademy and DataCamp, with interactive articles, videos, exercises, real-world-inspired projects, and even mini-games
- For a taste of his teaching magic, a quick tour of his React and CSS tutorials should convince you that this guy’s skills are legit
- From the ground up:
- You’ll develop a deep understanding of how React works, and how to use it to build rich, dynamic web applications
- You’ll be able to answer deceptively simple questions like: “What’s the difference between rendering vs painting?” or “Why can’t you use await in a useEffect?”
- It consists of 6 modules + 3 bonus content, including a guide to acing job interviews
- Three Capstone Projects:
- Word Game: Build a Wordle clone
- Accessible Toast: Write a Toast component from scratch, following best practices for API design, usability, and most importantly, accessibility
- Interactive MDX-based Blog: Develop the same blog stack used in Josh’s own blog
- Community platform:
- Josh has a Discord community where you can band together with fellow motivated developers on your quests to learn React.
And I’m sure there’s a lot more I’m missing, as there’s simply too much to cover!
All in all, if you’re just starting out or have already some knowledge of React but want to fill in the gaps, then Josh’s course is absolutely worth the price tag.
Note: Josh Comeau has an previously made a premium course called CSS for JavaScript Developers
| Provider | Independent |
| Instructor | Josh W Comeau |
| Prerequisites | Familiarity with JavaScript |
| Workload | 40–100+ hours |
| Enrollments | 10.8K |
| Cost | Paid |
| Certificate | Paid |
Best Premium Learning Platform for Beginners (Ui.dev)
Ui.dev’s is a paid subscription-based course platform that aims to make learning the JavaScript ecosystem fun, approachable, and easy. Many who have taken their courses found it to be life-changing (here and here).
What makes Ui.dev stand out?
- Subscription-based:
- You pay the equivalent of a typical premium React course and access eight other courses
- So once you’ve completed the beginners course, you can move on directly to the next intermediate course
- Team of Four:
- The founder, Tyler McGiness, is an experienced developer and course creator, having previously worked at Google and Udacity
- With three other experienced developers on the team, you’ll gain a wide array of insights and ideas that you wouldn’t normally get from just one person
- Personalized Help:
- Got stuck on a concept taught in a video? Question from an exercise? Bug in your guided project? You can get personalized help from them on their platform.
Of the eight courses, there are four specific ones I’d like to highlight for React devs:
- react.gg (5.0 stars from 37 reviews)
- Released last year to much fanfare, you’ll master React, including writing custom hooks by rebuilding 50 reusable custom React hooks!
- You’ll also prep for interviews by grinding React like a leetcode pro
- For a taste of the course, look at their free interactive with visualizations React guidebook
- Classic React (4.9 stars from 232 reviews)
- Forced to use React class components? Don’t worry, this course will show you how to use them in the best way possible — no prior React knowledge required
- React With Typescript (4.8 stars from 47 reviews)
- If you’re not using TypeScript, you’re missing out, especially on catching bugs. You’ll cover the key APIs of TypeScript and build two projects
- React Router (4.9 stars from 45 reviews)
- Use React Router to learn the ins and outs of client-side routing.
| Institution | Ui.dev |
| Provider | Independent |
| Instructors | Tyler Mcginnis, Alex Brown, Ben Adam, and Lynn Fisher |
| Prerequisites | N/A (Varies per course) |
| Workload | N/A (Varies per course) |
| Rating (course platform) | 4.9/5.0 (1.1K) |
| Cost | Paid Subscription |
| Certificate | Paid |
Intermediate Courses
Best Premium Advanced Course for React Developers (Kent C. Dodds)
Do you have plenty of experience with React, but want to learn the latest and greatest techniques from a React master? Then Epic React is one of the few courses aimed towards developers like you.
Taught by Kent C. Dodd, one of the creators of the React Testing Library, this paid course is a series of 8 interactive workshops that teach consistent fundamentals of React component development and a production-proven, enterprise-grade architecture for building scalable applications.
The content is actually open sourced, but there’s much value to be gained from taking the course, as evidenced from the numerous reviews by senior developers I’ve found. I’ll summarize them for you:
- What React actually does:
- Why do people say React is just JavaScript with syntactic sugar? Because you can really just implement it yourself by importing libraries on unpkg.com
- What JSX actually does:
- What does Babel do behind the scenes when converting JSX into plain JavaScript?
- Hooks and Advanced Hooks.
- You’ll write code that’s less brittle and more flexible by utilizing React hooks to handle state
- Discord community:
- You’ll join a Discord server full of like-minded developers
- Challenge-focused:
- There’s more expectation of work on the student. For example, Kent will only give the barest introduction to a concept, and then you’ll work with them through exercises and follow-up lessons.
Apart from the lecture videos, you can also find 10 hours of interviews with React experts.
Love this course? Kent’s has other premium courses that might be of interest:
| Provider | Independent |
| Instructor | Kent C. Dodds |
| Prerequisites | Strong familiarity with React and web development |
| Workload | 19 hours |
| Cost | Paid |
| Certificate | Paid |
Best Free Course for React State Management (Jack Herrington)
React state management is the “beating heart” of a React application, and understanding core hooks like useState, useReducer, useMemo, useCallback, and useEffect is crucial towards becoming a good React developer.
Jack Herrington, a principal full stack engineer, will show you how to effectively manage state in your React applications by building a Pokémon search application with hooks.
You’ll learn:
- How to use the built-in React hooks like useState and useReducer to manage state in your React components
- Techniques for observing and monitoring state changes using hooks like useMemo and useCallback
- How to use useState to perform side effects and useRef to maintain state without triggering re-renders
- An introduction to using useContext and creating custom state management hooks to manage state, such as a hook to fetch Pokemon data
- TypeScript to provide type safety when working with React state management
- An overview of third-party state management libraries like React Query, Recoil, and Jotai, and how to integrate them with React.
By the way, Jack is a well-beloved JS/React YouTuber who has published tons of amazing content focusing on advanced topics. Be sure to check him out.
| Channel | freeCodeCamp |
| Provider | YouTube |
| Instructor | Jack Herrington (YT Channel) |
| Prerequisites | Basic React experience |
| Workload | 2–3 hours |
| Views | 230K |
| Likes | 6.9K |
| Cost | Free |
| Certificate | None |
Best Free Course for MERN Stack (Dave Gray)
MERN is one of, if not the most, popular tech stacks for React. It stands for MongoDB, Express.js, React, and Node.js.
In this free MERN Stack YouTube tutorial, you’ll simulate developing a real-world project for a client: a tech notes app for Dan D who runs a small computer repair shop.
From turning user stories into technical requirements, to deploying web application to production, you’ll learn:
- How to design a response front-end with React
- How to set up the backend REST API using Node.js, Express, and MongoDB
- Creating the middleware that chains the front-end and back-end together
- Implementing authentication and authorization features for the API using JSON Web Tokens (JWTs)
- How to integrate Redux Toolkit and RTK Query to manage the application state and handle API interactions
- Various other topics including middleware, environment variables, and sorting data in the frontend
- And finally, deploy the full MERN stack application to Render, a hosting platform.
By the way, Dave Gray is a popular YouTuber focusing on producing tutorials for web developers. Check him out!
| Channel | Dave Gray |
| Provider | YouTube |
| Instructor | Dave Gray |
| Prerequisites | Basic experience with React, Node.js, and Redux |
| Workload | 8 hours |
| Views | 435K |
| Likes | 11K |
| Cost | Free |
| Certificate | None |
Best Paid Course for Tests and TDD (Bonnie Schulkin)
Ever spent a caffeine-fueled all-nighter debugging a random broken feature, only to discover the culprit was code you wrote weeks ago?
React Testing Library with Jest / Vitest by Bonnie Schulkin will help you avoid such a tragedy from happening. How? By writing tests and following test-driven development principles.
If you didn’t know already, Vitest is a fast, feature-rich, and Vite-powered testing framework that serves as a compelling alternative to Jest, an older framework.
This paid Udemy course starts with simple examples and gradually progress to more complex testing concepts, including:
- Testing asynchronous page changes
- Simulating data from a server using Mock Service Worker
- Applying a context provider to a component when rendering.
You’ll also find opportunities to practice your new skills through “code quizzes” and optional exercises in the final section. And if you get stuck, you can always rely on the Q&A section — Bonnie is quite active there!
P.S: Need to learn the older but standard testing frameworks? Another YouTuber by the name Codevolution covers Jest and React Testing Library in his free React Testing Tutorial series on Youtube.
| Provider | Udemy |
| Instructor | Bonnie Schulkin |
| Prerequisites | Basic experience with React, including hooks and context |
| Workload | 7 hours |
| Enrollments | 37K |
| Rating | 4.6 / 5.0 (6.8K) |
| Cost | Paid |
| Certificate | Paid |
Best Free Interactive Course for React Router (Scrimba)
I couldn’t resist adding another one of Bob’s courses in this article: Learn React Router 6 with Bob Ziroll.
React Router 6 is the most popular 3rd-party library for handling client-side routing to create single-page apps (SPAs). Think Gmail or Netflix, where content is dynamically updated without requiring a full page refresh.
In this free course, you’ll build VanLife, an app renting decked-out travel vans, with React Router. While doing so, you’ll learn:
- React Router setup and usage of components like BrowserRouter, Routes, Route, Link, and NavLink for creating multi-page single-page applications (SPAs)
- Nested routes for organizing complex application structures, using layout routes, relative paths, index routes, and the Outlet component
- Utilizing search params for filtering data and conditionally rendering components based on URL parameters, using the useSearchParams hook and Links with search params
- Implementing data loading and error handling with loaders and errorElements, using the createBrowserRouter, useLoaderData, and useRouteError hooks
- Setting up protected routes, handling authentication, and using actions for form submissions, along with hooks like useNavigate, useActionData, and useNavigation for managing navigation and data flow.
| Provider | Scrimba |
| Instructor | Bob Ziroll |
| Prerequisites | Familiarity with React |
| Workload | 8–9 hours |
| Enrollments | 15K |
| Cost | Free |
| Certificate | None |
Best Free Project-Based Course (Sangam Mukherjee)
Want to flex your newfound React skills by building something, but not sure how or what? Try Sangam Mukherjee’s Build 25 React Projects – Tutorial, free on YouTube!
In this course, you’ll build 25 different React projects commonly asked in job interviews, especially at product-based companies like Adobe, Amazon, and others. Each project focuses on a specific concept or practical React skills, with each getting progressively more complex.
First, you’ll build 20 mini-projects, some of which are:
- Github Profile Finder
- Search Autocomplete with API implementation
- Tic Tac Toe
- Creating custom hooks such as useFetch, useOutsideClick, and useWindowResize.
Then, you’ll put together everything you’ve learned so far by taking on more complex projects:
- Weather App: How to make API calls, handle loading states, and display weather data in a React application
- Food Recipe App: Integrating React Router DOM to implement multiple pages and dynamic routes
- Shopping Cart App: Using Redux Toolkit for global state management
- Expense Tracker App: Building a SPA with Chakra UI for CSS styling and Redux Toolkit
- MERN Stack Blog App: Creating a full-stack web application with a MongoDB database for the back-end
By the end, you’ll be able to put these projects on your portfolio, or even better, get inspired to make a personal project of your own creation.
| Channel | freeCodeCamp |
| Provider | YouTube |
| Instructor | Sangam Mukherjee (YT channel) |
| Prerequisites | Basic React experience |
| Workload | 9–10 hours |
| Views | 250K |
| Like | 8.1K |
| Cost | Free |
| Certificate | None |
What Next?
- Practice building React projects to solidify your skills and expand your portfolio
- Explore popular React libraries and tools like Redux, Next.js, and Material-UI
- Stay updated with the latest React trends and features through blogs, podcasts, and conferences.
- Join a React developer community: r/React is pretty active, and the Reactiflux community is the largest React-focused community on Discord.
Why You Should Trust Us
Class Central, a Tripadvisor for online education, has helped 60 million learners find their next course. We’ve been combing through online education for more than a decade to aggregate a catalog of 200,000 online courses and 200,000+ reviews written by our users. And we’re online learners ourselves: combined, the Class Central team has completed over 400 online courses, including online degrees.
Best Courses Guide (BCG) Methodology
I built this ranking following the now tried-and-tested methodology used in previous BCGs (you can find them all here). It involves a three-step process:
- Research: I started by leveraging Class Central’s database and the internet. Then, I made a preliminary selection of 1700+ React courses by rating, reviews, and bookmarks.
- Evaluate: I read through reviews on Class Central, Reddit, and course providers to understand what other learners thought about each course and combined it with my own experience as a learner.
- Select: Well-made courses were picked if they presented valuable and engaging content. Selection criteria includes comprehensive curriculum, affordability, release date, ratings and enrollments.
Ultimately, I used a combination of data and my own judgment to make these picks. I’m confident these recommendations will be a reliable way to learn React.
