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

YouTube

React Tutorials - Complete Step-by-Step Learning Guide for Web Developers

Dave Gray via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn React development through this comprehensive tutorial series covering fundamental concepts to advanced techniques. Master React setup, JSX syntax, functional components, and CSS styling before progressing to event handling, state management with useState and useEffect hooks, and component communication through props. Build practical skills with forms, controlled inputs, API integration using fetch and Axios, CRUD operations, and routing with React Router. Explore advanced topics including custom hooks, Context API for state management, Redux for complex applications, and deployment strategies to GitHub Pages and Netlify. Dive deep into performance optimization with useCallback, useMemo, useRef, and useReducer hooks, plus React Router v6 features and form validation techniques. Advance to authentication and authorization systems using JWT tokens, protected routes, and role-based access control. Discover React 18 new features, React Query for server state management, pagination, infinite scroll, and search functionality. Learn TypeScript integration with React, including typed hooks, Context API, and useReducer patterns. Build complete projects like shopping carts while mastering drag-and-drop functionality, skeleton loading components, error boundaries, code splitting, and debounced search inputs. Gain expertise in modern development practices including Vite tooling, SWR for data fetching, React Suspense, and form optimization techniques using react-hook-form with Zod validation.

Syllabus

Introduction to React JS | ReactJS Setup and Resources
React App Component and JSX | Learning ReactJS
React JS Functional Components | Learn ReactJS
CSS Styles in React JS | Learn ReactJS
React Click Events | Learn ReactJS
React useState Hook | Learn ReactJS
React JS Lists and Keys | Learn ReactJS
React JS Props and Prop Drilling | Learn ReactJS
React JS Forms | Controlled Inputs | Learn ReactJS
React JS Code Challenge | React Beginner Project
React useEffect Hook tutorial | Learn ReactJS
JSON Server Rest API | React Dev Server | Learn ReactJS
Fetch Data from API in React JS | Learn ReactJS
React CRUD Operations | Learn React JS
React Beginners Challenge - Fetch API Data | React JS Beginners Project
Learn React Router with a Beginners Project | Learn React JS
React Router Hooks and Links | React JS Beginner Project
React CSS Width and Height Settings | React App Full Screen Size
React Axios API Requests | Axios with React JS Tutorial
React Custom Hooks with Axios Async useEffect | React Tutorials for Beginners
State Management in React | Context API useContext | React Tutorials for Beginners
Redux Made Easy | Learn React Redux | Redux Tutorial for Beginners
How to deploy a React App to Github Pages and Netlify | React JS Tutorials for Beginners
React JS Full Course for Beginners | Complete All-in-One Tutorial | 9 Hours
Avoid this React State Mistake | React Previous State Explained
useCallback STOPS this React MISTAKE | useCallback React Hooks Tutorial
useMemo Explained | React Hooks useMemo Tutorial
BUILD a React Timer with useRef | React Hooks useRef Tutorial
useReducer is BETTER than useState | React Hook useReducer Tutorial
React Router v6 in 20 Minutes | RRv6 Upgrade & Refactor Tutorial
useLayoutEffect vs useEffect | React Hooks Tutorial
useImperativeHandle Explained with an Example | React Hooks Tutorial
React JS Form Validation | Axios User Registration Form Submit | Beginners to Intermediate
React User Login and Authentication with Axios
React Protected Routes | Role-Based Authorization | React Router v6
The Built-in React Hook NO ONE talks about!
React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios
React Persistent User Login Authentication with JWT Tokens
React Login Input Hooks for User Form Data
Use Axios with React Hooks for Async-Await Requests
React.js User Login and Registration with Auth0
React 18 New Features, Changes & v18 Upgrade Guide
React Query Tutorial for Beginners vs Redux, Axios with CRUD Example
React v18 Hooks - useTransition vs useDeferredValue Examples & Comparison
What is React.memo - It's not useMemo
How to stop useEffect from running twice on mount or first render in React
Pagination in React Tutorial with React Query, Hooks Examples
Infinite Scroll in React | Full Tutorial
Search Filter in React JS with Search Bar in React Example
How to Use a Single Function to Manage React Form State
How to Build a Multi-Page Form with React Hooks | Multi-Step Tutorial
React Progress Bar for a Multi-Step Form
Have You Seen this useMemo Use Case? Memoize & Optimize in React
STOP Wasting Time! Your Next App Needs Vite! | JS, Typescript, React
React Typescript Tutorial for Beginners
Learn React Hooks with Typescript
Learn useReducer with Typescript + React Hooks
Context API React + Typescript | useContext & useReducer Examples
React Typescript Project Tutorial | Shopping Cart - Part 1
React Typescript Project Tutorial | Shopping Cart - Part 2
Drag and Drop in React with React Query and react-beautiful-dnd
This Could Be the BEST Way to fetch data from an API in React! | SWR Preload & Optimistic UI
Skeleton Loading Components with Animation | React & CSS Examples
Write Clean Code with React Suspense | React Error Boundaries Explained
React Lazy Load Code to Load Faster | React Code Splitting Tutorial
React Debounce Search Input API Call | useDebounce React Hook
React Destroys Your CSS Layout | Full Screen React Components
Typescript & Zod tutorial with React-Hook-Form
Avoid useState for Modals & Dialogs
NEVER Guess React Event Types Again!
Why You Should Use TypeScript Generics with react-hook-form
Drag and Drop in React - the missing example
Optimize Your Code!  How I Optimized Drag n Drop Form Inputs

Taught by

Dave Gray

Reviews

Start your review of React Tutorials - Complete Step-by-Step Learning Guide for Web Developers

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.