Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Udemy

Modern React From The Beginning

via Udemy

Overview

Learn React from the ground up along with modern environments such as React Router v7, TanStack, MERN, etc

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

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/FeedbackUI - 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 ReactRouter v7 and Strapi headless CMS.


Syllabus

  • Introduction & Getting Started
  • React-Related JavaScript Refresher
  • React Fundamentals - State, hooks, events, props & more
  • Forms, Input & Controlled Components - Notes App Project
  • Component Lifecycle & useEffect Hook
  • useRef Hook - Simple Timer Project
  • Working With APIs - Crypto Dash Project
  • React Router In Declarative Mode - Extend Crypto Dash Project
  • Build & Deploy
  • Context API - Shopping Cart UI
  • React Router Framework Mode - Friendly Dev Project
  • Loaders, Filterting, Pagination & More
  • Inner Pages, Actions, Markdown Blog
  • Strapi Headless CMS For Content - Extending Friendly Dev Project
  • Cloudinary Images, Contact Form & Full Stack Deployment
  • TanStack Query - GitHub Finder Project
  • TanStack Router - IdeaDrop Project
  • MERN Stack: Backend Express API & MongoDB Database
  • API Authentication With JWT & Refresh Tokens
  • Full Stack Authentication
  • MERN App Depoloyment

Taught by

Brad Traversy and Will Adams

Reviews

4.7 rating at Udemy based on 935 ratings

Start your review of Modern React From The Beginning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.