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

YouTube

React Complete Series - Beginner to Pro Full Course

Caleb Curry via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn React development from complete beginner to professional level through this comprehensive 40-hour tutorial series covering fundamental concepts, advanced techniques, and full-stack application development. Master core React concepts including components, props, useState and useEffect hooks, and state management while building practical projects with modern styling using Tailwind CSS and React Bootstrap. Explore routing with React Router, API integration, and form handling before advancing to full-stack development by creating REST APIs with Django backend and implementing complete CRUD operations. Dive into authentication systems using JSON Web Tokens, localStorage management, and user registration/login functionality while learning advanced React patterns like custom hooks, useContext, and destructuring techniques. Expand your skillset with TypeScript integration, data visualization using Chart.js for cryptocurrency price tracking, and GraphQL implementation with Apollo Client for efficient data fetching. Progress to Next.js for static site generation and server-side rendering, including getStaticProps, getStaticPaths, incremental static regeneration, and MongoDB integration for database operations. Conclude with modern development tools including React Query for advanced data fetching and caching, Material UI for professional component design, and deployment strategies using Vercel, providing a complete foundation for professional React development.

Syllabus

React JS Full Course (20 HOUR All-in-One Tutorial for Beginners) - PART 1!
React JS Full Course (20 HOUR All-in-One Tutorial for Beginners) - PART 2!
Intro to React - React Tutorial 1
Create React App Files Explained - React Tutorial 2
Our First Component - React Tutorial 3
Understand Props in Components - React Tutorial 4
Intro to useState Hook - React Tutorial 5
Install Tailwind CSS for React - React Tutorial 6
Styling React with Tailwind CSS Classes - React tutorial 7
Map through State Array (Loop) - React tutorial 8
Create a Popup Modal with React Bootstrap - React Tutorial 9
Create and Style HTML Form - React Tutorial 10
Prefill Form Data in Modal - React Tutorial 11
Update Parent Component State in Child Component - React Tutorial 12
How to Push to State Array - React Tutorial 13
Pass a Component to Props - React Tutorial 14
Create a Navbar with Tailwind CSS - React Tutorial 15
Pages and props.children - React Tutorial 16
Routing with React Router - React Tutorial 17
Create an Active Page Link in Navbar - React Tutorial 18
Finishing up Our Header - React Tutorial 19
Intro to useEffect Hook - React Tutorial 20
useEffect Dependency Array Explained - React Tutorial 21
Fetch an API to Display on Page - React Tutorial 22
URL Parameters in Router - React Tutorial 23
Redirect with useNavigate Hook - React Tutorial 24
Create 404 (Not Found) Page - React Tutorial 25
Fetch Response Status Codes and Errors - React Tutorial 26
Build and Style a Search Component - React Tutorial 27
Setup a Django Backend (Full Stack App) - React Tutorial 28
Create a REST API Backend - React Tutorial 29
Consume Backend API - React Tutorial 30
Create a Details by ID API - React Tutorial 31
Create a Details Page - React Tutorial 32
Return 404 From Backend API (Django) - React Tutorial 33
Code a Full CRUD API (Create, Read, Update, Delete) - React Tutorial 34
DELETE Request with Fetch - React Tutorial 35
Popup Modal to Add Data (POST) - React Tutorial 36
Close Modal on POST Success (and Add Result to State) - React Tutorial 37
Dynamic Edit Form to Update API Data - React Tutorial 38
Comparing State Objects - React Tutorial 39
Display Form Errors on Page - React Tutorial 40
Tailwind CSS Form and Button Styling - React Tutorial 41
Intro to JWTs and Authentication (JSON Web Tokens) - React Tutorial 42
Create a Login Page - React Tutorial 43
localStorage and Bearer Auth Tokens - React Tutorial 44
useLocation and useNavigate State (Redirect to Previous Page on Login) - React Tutorial 45
useContext Hook Introduction - React Tutorial 46
Create a Logout Button - React Tutorial 47
Auth Refresh Tokens - React Tutorial 48
User Register Form and API - React Tutorial 49
Create a Custom Hook (useFetch) - React Tutorial 50
Destructuring Explained (Custom Hook Parameters and Return Data) - React Tutorial 51
Default Values and Nested Data with Destructuring - React Tutorial 52
Custom Hook on Button Click (onClick POST with useFetch) - React Tutorial 53
TypeScript and Axios Intro - React Tutorial 54
TypeScript Components - React Tutorial 55
Generate Drop Down List from API - React Tutorial 56
Crypto Price Chart with Chart.js - React Tutorial 57
Dynamic Chart with Multiple Drop Downs (Chart.js) - React Tutorial 58
Calculate Crypto Values - React Tutorial 59
Aggregate Data with map and reduce - React Tutorial 60
Pie Chart with Chart.js (react-chartjs-2) - React Tutorial 61
GraphQL API and Apollo Intro - React Tutorial 62
GraphQL in Django Backend (Graphene) - React Tutorial 63
Consume GraphQL API in Frontend - React Tutorial 64
GraphQL Mutations and Parameters in Graphene - React Tutorial 65
Mutations with useMutation Apollo Client - React Tutorial 66
GraphQL Nested Data - React Tutorial 67
Build a Nested Order Form Component - React Tutorial 68
Mutation for Nested Data (Backend) - React Tutorial 69
Add to GraphQL List and refetchQueries - React Tutorial 70
Intro to Next.js Static Site Generation + Server Side Rendering - React Tutorial 71
Routing and Parameters - Next.js - React Tutorial 72
Static Site Generation with getStaticProps - Next.js - React Tutorial 73
Call an API with Axios in getStaticProps - Next.js - React Tutorial 74
Incremental Static Regeneration - Next.js - React Tutorial 75
getStaticPaths Static Data Fetching (Parameterized Pages) - Next.js - React Tutorial 76
fallback with getStaticPaths - Next.js - React Tutorial 77
Lazy Caching with getStaticPaths - Next.js - React Tutorial 78
Connect to MongoDB - React Tutorial 79
MongoDB findOne by ObjectID - React Tutorial 80
Create a GET API with MongoDB - Next.js - React Tutorial 81
Details API by Object ID (MongoDB) - Next.js - React Tutorial 82
POST a New Document (MongoDB API) - Next.js - React Tutorial 83
On-Demand Revalidation in Next.js - React Tutorial 84
Update and Delete API for MongoDB - Next.js - React Tutorial 85
Intro to React Query - React Tutorial 86
React Query Refetch Options and Dev Tools - React Tutorial 87
React Query Refetching Stale Data - React Tutorial 88
Data Caching in React Query - React Tutorial 89
React Query with Next.js Static Site Generation (SSG) - React Tutorial 90
Intro to Material UI - React Tutorial 91
Icons and Tooltips in Material UI - React Tutorial 92
Create a Website Theme - Material UI - React Tutorial 93
Navigation and Active Link Highlighting - Material UI - React Tutorial 94
Grid Styling with Material UI - React Tutorial 95
Data Grid Table with Material UI - React Tutorial 96
Filter Orders by Customer with DataGrid initialState - Material UI - React Tutorial 97
API for nested Objects and MongoDb ObjectId - React Tutorial 98
Adding TypeScript Types to Our Next.js Page - React Tutorial 99
Deploy a Next.js Application with Vercel - React Tutorial 100
Where do I go from Here? 10 Things to Learn - React Tutorial Series Conclusion

Taught by

Caleb Curry

Reviews

Start your review of React Complete Series - Beginner to Pro Full Course

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.