Modern React From The Beginning

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

Requirements

You should know the fundamentals of JavaScript

Description

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 eventsThe entire lifecycle of a React componentAll the core React hooks – useState, useEffect, useRef, useContext and moreBest practices for functional components in modern ReactConditional rendering patterns (ternary vs &&)Organizing files, reusable components, and clean architectureAdvanced routing with React Router v7 including declarative and framework mode with SSRData fetching and caching with TanStack QueryReal-world debugging using React DevTools, network tab, and loggingSecure authentication with access & refresh tokens using HTTP-only cookiesFull stack MERN developmentDeployment 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.

Overview

Section 1: Introduction & Getting Started

Lecture 1 Welcome To The Course

Lecture 2 How To Take This Course

Lecture 3 Course Code Repos

Lecture 4 What Is React?

Lecture 5 React App Architecture

Lecture 6 Component-Based Development

Lecture 7 React vs Vanilla JavaScript

Lecture 8 React Ecosystem

Lecture 9 How React Works Under The Hood

Lecture 10 Development Environment Setup

Section 2: React-Related JavaScript Refresher

Lecture 11 Section Intro

Lecture 12 Arrow Functions

Lecture 13 Template Literals

Lecture 14 Ternary & Short Circuit Rendering

Lecture 15 Destructuring & Rest Operator

Lecture 16 Array Methods

Lecture 17 Optional Chaining & Nullish Coalescing Operator

Lecture 18 Immutability & Spread Operator

Lecture 19 Promises & Async Await

Section 3: React Fundamentals - State, hooks, events, props & more

Lecture 20 Section Intro

Lecture 21 Quick React Setup & createElement

Lecture 22 Intro To JSX (JavaScript XML)

Lecture 23 Vite Build Tool Setup

Lecture 24 Creating Components

Lecture 25 Styling In React

Lecture 26 Lists

Lecture 27 Handling Events

Lecture 28 Intro To State

Lecture 29 Rating State

Lecture 30 More on UseState Hook

Lecture 31 Conditional Rendering & Styling

Lecture 32 Props

Lecture 33 Component Composition

Lecture 34 Submit Rating

Lecture 35 Modal Component Composition

Lecture 36 Passing Data As Children

Section 4: Forms, Input & Controlled Components - Notes App Project

Lecture 37 Section Intro

Lecture 38 App & Tailwind Setup (v4)

Lecture 39 Controlled Inputs

Lecture 40 Form Data Object

Lecture 41 Form Submission & Global State

Lecture 42 Show Notes

Lecture 43 Make Form Collapsible

Lecture 44 Reusable Input Components

Lecture 45 Delete Notes

Lecture 46 Conditional Rendering Challenge

Lecture 47 Prop Drilling

Section 5: Component Lifecycle & useEffect Hook

Lecture 48 Section Intro

Lecture 49 Component Lifecycle Explained

Lecture 50 Classes & Lifecycle Methods

Lecture 51 Lifecycle & useEffect

Lecture 52 LocalStorage Side Effect

Section 6: useRef Hook - Simple Timer Project

Lecture 53 Section Intro

Lecture 54 What Is useRef & Project Setup

Lecture 55 useRef In Action & Uncontrolled Inputs

Lecture 56 Persist Timer Across Re-Renders

Lecture 57 Component Composition Challenge

Lecture 58 Auto-Focus Start Button

Lecture 59 Save Timer To Local Storage

Section 7: Working With APIs - Crypto Dash Project

Lecture 60 Section & Project Intro

Lecture 61 API Info & Project Setup

Lecture 62 Making HTTP Requests

Lecture 63 Async/Await In useEffect

Lecture 64 Display Coin Data

Lecture 65 Environment Variables

Lecture 66 Limit Selector

Lecture 67 Filter Coins

Lecture 68 Sort Order Selector

Section 8: React Router In Declarative Mode - Extend Crypto Dash Project

Lecture 69 Intro To Routing

Lecture 70 React Router Syntax

Lecture 71 Homepage Route

Lecture 72 About Page & Link Component

Lecture 73 Not Found Page

Lecture 74 Fetch Coin Details

Lecture 75 Display Coin Details

Lecture 76 Add Loading Spinner

Lecture 77 Get & Format Chart Data

Lecture 78 Show Chart

Section 9: Build & Deploy

Lecture 79 Section Intro

Lecture 80 Understanding The Build Process

Lecture 81 The Build Command

Lecture 82 Deploy To Vercel

Section 10: Context API - Shopping Cart UI

Lecture 83 Section Intro

Lecture 84 What Is the Context API?

Lecture 85 Project Setup

Lecture 86 JSON Server Setup

Lecture 87 Display Product Data

Lecture 88 Setup Proxy

Lecture 89 Product Context

Lecture 90 Cart Context

Lecture 91 Add To Cart Button

Lecture 92 Header & Cart Count

Lecture 93 Cart Items Dropdown

Lecture 94 Remove Items & Clear Cart

Lecture 95 Store Cart Items To Local Storage

Section 11: React Router Framework Mode - Friendly Dev Project

Lecture 96 Section & Project Intro

Lecture 97 Project Setup & File Structure

Lecture 98 Creating Routes

Lecture 99 Devtools Console Error Fix

Lecture 100 SSR & Client Hydration

Lecture 101 Links & Navigation

Lecture 102 Active Link Styling

Lecture 103 Responsive Menu

Lecture 104 Hero Component

Lecture 105 Introduction To Types (TypeScript)

Lecture 106 Layout Routes

Section 12: Loaders, Filterting, Pagination & More

Lecture 107 Loaders Overview

Lecture 108 Fetch Projects With Loader

Lecture 109 Create Project Type

Lecture 110 Display Loader Data

Lecture 111 Dynamic Route & Client Loader

Lecture 112 Details Page Output

Lecture 113 Project Pagination

Lecture 114 Pagination Component

Lecture 115 Project Category Filter

Lecture 116 Animate Project Filter

Lecture 117 Featured Projects

Section 13: Inner Pages, Actions, Markdown Blog

Lecture 118 About Page

Lecture 119 Contact Page JSX

Lecture 120 React Router Actions Example

Lecture 121 Form Validation With Actions

Lecture 122 Not Found Page

Lecture 123 What Is Markdown?

Lecture 124 Fetch Post Meta

Lecture 125 Display Post Meta

Lecture 126 Single Post & Markdown

Lecture 127 Display Details Page

Lecture 128 Sort Posts By Date

Lecture 129 Re-Use Pagination Component

Lecture 130 Blog Post Filter

Lecture 131 Latest Blog Posts

Section 14: Strapi Headless CMS For Content - Extending Friendly Dev Project

Lecture 132 Headless CMS Explained

Lecture 133 Full Stack Folder Structure

Lecture 134 Create Strapi Project

Lecture 135 Database & Strapi Admin Setup

Lecture 136 Project Content Type

Lecture 137 Accessing The API

Lecture 138 Fetch Projects From Strapi

Lecture 139 Strapi Project Type

Lecture 140 Fetch Individual Project From Strapi

Lecture 141 Home Featured Projects

Lecture 142 Post Content Type

Lecture 143 Fetch Posts From Strapi

Lecture 144 Fetch Post Details From Strapi

Lecture 145 Homepage Posts From Strapi

Section 15: Cloudinary Images, Contact Form & Full Stack Deployment

Lecture 146 Upload Images To Cloudinary

Lecture 147 Formspree.io Contact Form

Lecture 148 Deploy Strapi To Render.com

Lecture 149 Frontend Vercel Deployment

Section 16: TanStack Query - GitHub Finder Project

Lecture 150 Section Intro & Project Intro

Lecture 151 What Is TanStack Query?

Lecture 152 Project Setup & Query Client

Lecture 153 GitHub API Integration

Lecture 154 Making Queries With useQuery Hook

Lecture 155 Clean Up Code

Lecture 156 React Query Devtools Install

Lecture 157 Recent Searches Feature

Lecture 158 Let's Chat About State

Lecture 159 Prefetching Data With TanStack Query

Lecture 160 Save Recent Users To Local Storage

Lecture 161 Show User Suggestions

Lecture 162 Suggestions Dropdown Component

Lecture 163 API Token & Important Security Information

Lecture 164 Check If User Is Following

Lecture 165 Mutations - Follow User

Lecture 166 Mutations - Unfollow User

Lecture 167 Toast Notifications

Section 17: TanStack Router - IdeaDrop Project

Lecture 168 Section & Project Intro

Lecture 169 Intro To TanStack Router

Lecture 170 Project Setup

Lecture 171 Creating Routes

Lecture 172 Head & Meta

Lecture 173 Mock REST API

Lecture 174 Fetch Data With TanStack Router Loaders

Lecture 175 Vite Proxy & Fix Config Errors

Lecture 176 TanStack Query & QueryClient Setup

Lecture 177 Use TanStack Query To Fetch Idea

Lecture 178 Install & Use Axios

Lecture 179 Fetch & Display Ideas

Lecture 180 Header & Main Layout

Lecture 181 Not Found Page

Lecture 182 Homepage Challenge

Lecture 183 IdeaCard Component

Lecture 184 Create Idea Form

Lecture 185 Create Idea Mutation

Lecture 186 Delete Ideas

Lecture 187 Idea Edit Form

Lecture 188 Update Idea Mutation

Section 18: MERN Stack: Backend Express API & MongoDB Database

Lecture 189 Section Intro

Lecture 190 What Is The MERN Stack?

Lecture 191 Monorepo vs Separate Repos

Lecture 192 Basic Express Server Setup

Lecture 193 Creating Server Endpoints

Lecture 194 Route Files

Lecture 195 Custom Error Handler

Lecture 196 MongoDB Atlas Setup (Cloud Database)

Lecture 197 MongoDB Compass Setup & Data Import

Lecture 198 Connect To Database Using Mongoose

Lecture 199 Model & Fetch Ideas

Lecture 200 Create New Idea

Lecture 201 Delete & Update Ideas

Lecture 202 Integrating The Frontend & Backend

Lecture 203 Limit & Sort At API Level

Section 19: API Authentication With JWT & Refresh Tokens

Lecture 204 What Are JWTs?

Lecture 205 Access & Refresh Token Strategy Explained

Lecture 206 User Model & Password Hashing

Lecture 207 User Register Endpoint

Lecture 208 Generate Access & Refresh Tokens

Lecture 209 Logout Endpoint & Clear Cookie

Lecture 210 Login Endpoint

Lecture 211 Use Refresh Token

Lecture 212 Protecting Routes

Lecture 213 User Authorization & Access Control

Section 20: Full Stack Authentication

Lecture 214 Full Stack Auth Flow Explained

Lecture 215 Auth Pages & Layout

Lecture 216 Auth Context

Lecture 217 Register User

Lecture 218 Login User

Lecture 219 Conditional Nav Links

Lecture 220 Logout User

Lecture 221 Refresh Token On Page Refresh

Lecture 222 Send Token With Request Using Axios Interceptor

Lecture 223 Refresh Token When It Expires

Lecture 224 Hide Controls

Section 21: MERN App Depoloyment

Lecture 225 Prepare For Deployment

Lecture 226 Backend API Deployment

Lecture 227 Frontend Deployment

Anyone that wants to learn React or learn how to use modern React environments such as TanStack & React Router