Modern React From The Beginning
Published 7/2025
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 11.22 GB | Duration: 25h 6m
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
Code:
Bitte
Anmelden
oder
Registrieren
um Code Inhalt zu sehen!
Code:
Bitte
Anmelden
oder
Registrieren
um Code Inhalt zu sehen!