Project React. Build a complex React project as a total beginner

16h 31m 5s
English
Paid

Course description

Project React is a course with a unique application that will teach you step-by-step how to create large and complex applications using React. No prior experience is required.

Read more about the course

Surpass Simple Lessons

Lessons may seem like a useful tool for learning, but in reality, they barely scratch the surface of what React truly is. You will never become a senior developer by relying only on lessons. The senior developers I know got there through experience, not because they can create a simple "to-do" application.

Experience Comes Through Creation

To become an experienced React developer, you need to build projects. You need to create large and complex projects that solve difficult problems. The question is, how do you do this when you're just starting out?

Project React Will Teach You to Build

What if I told you there's a better way to learn React?

What if you had a mentor guiding you through the creation of a real-world project with step-by-step instructions?

What if you could create a complex React application, even as a complete beginner?

Imagine having the entire path laid out before you: steps clearly outlined, all your questions answered, and a clear plan for building the project.

Introducing Project React

From today, you no longer have to imagine - you can start building right away.

Project React will guide you step-by-step through the process of creating a large and complex application in React.

I spent months building it so you could get the most effective learning experience.

The course is more effective and useful than any lessons you might have taken.

How It Works

Project React consists of two parts: a course and a special application.

The course includes videos explaining the fundamental concepts of React, and the application contains step-by-step written instructions for building a major project.

The application simultaneously serves as your guide and the project itself. It contains all the necessary code to build the application.

This is a unique approach that has never been used before.

Additionally, the course includes videos where I explain the implementation of each step of the project in detail.

My Vision for This Project

My goal is to create a project that teaches all the basic skills of working with React, while also demonstrating their application through a complex project.

I aim to simplify complex things without losing depth of understanding.

The project covers advanced concepts, making them accessible to beginners, and helps you write code consciously, understanding why you are doing it.

This course will eliminate any doubts about your ability to become a great React developer.

There are simply no other resources like it.

The Project You Will Build

If up to this point it wasn’t obvious, throughout the course you will be building one large project.

At each stage of the course, you will be provided with step-by-step instructions for adding new features to the application, and in the end, you will deploy a fully production-ready React application.

The project is a booking platform, similar to AirBnB or Booking.com.

I chose a booking platform because it covers all the key aspects of React development. You will learn to create components for listing announcements, handle state and add filters, fetch data from APIs, create detail pages for announcements, add favorite objects, and secure the application with a login form.

Building by Steps

We will start small - setting up the application and creating the first components, gradually adding more features.

In the process, you will learn to write clean code, efficiently structure application architecture, apply design patterns, and ensure scalability for a large number of users and developers.

The goal is to give you confidence in working on projects of this scale. As mentioned earlier, AI can generate code in seconds, but not everyone knows how to properly assemble it into a complex and thoughtful system.

Project React will teach you how to do that and why it’s important.

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online Project React. Build a complex React project as a total beginner

0:00
/
#1: Welcome to Project React

All Course Lessons (116)

#Lesson TitleDurationAccess
1
Welcome to Project React Demo
08:00
2
Project Overview
04:39
3
Dependencies
02:31
4
Linting and Formatting
02:49
5
API Overview
02:46
6
UI Components
01:42
7
Environment Variables
02:32
8
Running the Project
01:46
9
Working with the Project
03:50
10
Implementing Module 0
17:17
11
Introduction to React
02:41
12
Why Use React?
02:39
13
JSX Overview
05:28
14
JSX Iteration and Conditional Rendering
04:30
15
Components
04:20
16
Component Props
02:07
17
Component Lifecycle
03:00
18
Introduction to Hooks
03:54
19
Styling and Tailwind
04:37
20
Implementing Module 1.1
08:46
21
Implementing Module 1.2
11:50
22
Implementing Module 1.3
08:15
23
Introduction to State
01:37
24
State in React
03:22
25
Event Handlers
03:12
26
Handling Click Events
02:27
27
Handling Change Events
04:06
28
Handling Form Submission Events
03:29
29
Event Handlers Best Practices
04:49
30
The useState Hook
11:57
31
Controlled and Uncontrolled Components
03:56
32
Implementing Module 2
09:41
33
Implementing Module 2
12:31
34
Implementing Module 2
11:30
35
Introduction to Effects
02:56
36
Effects in React
03:55
37
The useEffect Hook
13:26
38
The useRef Hook
06:46
39
Introduction to Data Fetching
04:20
40
Data Fetching in React (part 1)
05:49
41
Data Fetching in React (part 2)
06:29
42
Data Fetching in React (part 3)
11:44
43
Data Fetching Best Practices
03:14
44
Implementing Module 3
14:17
45
Implementing Module 3
12:00
46
Implementing Module 3
13:48
47
Implementing Module 3
12:04
48
Implementing Module 3
04:57
49
Introduction to Navigation
03:33
50
Client vs Server Side Routing
04:14
51
Routing in React
03:25
52
React Router (part 1)
10:35
53
React Router (part 2)
06:35
54
React Router (part 3)
09:51
55
Routing Best Practices
03:47
56
Implementing Module 4
12:32
57
Implementing Module 4
13:25
58
Implementing Module 4
13:00
59
Implementing Module 4
14:08
60
Introduction to Performance
04:02
61
Performance in React
03:22
62
The useMemo Hook
11:50
63
The useCallback Hook
12:27
64
Custom Hooks in React
08:25
65
Custom Hooks Best Practices
03:03
66
Custom Components in React
03:56
67
Custom Component Best Practices
03:24
68
Implementing Module 5
11:35
69
Implementing Module 5
12:42
70
Implementing Module 5
12:41
71
Implementing Module 5
10:15
72
Introduction to State Management
02:29
73
State Management in React
02:56
74
Prop Drilling
05:22
75
The useContext Hook
13:27
76
Redux (part 1)
13:14
77
Redux (part 2)
12:34
78
Redux (part 3)
11:05
79
Redux Custom Components
05:03
80
Redux Best Practices
04:29
81
Implementing Module 6
11:03
82
Implementing Module 6
14:11
83
Implementing Module 6
12:53
84
Implementing Module 6
12:25
85
Implementing Module 6
11:10
86
Introduction to Forms
04:48
87
Forms in React
03:31
88
React Hook Form (part 1)
07:28
89
React Hook Form (part 2)
15:41
90
React Hook Form (part 3)
05:25
91
Form Best Practices
02:44
92
Introduction to Authentication
03:46
93
Authentication in React
05:18
94
Authentication Best Practices
02:10
95
Implementing Module 7
12:31
96
Implementing Module 7
12:23
97
Implementing Module 7
12:39
98
Implementing Module 7
12:12
99
Implementing Module 7
15:12
100
Deploying to Vercel
12:36
101
Introduction
06:21
102
Improving Forms and Inputs
20:25
103
Implementing React Query
19:20
104
Implementing React Query
19:07
105
Implementing Users and Profiles
17:41
106
Implementing Users and Profiles
19:10
107
Implementing Listing Creation
16:15
108
Implementing Listing Creation
15:41
109
Implementing Listing Creation
12:53
110
Implementing Reviews
15:21
111
Implementing Reviews
13:38
112
Testing With Cypress
15:22
113
Testing With Cypress
17:41
114
Testing With Cypress
16:39
115
Note on React 19
09:21
116
Conclusion
04:17

Unlock unlimited learning

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

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Master Spring Boot 3 & Spring Framework 6 with Java

Master Spring Boot 3 & Spring Framework 6 with Java

Sources: 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 Spring Boot Framewo...
37 hours 34 minutes 14 seconds
Build fancy landing pages with React and Threejs

Build fancy landing pages with React and Threejs

Sources: Paul Henschel (@0xca0a)
This course teaches you how to add stunning flourishes to your sites with little code and complexity. You would think that some of the extraordinary websites on awwwards, fwa or...
38 minutes 9 seconds
Stripe Payments JavaScript Course

Stripe Payments JavaScript Course

Sources: fireship.io
The Stripe Payments JavaScript Course is a project-based guide to building fullstack payment solutions on the web with Node.js and React. The goal is to provide a solid foundati...
1 hour 29 minutes 26 seconds
React & TypeScript - The Practical Guide

React & TypeScript - The Practical Guide

Sources: Academind Pro
TypeScript is an amazing technology that helps developers write better code with less errors - simply because it let's you catch & fix type-related errors whilst writing the cod...
7 hours 22 minutes 54 seconds
React Supabase Full Course

React Supabase Full Course

Sources: fireship.io
Build and deploy a full-stack, production-ready web app with Supabase, React, and Postgres. The Supabase Course is a project-based course that builds a Reddit-inspired web app f...
1 hour 39 minutes 49 seconds