Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Language
English
Taught by
Brad Traversy, Will Adams
Rating
3 views
Course Overview
Learn React from the ground up along with modern environments such as React Router v7, TanStack, MERN, etc
Unlock the full potential of React in 2025 with this comprehensive, beginner-friendly course that goes beyond the basics. Whether you're brand new to React or want to deepen your understanding of its modern features, this course will give you the practical skills you need to build real-world applications using today’s best practices.
You'll start by learning React fundamentals in a highly structured, easy-to-digest format. We will be building projects as you learn.
Here are some of the concepts you will learn:
The fundamentals: JSX, components, props, state, and events
The entire lifecycle of a React component
All the core React hooks – useState, useEffect, useRef, useContext and more
Best practices for functional components in modern React
Conditional rendering patterns (ternary vs &&)
Organizing files, reusable components, and clean architecture
Advanced routing with React Router v7 including declarative and framework mode with SSR
Data fetching and caching with TanStack Query
Real-world debugging using React DevTools, network tab, and logging
Secure authentication with access & refresh tokens using HTTP-only cookies
Full stack MERN development
Deployment using Vercel (frontend) and Render (backend)
Premium Docs:
You will have access to the premium docs, which is basically the entire course in text/Markdown format.
Projects:
This course has a bunch of small to medium-sized projects to build for your portfolio:
- Rating/Feedback UI - Simple star rating UI to learn the basics with. Events, props, state, etc
- Notes App - Create and delete notes from local storage. Learn about forms and state.
- Lifecycle Playground - Sandbox to learn about component lifecycle and the useEffect hook
- Simple Timer - Learn about the useRef hook and persisting data across page reloads.
- GitHub Finder - Use TanStack Query to get and send data to and from the Github API
- Crypto Dash - Use the CoinGecko API to create a dashboard for getting prices and other info from Crypto coins.
- IdeaDrop - Full stack MERN app with TanStack Router on the frontend.
- The Friendly Dev - Portfolio website and blog built with React Router v7 and Strapi headless CMS.
Course Content
- 10 section(s)
- 227 lecture(s)
- Section 1 Introduction & Getting Started
- Section 2 React-Related JavaScript Refresher
- Section 3 React Fundamentals - State, hooks, events, props & more
- Section 4 Forms, Input & Controlled Components - Notes App Project
- Section 5 Component Lifecycle & useEffect Hook
- Section 6 useRef Hook - Simple Timer Project
- Section 7 Working With APIs - Crypto Dash Project
- Section 8 React Router In Declarative Mode - Extend Crypto Dash Project
- Section 9 Build & Deploy
- Section 10 Context API - Shopping Cart UI
What You’ll Learn
- Learn The Fundamentals Of React (Components, state, hooks, context API & more)
- Build Projects (Portfolio website, notes app, shopping cart UI, idea sharing app & more)
- React Router v7 - Declarative & Framework Mode With SSR
- TanStack Router & TanStack Query For Working With APIs
- Portfolio Website WIth Strapi Headless CMS Integration
- Full Stack MERN App With Refresh Tokens For Authentication
- Learn hooks like useState, useEffect, useRef, useContext
- Suitable For Beginners & Intermediates
Reviews
-
SSekti Wicaksono
The idea-drop part was great but missing some config during deployment, so I got an error for hard refresh. And the fullpath of error on the console should be mitigated when the user is authenticated. It would be bad showing the fullpath like that publicly for authenticated user. If Brad telling me how to hide the error this course would be 5 stars already
-
JJulio C O Barreto
Excellent course and teaching style from the instructor. Congratulations on the course and great content.
-
GGabriel Gric
The course is excellent. The projects are interesting, and the working frameworks are modern. I was able to complete all the projects and deploy them to production successfully. The explanations are clear. I highly recommend this course.
-
YYaron Dotan
This course is more suited as a refresher for developers with some basic background in React than for true beginners. Cons: - There are no infographics explaining the concepts and mechanisms behind React. The instructor just reads through a bullet-point list which does not teach these concepts properly. It makes it difficult for a beginner to map these concepts in his mind. - The instructor flies through the material very quickly, usually coding as he talks. This is disorienting for a beginner that doesn't have a good grasp of the subject as he needs to both learn new ideas and follow the code on screen. You will find yourself pausing and rewinding the videos numerous times to try and understand what is being said and done. This in turn repeatedly breaks your concentration and line of thought. - The instructor doesn't take into account that many of his students are NOT native English speaker. The speed at which he talks - without breathing in between - leaves non-native English speakers behind. It is extremely difficult to follow what he says. Pros: + Hands on approach - teaching through examples. + The instructor is knowledgeable. Bottom line: I recommend doing a proper React beginner course on Udemy or other platforms and then come back to this one for its strong hands-on approach.
