Mastering the React
Fundamentals and Beyond
Master React development through our comprehensive curriculum, designed to transform both
new comers and seasoned professionals into expert React developers.
Traversy Media’s Students Work at these Companies
What You’ll Learn
Whether you're brand new to React or you've been using it and
want to learn how to use it in different environments, you're in the right place.
Over the past few years, the way that we use React has changed. It went from using a little tool called Create React App to build single page applications to being used in literally dozens of different environments and meta frameworks. So React applications can vary wildly when it comes to how that project is structured and maintained. My goal for this course is to, of course, teach you the fundamentals such as components, hooks, state, props, etc, especially the beginners, but also to show you how to use React in different environments from a kind of vanilla client-side setup with Vite, which is an amazing dev server and frontend tool to React Router Version 7 in both declarative mode and framework mode, in which we'll also take advantage of server-side rendering.
We'll also get into Tanstack Router and TansStack Query. In addition, we'll build a MERN stack application and get into backend development with Node, Express and MongoDB as well as authentication with JWTs and refresh tokens. We'll even get into Strapi, which is a headless content management system.
Over the past few years, the way that we use React has changed. It went from using a little tool called Create React App to build single page applications to being used in literally dozens of different environments and meta frameworks. So React applications can vary wildly when it comes to how that project is structured and maintained. My goal for this course is to, of course, teach you the fundamentals such as components, hooks, state, props, etc, especially the beginners, but also to show you how to use React in different environments from a kind of vanilla client-side setup with Vite, which is an amazing dev server and frontend tool to React Router Version 7 in both declarative mode and framework mode, in which we'll also take advantage of server-side rendering.
We'll also get into Tanstack Router and TansStack Query. In addition, we'll build a MERN stack application and get into backend development with Node, Express and MongoDB as well as authentication with JWTs and refresh tokens. We'll even get into Strapi, which is a headless content management system.
1. Welcome To The Course
2. How To Take The Course
3. Course Code Repos
4. What Is React?
5. React App Architectures
6. Component-Based Development
7. React Vs. Vanilla JavaScript
8. React Ecosystem
9. How React Works Under The Hood
10. Dev Environment Setup
1. Section Intro
2. Component Lifecycle
3. Class Components & Lifecycle Methods
4. useEffect Hook & Side Effects
5. Local Storage Side Effect Example
6. Section Quiz
1. Section Intro
2. What is useRef & Project Setup
3. useRef in Action
4. Persist Timer ID Across Re-Renders
5. Component Composition Challenge
6. Auto-Focus Start Button
7. Save Timer To Local Storage
8. Section Quiz
Things You’ll be building
There are a bunch of projects but it's not really about the actual projects, it's about what you'll learn from them. Each project has a purpose.
Timer App
We will build a simple timer app that will be used to teach the useEffect hook. Broken down in simple steps, we will learn how to use the `useRef` hook to create a reference to a DOM element. Then we will store values without causing a re-render.
Notes App
In this section, we will be working with forms and input fields. We will be creating a simple notes app where users can create and manage notes. We'll also be using Tailwind CSS for styling. We're going to discuss the following topics: Controlled vs Uncontrolled Components, Form validation, Form Submission and event handling, Creating reusable components, Form UI state, Conditional rendering, Prop drilling and lifting state up.
Cart App
This is all about using the context api for global state. We use JSON-server for the data. You will learn how to create a mock rest api as well.
User Finder
We will build a Github Finder Project. In this project we will introduce queries and mutations with the Github API. We will add some UI effects as well.
Life-cycle Playground
We will create a playground setup to learn about the lifecycle of a component and how to use the useEffect hook. We will cover class vs function components, useEffect to perform side effects in our components, and localStorage where we will learn how to retrieve notes when component mounts.
Rating App
We're going to learn the basics of React by creating a simple rating component. We will build features like clicking on stars to set a rating (1–5), hovering over stars for a preview effect, displaying dynamic feedback messages based on rating, and using CSS animations & transitions for a polished UI.
IdeaDrop
We will build an app called Idea Drop, an app to share startup ideas. In this lesson we will introduce Tanstack Router and start with JSON files. Then after that, we have bonus sections to turn it into a MERN stack app. You will learn the basics of Node and Express along with MongoDB.
Friendly Dev
This is a large project. We will introduce loaders from RR and start by fetching projects and blog posts from JSON files. Once that is done, we will build a Strapi backend using a Neon Postgres database and make it more of a real life project. Something that you can build for clients. Pagination, filtering, etc. We will also use Cloudinary for image uploads.
Grab 40% Launch Discount
reactnow
Scratch to reveal the discount code
reactnow
Scratch to reveal the discount code
One course to become a Pro
You will learn things like component lifecycle, react hooks, state management with context API, React Router v7, React Query, API Development and much more.
~ > yarn create vite friendly-dev
Hands-on Coding Experience
This code is packed with hands-on coding exercises. We would encourage you to try the code along approach to get more out of the course.
Markdown Reference Guide
This course includes a markdown reference guide to download for your learning preferences.
Take Quizzes
This course includes quizzes, this is a great way to test the knowledge you've retained and track your progress.
Tech Stack Covered
You’ll learn the following tech stack to build and deploy real-world projects throughout this course.
Grab your spot today
Make a one time purchase for this course or sign up for monthly or yearly subscription and get lifetime access to all courses including an Astro course for members only.
Modern React Course
Own this course forever
40% Discount
$15
$25
No recurring fees, 40% Launch Discount!
What’s included:
This Course only
25+ Hours of HD Video
Downloadable Markdown Guide and Resources
Curated Course Quizzes
Certificate of Completion
Lifetime Course Access
Access to Private Forum & Discord Community
Access to All Courses
Subscribe to Traversy Media to access all courses from Brad
Best Value
$99/year
$300 /year
Use Code VIP and get the first year for $99!
What’s included:
Access To All Courses from Brad Traversy
375+ Hours of HD Content
Save 34% Compared to Monthly
Downloadable Guide and Resources
Extra course attachments & exercises
Certificate of Completion
Priority Support
Access to Private Forum Discord Community
Join Thousands of Students
Students from all over the world have enjoyed Traversy Media courses for years. We value your testimonials and are happy to see your progress and landing a job in tech or starting your business.
Brad cuts through a lot of the hype you hear on social media. His advice is practical and realistic. And I agree with him on pretty much everything he recommends you learn.
Quincy Larson
Teacher & Founder, @freecodecamp
My journey began as a self-taught programmer and led me to become a professional web developer at Agora — all thanks to Brad. I’m proud to say I’m a graduate of Traversy Media.
Shahriar P. Shuvo
Senior Frontend Engineer, Agora Lab
I like how he did the useContext and useReducer. i finally understood it because of the Github Finder project.
I've had a chance to compare Brad's course, and a similar React Course from a different Instructor that had a slightly higher rating. The 2nd course that I recently started has so far been disappointing. I feel that Brad's React Course is presented the right way, and he focuses a lot on React Components and Props. This is probably the reason why I went through his course 4 times already.
Exactly what I wanted to learn, clear thru the end of the course. I'm a career statistician and want to build my own data-driven websites. I'm self-taught (on front end, back end, databases, react) but I could never get the whole stack wired together properly and deployed. Now I finally understand how to put it all together! Thank you!
As always Brad Traversy is the highest quality teacher. If you want to get solid skills with React this course is the one to buy.
Prior to taking this course I had been battling to understand Reactjs , so I mainly used vanilla JS for frontend. It was fun but too much work for a big project. This course made me love & understand the need for a frontend framework , money well spent.
One of the best on React JS. It has clear concepts like hooks, context API, react-redux, and also how to structure your application and there are many more things. I will suggest to buy it and to watch it.
This is my third course by Brad which speaks for itself. He's very clear and the course is extremely practical. If you have done the Modern JS course before then I highly recommend you take this one, a great step up.
I just finished this course, I am very happy with it. I learned a lot about React and an added bonus of APIs. I had no idea what was going on in the beginning but now I feel confident I can actually implement these skills in future projects. Thanks Brad!
I like how he did the useContext and useReducer. i finally understood it because of the Github Finder project.
I've had a chance to compare Brad's course, and a similar React Course from a different Instructor that had a slightly higher rating. The 2nd course that I recently started has so far been disappointing. I feel that Brad's React Course is presented the right way, and he focuses a lot on React Components and Props. This is probably the reason why I went through his course 4 times already.
Exactly what I wanted to learn, clear thru the end of the course. I'm a career statistician and want to build my own data-driven websites. I'm self-taught (on front end, back end, databases, react) but I could never get the whole stack wired together properly and deployed. Now I finally understand how to put it all together! Thank you!
As always Brad Traversy is the highest quality teacher. If you want to get solid skills with React this course is the one to buy.
Prior to taking this course I had been battling to understand Reactjs , so I mainly used vanilla JS for frontend. It was fun but too much work for a big project. This course made me love & understand the need for a frontend framework , money well spent.
One of the best on React JS. It has clear concepts like hooks, context API, react-redux, and also how to structure your application and there are many more things. I will suggest to buy it and to watch it.
This is my third course by Brad which speaks for itself. He's very clear and the course is extremely practical. If you have done the Modern JS course before then I highly recommend you take this one, a great step up.
I just finished this course, I am very happy with it. I learned a lot about React and an added bonus of APIs. I had no idea what was going on in the beginning but now I feel confident I can actually implement these skills in future projects. Thanks Brad!
I like how he did the useContext and useReducer. i finally understood it because of the Github Finder project.
I've had a chance to compare Brad's course, and a similar React Course from a different Instructor that had a slightly higher rating. The 2nd course that I recently started has so far been disappointing. I feel that Brad's React Course is presented the right way, and he focuses a lot on React Components and Props. This is probably the reason why I went through his course 4 times already.
Exactly what I wanted to learn, clear thru the end of the course. I'm a career statistician and want to build my own data-driven websites. I'm self-taught (on front end, back end, databases, react) but I could never get the whole stack wired together properly and deployed. Now I finally understand how to put it all together! Thank you!
As always Brad Traversy is the highest quality teacher. If you want to get solid skills with React this course is the one to buy.
Prior to taking this course I had been battling to understand Reactjs , so I mainly used vanilla JS for frontend. It was fun but too much work for a big project. This course made me love & understand the need for a frontend framework , money well spent.
One of the best on React JS. It has clear concepts like hooks, context API, react-redux, and also how to structure your application and there are many more things. I will suggest to buy it and to watch it.
This is my third course by Brad which speaks for itself. He's very clear and the course is extremely practical. If you have done the Modern JS course before then I highly recommend you take this one, a great step up.
I just finished this course, I am very happy with it. I learned a lot about React and an added bonus of APIs. I had no idea what was going on in the beginning but now I feel confident I can actually implement these skills in future projects. Thanks Brad!
I like how he did the useContext and useReducer. i finally understood it because of the Github Finder project.
I've had a chance to compare Brad's course, and a similar React Course from a different Instructor that had a slightly higher rating. The 2nd course that I recently started has so far been disappointing. I feel that Brad's React Course is presented the right way, and he focuses a lot on React Components and Props. This is probably the reason why I went through his course 4 times already.
Exactly what I wanted to learn, clear thru the end of the course. I'm a career statistician and want to build my own data-driven websites. I'm self-taught (on front end, back end, databases, react) but I could never get the whole stack wired together properly and deployed. Now I finally understand how to put it all together! Thank you!
As always Brad Traversy is the highest quality teacher. If you want to get solid skills with React this course is the one to buy.
Prior to taking this course I had been battling to understand Reactjs , so I mainly used vanilla JS for frontend. It was fun but too much work for a big project. This course made me love & understand the need for a frontend framework , money well spent.
One of the best on React JS. It has clear concepts like hooks, context API, react-redux, and also how to structure your application and there are many more things. I will suggest to buy it and to watch it.
This is my third course by Brad which speaks for itself. He's very clear and the course is extremely practical. If you have done the Modern JS course before then I highly recommend you take this one, a great step up.
I just finished this course, I am very happy with it. I learned a lot about React and an added bonus of APIs. I had no idea what was going on in the beginning but now I feel confident I can actually implement these skills in future projects. Thanks Brad!
This man is simply amazing... Very well paced, thoroughly explains concepts without being redundant. Best React course i've found online by far. Also purchased his MERN stack and Node API Masterclass with / Express / Mongo to complement what im currently learning.
Remembering the days that I took this course and others to improve my development skills. Now I have a $144k/year Front-End Engineering job for an alphabet funded company.
Great course, I liked how I learned mongo db, express, react and node. There are 50 hour courses out there that only teach you one thing and they are overwhelming and don't focus on the fundamentals. With what I learned from Brad I feel ready to start building my own full stack applications.
Brad does an incredible job of explaining all the topics. It's almost laughable how at the beginning of every course I feel like a complete noob and by the end I'm infinitely more confident. This was the case for all 3 of the courses that I bought from Brad. If you are considering learning React and have already learned the HTML/CSS and JavaScript fundamentals then look no further because this is the course you need to buy. Using these skills I am ready to move on and create my own projects now. I am an upcoming college sophomore and Brad's courses allowed me to get way ahead of the game.
Brad is a great instructor. He teaches in a way that catered to me as a complete beginner learning React and MERN tech. I struggled with the pace of other React courses. This is the first course where everything seems to click. I highly recommend it.
When I started this React course I wasn't sure I liked React at all. I was taught a few things from another course (Not one from Brad) but not enough to do what I wanted a project to do. And now it's growing on me thanks to Brad and I have been taught a lot of things from this course that I was trying to figure out how to do on my own but was just having a very hard time with. Now with what I was taught from this course I feel like I can take the knowledge I was taught and finish the project I was working on the way I want it to be.
Brad is seriously the best and the way he teaches is spot on. Easy to understand, easy to follow with, easy to implement. Anything else you would need are in the docs anyway but the teaching here is golden. By far the best course I've purchased thus far (and I have tons).
As a Computer Science Student I have been really happy to follow this course as a supplement to my classes. (This might even be better - please don't tell my teachers!) If you wanna learn React... This is the course!
This man is simply amazing... Very well paced, thoroughly explains concepts without being redundant. Best React course i've found online by far. Also purchased his MERN stack and Node API Masterclass with / Express / Mongo to complement what im currently learning.
Remembering the days that I took this course and others to improve my development skills. Now I have a $144k/year Front-End Engineering job for an alphabet funded company.
Great course, I liked how I learned mongo db, express, react and node. There are 50 hour courses out there that only teach you one thing and they are overwhelming and don't focus on the fundamentals. With what I learned from Brad I feel ready to start building my own full stack applications.
Brad does an incredible job of explaining all the topics. It's almost laughable how at the beginning of every course I feel like a complete noob and by the end I'm infinitely more confident. This was the case for all 3 of the courses that I bought from Brad. If you are considering learning React and have already learned the HTML/CSS and JavaScript fundamentals then look no further because this is the course you need to buy. Using these skills I am ready to move on and create my own projects now. I am an upcoming college sophomore and Brad's courses allowed me to get way ahead of the game.
Brad is a great instructor. He teaches in a way that catered to me as a complete beginner learning React and MERN tech. I struggled with the pace of other React courses. This is the first course where everything seems to click. I highly recommend it.
When I started this React course I wasn't sure I liked React at all. I was taught a few things from another course (Not one from Brad) but not enough to do what I wanted a project to do. And now it's growing on me thanks to Brad and I have been taught a lot of things from this course that I was trying to figure out how to do on my own but was just having a very hard time with. Now with what I was taught from this course I feel like I can take the knowledge I was taught and finish the project I was working on the way I want it to be.
Brad is seriously the best and the way he teaches is spot on. Easy to understand, easy to follow with, easy to implement. Anything else you would need are in the docs anyway but the teaching here is golden. By far the best course I've purchased thus far (and I have tons).
As a Computer Science Student I have been really happy to follow this course as a supplement to my classes. (This might even be better - please don't tell my teachers!) If you wanna learn React... This is the course!
This man is simply amazing... Very well paced, thoroughly explains concepts without being redundant. Best React course i've found online by far. Also purchased his MERN stack and Node API Masterclass with / Express / Mongo to complement what im currently learning.
Remembering the days that I took this course and others to improve my development skills. Now I have a $144k/year Front-End Engineering job for an alphabet funded company.
Great course, I liked how I learned mongo db, express, react and node. There are 50 hour courses out there that only teach you one thing and they are overwhelming and don't focus on the fundamentals. With what I learned from Brad I feel ready to start building my own full stack applications.
Brad does an incredible job of explaining all the topics. It's almost laughable how at the beginning of every course I feel like a complete noob and by the end I'm infinitely more confident. This was the case for all 3 of the courses that I bought from Brad. If you are considering learning React and have already learned the HTML/CSS and JavaScript fundamentals then look no further because this is the course you need to buy. Using these skills I am ready to move on and create my own projects now. I am an upcoming college sophomore and Brad's courses allowed me to get way ahead of the game.
Brad is a great instructor. He teaches in a way that catered to me as a complete beginner learning React and MERN tech. I struggled with the pace of other React courses. This is the first course where everything seems to click. I highly recommend it.
When I started this React course I wasn't sure I liked React at all. I was taught a few things from another course (Not one from Brad) but not enough to do what I wanted a project to do. And now it's growing on me thanks to Brad and I have been taught a lot of things from this course that I was trying to figure out how to do on my own but was just having a very hard time with. Now with what I was taught from this course I feel like I can take the knowledge I was taught and finish the project I was working on the way I want it to be.
Brad is seriously the best and the way he teaches is spot on. Easy to understand, easy to follow with, easy to implement. Anything else you would need are in the docs anyway but the teaching here is golden. By far the best course I've purchased thus far (and I have tons).
As a Computer Science Student I have been really happy to follow this course as a supplement to my classes. (This might even be better - please don't tell my teachers!) If you wanna learn React... This is the course!
This man is simply amazing... Very well paced, thoroughly explains concepts without being redundant. Best React course i've found online by far. Also purchased his MERN stack and Node API Masterclass with / Express / Mongo to complement what im currently learning.
Remembering the days that I took this course and others to improve my development skills. Now I have a $144k/year Front-End Engineering job for an alphabet funded company.
Great course, I liked how I learned mongo db, express, react and node. There are 50 hour courses out there that only teach you one thing and they are overwhelming and don't focus on the fundamentals. With what I learned from Brad I feel ready to start building my own full stack applications.
Brad does an incredible job of explaining all the topics. It's almost laughable how at the beginning of every course I feel like a complete noob and by the end I'm infinitely more confident. This was the case for all 3 of the courses that I bought from Brad. If you are considering learning React and have already learned the HTML/CSS and JavaScript fundamentals then look no further because this is the course you need to buy. Using these skills I am ready to move on and create my own projects now. I am an upcoming college sophomore and Brad's courses allowed me to get way ahead of the game.
Brad is a great instructor. He teaches in a way that catered to me as a complete beginner learning React and MERN tech. I struggled with the pace of other React courses. This is the first course where everything seems to click. I highly recommend it.
When I started this React course I wasn't sure I liked React at all. I was taught a few things from another course (Not one from Brad) but not enough to do what I wanted a project to do. And now it's growing on me thanks to Brad and I have been taught a lot of things from this course that I was trying to figure out how to do on my own but was just having a very hard time with. Now with what I was taught from this course I feel like I can take the knowledge I was taught and finish the project I was working on the way I want it to be.
Brad is seriously the best and the way he teaches is spot on. Easy to understand, easy to follow with, easy to implement. Anything else you would need are in the docs anyway but the teaching here is golden. By far the best course I've purchased thus far (and I have tons).
As a Computer Science Student I have been really happy to follow this course as a supplement to my classes. (This might even be better - please don't tell my teachers!) If you wanna learn React... This is the course!
A message from the Traversy Team
Believe it or not, both Brad and Dennis put their foot in the door of the tech space without a CS degree. Brad, who openly shares the story of his rough past and Dennis, who dropped out of college, both started their own freelancing web businesses. After many years of learning, growing, sharing and changing lives with their videos; they came to the realization that joining forces can make an even greater impact as they are both known for their easy to follow, project based tutorials.
Traversy Media has now become an e-learning brand name, no longer a one man team. Brad and Dennis both get flooded with DMs and emails requesting new learning content or updating old ones. It’s a lot to keep up with and after many years of tireless work, both have reached burnout in their own ways. Brad and Dennis, with the help of guest educators, are working as a team on new courses, free crash courses and updating old courses. All to get you the best, up-to-date and easy to understand content so you can run with the knowledge and make your own impact.
We also want you know that we’ve been there. We’ve racked our brains for days over bugs or breaking through a new language or framework before finally seeing a breakthrough. Many of you have and still study all night while everyone is sound asleep and you’re up with only the comfort of a computer light, music and your favorite drink to keep you up because you’re either too excited or desperate for a better life to sleep. You see, that’s something all us engineers have in common, no matter our background or education. We share the need to learn, solve and ship. No matter the level of difficulty, we have the desire to take something apart and figure it out. If you’re reading this, you have that innate talent of what it takes to be a developer.If you’re reading this, you have that innate talent of what it takes to be a developer. 🚀And don’t confuse this with natural genius as many do and begin to shy away from becoming the developers they could be (because that’s a rare and small community). What it really takes is your willingness to not give up, practice and stay consistent.
We can’t wait to hear your
success story! 🎉Have questions about the course?
We did a public Q&A about the course, here are the most common questions answered 👇
This course is for everyone — from absolute beginners to intermediate developers looking to level up their React skills. Even experienced React professionals may find valuable insights, patterns, and best practices throughout the lessons.
Get Course Updates & More!
Latest updates on courses, coding, freelancing, and tech careers — delivered to your inbox.