CF

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/

About the Author: Pedro Henrique Machado

Pedro Henrique Machado thumbnail
An experienced full-stack web developer and instructor, specializing in React and the JavaScript ecosystem. He runs a YouTube channel (Pedrotechnologies), publishes articles, and offers programming courses.

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

Related courses

  • Build a Shopping Cart App thumbnailUpdated 2y ago

    Build a Shopping Cart App

    By: Reed Barger
    Gain expert skills to build and deploy an amazing React app. An epic training course that gives you the entire process to build and deploy your own top-tier e-c
    1h 41m
  • MERN eCommerce From Scratch thumbnailUpdated 2y ago

    MERN eCommerce From Scratch

    By: Udemy, Brad Traversy
    There are a lot of "eCommerce" courses out there, but most use some kind of prebuilt plugin or platform. In this course, we will build a completely customized e
    14h 49m5/5
  • Advanced Radix UI thumbnailUpdated 2y ago

    Advanced Radix UI

    By: Build UI
    Radix UI has become one of the most popular component libraries in the React ecosystem.
    2h 13m5/5

Frequently asked questions

What are the prerequisites for taking this course?
This course is designed for beginners, so there are no specific prerequisites required. However, having a basic understanding of JavaScript, including functions, objects, and arrays, is beneficial. The course covers foundational topics such as functions, ternary and logical operators, and array methods like map and filter, which will help reinforce your JavaScript skills as you learn React.
What projects will I build during this course?
Throughout the course, you will build several projects that grow in complexity. Initially, you'll create a Task Tracker App to understand components and state. As you progress, you'll develop a Blog App to practice routing, forms, and state management. You'll also build a Game Manager and a Chat application, which integrate async data handling and state management using tools like Zustand and React Query.
Who is the target audience for this course?
This course is ideal for beginners who are new to React and want to understand how to use it effectively. It's also suitable for those who have tried React before but found it confusing or overwhelming. The course is structured to help learners develop a solid understanding of React core concepts, modern tools, and project-based learning.
How does this course compare to other beginner React courses?
Unlike many beginner courses that present a fragmented learning experience, this course offers a clear and structured path. It focuses on building understanding through short projects that build on each other. By covering essential tools like Zustand, React Query, and TypeScript, and addressing common tasks like forms and routing, the course equips learners with the skills needed to handle real-world React applications confidently.
Which tools and libraries are covered in this course?
The course covers several modern tools and libraries that are commonly used in React development. You'll learn about Zustand for state management, React Query for handling async data, and TypeScript for adding type safety to your projects. These tools are introduced in context with practical applications, ensuring you understand their purpose and how to implement them effectively.
What topics are not covered in this course?
This course focuses on foundational React concepts and practical project-building skills. It does not cover advanced topics such as server-side rendering, advanced optimization techniques, or complex state management libraries like Redux. The course also does not delve into testing frameworks beyond basic testing concepts, as the primary aim is to build a solid understanding of React fundamentals.
What is the expected time commitment for this course?
With a total of 111 lessons, the course is designed to be completed at your own pace. The structure allows for gradual learning, with each lesson building on the previous one through practical projects. Depending on your familiarity with JavaScript and the time you can dedicate, it may take a few weeks to complete the course. Consistent practice and engagement with the projects will help reinforce learning effectively.