CourseFlix

ReactJS Ultra for Beginners

14h 58m 3s
English
Paid

React can feel hard at first. You see many hooks, tools, and patterns. You copy code, but you do not know why it works. This slows you down and makes the learning process confusing.

ReactJS Ultra for Beginners takes a slower and clearer path. You start with simple ideas. You add new concepts step by step. You learn each topic through short projects that grow over time.

How the Course Works

You begin with components and state. You then move to routing, forms, async data, and shared state. Each topic comes with practice. The projects build on each other, so you do not lose context.

You also learn testing, basic optimization, and simple ways to deploy your work. React stops feeling like magic and starts feeling like a tool you can control.

What You Will Learn

  • the core of React: components, props, state, and events
  • common tasks: forms, routing, async data, and state management
  • modern tools like Zustand, React Query, and TypeScript
  • how to build real projects: a blog, a game manager, and a chat

Why This Course Stands Out

This course is a clear path, not a list of random videos. It helps you understand how things work, so you can fix problems on your own. You stop guessing. You stop feeling stuck. You start building with confidence.

Additional

https://github.com/machadop1407/reactjs-ultra/

Watch Online 111 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 111 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Intro to The Course
All Course Lessons (111)
#Lesson TitleDurationAccess
1
Intro to The Course Demo
03:34
2
How to Learn This Course
03:03
3
What is React and Why You Should Learn It?
04:15
4
Installing Nodejs
03:04
5
Setting up a React Development Environment
04:31
6
VSCode Extensions
03:18
7
Functions
05:40
8
Ternary and Logical Operators
07:22
9
Objects and Arrays
07:12
10
Map and Filter Functions
07:16
11
Array Function Key Prop
03:13
12
String Templating
04:28
13
React Project Folder Structure
06:56
14
An Intro To JSX
10:34
15
What is the App Component?
02:47
16
How to use Components?
10:24
17
Lists in React
09:46
18
CSS in React
09:11
19
First React Project
03:35
20
Making A Navbar
07:11
21
Displaying Images
07:12
22
Making the About Us Section
02:36
23
Creating A Footer
03:39
24
What is the useState Hook?
10:40
25
What is the useState Hook? Part 2
04:43
26
What is the useState Hook? Part 3
14:51
27
Beginner Project - Task Tracker App
35:04
28
The Virtual Dom
01:51
29
React Component Lifecycle
01:43
30
The useEffect Hook
15:41
31
The useEffect Hook Part 2
08:42
32
React Router
14:06
33
React Router Part 2
14:29
34
Forms in React - React Hook Form
25:37
35
Intro To State Management - Global States
18:38
36
Intermediate Project - Build A Blog App
40:41
37
Intermediate Project - Build A Blog App Part 2
26:58
38
Rules of Hooks
04:06
39
Learn the useReducer Hook
09:55
40
Learn the useRef Hook
12:04
41
Making Your Own Custom Hook
12:11
42
Why Zustand?
05:23
43
Intro to Zustand
11:09
44
Zustand Subscriptions
09:02
45
Why React Query?
06:19
46
The useQuery Hook
16:39
47
The useMutation Hook
08:46
48
What are we building?
02:55
49
Project Demo
02:27
50
Project Structure
05:29
51
Setup REST API
12:44
52
Set Up React Project
06:03
53
Setup the Project Routes
09:12
54
Fetch List of Games
08:14
55
Display List of Games
01:45
56
Create Game Page
20:04
57
Invalidating Queries
05:35
58
Update Game Page
06:06
59
Fetch Game By Id
03:48
60
Reseting the Form
07:22
61
Update Game Endpoint
04:29
62
Update Game Mutation
02:50
63
Invalidating More Queries
02:59
64
Creating the Delete Game Endpoint
01:59
65
Adding the Delete Button
05:29
66
Creating the Theme Manager
12:00
67
Creating the 404 Page Not Found
02:20
68
Rules of React
04:02
69
Keeping Components Focused
05:09
70
What Are Class Components?
04:20
71
Why Typescript?
03:17
72
Basic Typescript Types
06:24
73
Functions in Typescript
02:42
74
Custom Typescript Types
04:35
75
Unions
03:34
76
Interfaces
05:32
77
Intersections
01:55
78
Enums
02:41
79
Setting Up Typescript in React
04:06
80
Props using Typescript
03:40
81
States using Typescript
03:31
82
Forms using Typescript
02:03
83
Zustand using Typescript
02:17
84
What are we building?
04:45
85
Project Demo
04:06
86
Project Setup
04:43
87
Setting up SupaBase
08:28
88
Creating the Login Page
08:20
89
Login Page Form Validation
05:16
90
Setting Up Supabase Auth
09:43
91
Supabase Auth Listener
12:05
92
Setting Up Project Routes
11:09
93
Chat Room Page
07:46
94
Creating the Database Table
17:43
95
Loading the Chat Messages
11:05
96
Displaying the Messages
09:45
97
Realtime Messages
09:35
98
Create a New Room Page
11:09
99
List Available Roomst
08:01
100
Intro to Testing In React
03:26
101
Setup Testing
09:17
102
How to Test A Simple Component?
09:36
103
How to Test User Events?
10:15
104
How to Test Data Fetching?
11:47
105
Bonus: Writing Tests for The Final Project
16:39
106
What is Async React?
06:11
107
Suspense and Lazy Loading
10:38
108
Client vs Server Component
06:57
109
The useTransition Hook
08:36
110
The useDeferredValue Hook
08:34
111
Deploying To Vercel
08:45
Unlock unlimited learning

Get instant access to all 110 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

111 lessons · 14h 58m 3s
Show all 111 lessons
  1. 1 Intro to The Course 03:34
  2. 2 How to Learn This Course 03:03
  3. 3 What is React and Why You Should Learn It? 04:15
  4. 4 Installing Nodejs 03:04
  5. 5 Setting up a React Development Environment 04:31
  6. 6 VSCode Extensions 03:18
  7. 7 Functions 05:40
  8. 8 Ternary and Logical Operators 07:22
  9. 9 Objects and Arrays 07:12
  10. 10 Map and Filter Functions 07:16
  11. 11 Array Function Key Prop 03:13
  12. 12 String Templating 04:28
  13. 13 React Project Folder Structure 06:56
  14. 14 An Intro To JSX 10:34
  15. 15 What is the App Component? 02:47
  16. 16 How to use Components? 10:24
  17. 17 Lists in React 09:46
  18. 18 CSS in React 09:11
  19. 19 First React Project 03:35
  20. 20 Making A Navbar 07:11
  21. 21 Displaying Images 07:12
  22. 22 Making the About Us Section 02:36
  23. 23 Creating A Footer 03:39
  24. 24 What is the useState Hook? 10:40
  25. 25 What is the useState Hook? Part 2 04:43
  26. 26 What is the useState Hook? Part 3 14:51
  27. 27 Beginner Project - Task Tracker App 35:04
  28. 28 The Virtual Dom 01:51
  29. 29 React Component Lifecycle 01:43
  30. 30 The useEffect Hook 15:41
  31. 31 The useEffect Hook Part 2 08:42
  32. 32 React Router 14:06
  33. 33 React Router Part 2 14:29
  34. 34 Forms in React - React Hook Form 25:37
  35. 35 Intro To State Management - Global States 18:38
  36. 36 Intermediate Project - Build A Blog App 40:41
  37. 37 Intermediate Project - Build A Blog App Part 2 26:58
  38. 38 Rules of Hooks 04:06
  39. 39 Learn the useReducer Hook 09:55
  40. 40 Learn the useRef Hook 12:04
  41. 41 Making Your Own Custom Hook 12:11
  42. 42 Why Zustand? 05:23
  43. 43 Intro to Zustand 11:09
  44. 44 Zustand Subscriptions 09:02
  45. 45 Why React Query? 06:19
  46. 46 The useQuery Hook 16:39
  47. 47 The useMutation Hook 08:46
  48. 48 What are we building? 02:55
  49. 49 Project Demo 02:27
  50. 50 Project Structure 05:29
  51. 51 Setup REST API 12:44
  52. 52 Set Up React Project 06:03
  53. 53 Setup the Project Routes 09:12
  54. 54 Fetch List of Games 08:14
  55. 55 Display List of Games 01:45
  56. 56 Create Game Page 20:04
  57. 57 Invalidating Queries 05:35
  58. 58 Update Game Page 06:06
  59. 59 Fetch Game By Id 03:48
  60. 60 Reseting the Form 07:22
  61. 61 Update Game Endpoint 04:29
  62. 62 Update Game Mutation 02:50
  63. 63 Invalidating More Queries 02:59
  64. 64 Creating the Delete Game Endpoint 01:59
  65. 65 Adding the Delete Button 05:29
  66. 66 Creating the Theme Manager 12:00
  67. 67 Creating the 404 Page Not Found 02:20
  68. 68 Rules of React 04:02
  69. 69 Keeping Components Focused 05:09
  70. 70 What Are Class Components? 04:20
  71. 71 Why Typescript? 03:17
  72. 72 Basic Typescript Types 06:24
  73. 73 Functions in Typescript 02:42
  74. 74 Custom Typescript Types 04:35
  75. 75 Unions 03:34
  76. 76 Interfaces 05:32
  77. 77 Intersections 01:55
  78. 78 Enums 02:41
  79. 79 Setting Up Typescript in React 04:06
  80. 80 Props using Typescript 03:40
  81. 81 States using Typescript 03:31
  82. 82 Forms using Typescript 02:03
  83. 83 Zustand using Typescript 02:17
  84. 84 What are we building? 04:45
  85. 85 Project Demo 04:06
  86. 86 Project Setup 04:43
  87. 87 Setting up SupaBase 08:28
  88. 88 Creating the Login Page 08:20
  89. 89 Login Page Form Validation 05:16
  90. 90 Setting Up Supabase Auth 09:43
  91. 91 Supabase Auth Listener 12:05
  92. 92 Setting Up Project Routes 11:09
  93. 93 Chat Room Page 07:46
  94. 94 Creating the Database Table 17:43
  95. 95 Loading the Chat Messages 11:05
  96. 96 Displaying the Messages 09:45
  97. 97 Realtime Messages 09:35
  98. 98 Create a New Room Page 11:09
  99. 99 List Available Roomst 08:01
  100. 100 Intro to Testing In React 03:26
  101. 101 Setup Testing 09:17
  102. 102 How to Test A Simple Component? 09:36
  103. 103 How to Test User Events? 10:15
  104. 104 How to Test Data Fetching? 11:47
  105. 105 Bonus: Writing Tests for The Final Project 16:39
  106. 106 What is Async React? 06:11
  107. 107 Suspense and Lazy Loading 10:38
  108. 108 Client vs Server Component 06:57
  109. 109 The useTransition Hook 08:36
  110. 110 The useDeferredValue Hook 08:34
  111. 111 Deploying To Vercel 08:45

Related courses

  • Master Spring Boot 3 & Spring Framework 6 with Java thumbnail

    Master Spring Boot 3 & Spring Framework 6 with Java

    By: Udemy
    This is THE COURSE you need to learn everything you need to know about building real world Java applications and deploying them to the cloud using Spring and.
    37 hours 34 minutes 14 seconds 5 / 5
  • React Simplified - Beginner thumbnail

    React Simplified - Beginner

    By: Web Dev Simplified (Kyle Cook)
    A complete video course with just under 11 hours of content spread across 79 videos and 10 modules. This may be called a Beginner Course, but it doesn't just s
    10 hours 58 minutes 46 seconds 5 / 5
  • MobX In Depth With React(Hooks+TypeScript) thumbnail

    MobX In Depth With React(Hooks+TypeScript)

    By: Udemy
    This is the most extensive course about MobX you will find online, After a few years of using MobX, I'm really passionate about it and really love it, I decided
    2 hours 25 minutes 54 seconds

Frequently asked questions

What is ReactJS Ultra for Beginners about?
React can feel hard at first . You see many hooks, tools, and patterns. You copy code, but you do not know why it works. This slows you down and makes the learning process confusing. ReactJS Ultra for Beginners takes a slower and clearer…
Who teaches ReactJS Ultra for Beginners?
ReactJS Ultra for Beginners is published by an independent instructor on CourseFlix. The catalog page lists the course alongside related material in the same topic.
How long is ReactJS Ultra for Beginners?
ReactJS Ultra for Beginners contains 111 lessons with a total runtime of 14 hours 58 minutes. All lessons are available to watch online at your own pace.
Is ReactJS Ultra for Beginners free to watch?
ReactJS Ultra for Beginners is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch ReactJS Ultra for Beginners online?
ReactJS Ultra for Beginners is available to watch online on CourseFlix at https://courseflix.net/course/reactjs-ultra-for-beginners. The page hosts every lesson with the integrated video player; no download is required.