Overview
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