Project React. Build a complex React project as a total beginner
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.
More
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 Project React. Build a complex React project as a total beginner
# | Title | Duration |
---|---|---|
1 | Welcome to Project React | 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 | 11:30 |
33 | Introduction to Effects | 02:56 |
34 | Effects in React | 03:55 |
35 | The useEffect Hook | 13:26 |
36 | The useRef Hook | 06:46 |
37 | Introduction to Data Fetching | 04:20 |
38 | Data Fetching in React (part 1) | 05:49 |
39 | Data Fetching in React (part 2) | 06:29 |
40 | Data Fetching in React (part 3) | 11:44 |
41 | Data Fetching Best Practices | 03:14 |
42 | Implementing Module 3 | 12:00 |
43 | Introduction to Navigation | 03:33 |
44 | Client vs Server Side Routing | 04:14 |
45 | Routing in React | 03:25 |
46 | React Router (part 1) | 10:35 |
47 | React Router (part 2) | 06:35 |
48 | React Router (part 3) | 09:51 |
49 | Routing Best Practices | 03:47 |
50 | Implementing Module 4 | 12:32 |
51 | Introduction to Performance | 04:02 |
52 | Performance in React | 03:22 |
53 | The useMemo Hook | 11:50 |
54 | The useCallback Hook | 12:27 |
55 | Custom Hooks in React | 08:25 |
56 | Custom Hooks Best Practices | 03:03 |
57 | Custom Components in React | 03:56 |
58 | Custom Component Best Practices | 03:24 |
59 | Implementing Module 5 | 12:41 |
60 | Introduction to State Management | 02:29 |
61 | State Management in React | 02:56 |
62 | Prop Drilling | 05:22 |
63 | The useContext Hook | 13:27 |
64 | Redux (part 1) | 13:14 |
65 | Redux (part 2) | 12:34 |
66 | Redux (part 3) | 11:05 |
67 | Redux Custom Components | 05:03 |
68 | Redux Best Practices | 04:29 |
69 | Implementing Module 6 | 11:03 |
70 | Introduction to Forms | 04:48 |
71 | Forms in React | 03:31 |
72 | React Hook Form (part 1) | 07:28 |
73 | React Hook Form (part 2) | 15:41 |
74 | React Hook Form (part 3) | 05:25 |
75 | Form Best Practices | 02:44 |
76 | Introduction to Authentication | 03:46 |
77 | Authentication in React | 05:18 |
78 | Authentication Best Practices | 02:10 |
79 | Implementing Module 7 | 12:31 |
80 | Deploying to Vercel | 12:36 |