The complete React Fullstack course ( 2021 edition )

Name: The complete React Fullstack course ( 2021 edition )
Availability: InStock

76h 58m 6s

English

Free

April 1, 2024

Updated September 2026

The complete React Fullstack course ( 2021 edition ) is a 443-lesson 76 hours 58 minutes self-paced course by Udemy. The Complete React Fullstack Course starts from a genuine zero – no prior React knowledge assumed – and walks you up to a working application that talks to its own server and database.

Course facts

Lessons: 443
Duration: 76 hours 58 minutes
Level: All levels
Language: English
Updated: 2026-09-11
Instructor: Udemy
Price: Free

The Complete React Fullstack Course starts from a genuine zero – no prior React knowledge assumed – and walks you up to a working application that talks to its own server and database. Difficulty rises gradually, module by module, so each new idea has time to settle before the next one arrives.

Learning by doing

Every major topic is paired with a small project so you practice the idea immediately instead of just watching it explained. Once you're comfortable with core React, the course shifts into server-side territory: building an API, connecting a database, and wiring the two together.

What's covered

React fundamentals and component logic, built up from the basics
Modern JavaScript (ES6), with a bonus refresher section included
State management with Redux across a real app
MongoDB and Mongoose for data storage
Authentication, protected routes, password hashing, and JSON Web Tokens
Deploying the finished app

The course is free and spans 443 lessons, closing out with a second practice project so you leave with more than one working build behind you.

Since I believe that the best way to fully learn is by coding, after each important section we will put everything in practice with some course projects, and after you have a strong base of React we will journey into Servers and Databases, Redux and deploying apps to production.

We will use ES6, the latest version of javascript.

Don’t know ES6 ?

Don’t sweat it, there is a full bonus section where we will show you all the ES6 magic.

To sum everything up, you will learn in this course:

The very basics of React. How to install and the logic behind it.
Once you know the basics of React we will journey into the confusing stuff.
After you have a strong base of React we will create a full practice project.
Everybody is using Redux, so we will learn how to use redux with our React Apps.
Since our app will need a database, you will learn how to use MongoDB and mongoose.
Apply security, authentication, restricting routes, hashing passwords and JWT’s.
We will create a second practice project using React, Redux, Node Server and MongoDB.
Of course, we will learn the whole process of publishing you app using Heroku, Git and Github.
Webpack is part of the fullstack, so we will discuss the basics of Webpack .
You also get a Full ES6 course

What about the instructor experience ?

Well I've been around for 10 years now, built lots of applications for small projects and big companies like Citi,Fox, Disney and a lot more.

Today I work as developer for a major company developing applications in React or Angular mostly, but I like to teach in my spare time.

How about the target audience?

This course is for almost everyone, a little bit of Javascript is required.We will use ES6 but you can learn as we go.
If you want to take your coding to the next level, this is the course for you.

Requirements:

Knowing a little bit of HTML, CSS and Javascript, everything else you will learn it as we go.

Who this course is for:

From beginners in javascript to intermediate.

What you'll learn:

You will learn the whole React WebApp building process, from your pc to the server.
Work with nosql databases ( Firebase, MongoDB and Moongoose)
How to deploy applications to services like Firebase and Heroku.
Learn how Redux work and apply it on a real life application.
Learn what NODE js is and How it works and create your own server,
Learn the b

Who teaches The complete React Fullstack course ( 2021 edition )? Udemy

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in The complete React Fullstack course ( 2021 edition )?

0:00 0:00

#	Lesson Title	Duration
1	Intro	01:30
2	Installing Node JS	01:45
3	IDE	01:39
4	The boilerplate	05:17
5	The bundle	04:45
6	From the ground up	09:53
7	Behind the scenes	08:38
8	Project structure	12:42
9	Types of components	05:39
10	Adding some style	14:18
11	Events	11:53
12	State	16:36
13	Props part one	14:23
14	Props part two	09:44
15	Props part three	07:29
16	React children	03:59
17	More on styling	07:02
18	Filtering the news	12:53
19	Lifecycles	14:45
20	Lifecycles part 2	19:03
21	React hooks intro	04:30
22	UseState hook	13:34
23	UseState hook part 2	16:05
24	UseEffect	13:05
25	UseCallback	26:13
26	UseRef	13:43
27	Context API part one	18:28
28	Context API part two	11:48
29	Installation	05:03
30	The context and css	15:30
31	Ref and validation	14:29
32	Adding players to the list	07:06
33	Showing the list of players	07:54
34	Next and Toastify	13:36
35	Getting the looser	11:28
36	Introduction	05:22
37	The route process	03:03
38	The main route file	04:19
39	Setting up routes	05:44
40	Linking	08:53
41	A better layout	05:31
42	Params	05:48
43	More on react router	06:00
44	React router switch	05:19
45	Redirections	07:40
46	Handling 404	04:32
47	Introduction	08:11
48	Pure components	14:12
49	Adjacent elements	07:07
50	HOC part 1	11:11
51	HOC part 2	11:52
52	Transitions	14:05
53	Transitions part 2	11:53
54	CSS transitions	08:20
55	Transitions group	13:27
56	Honorable mentions	06:23
57	Introduction	03:31
58	Connecting	10:21
59	Action creators and reducers	05:10
60	Combine reducers	05:58
61	Creating a valid reducer	10:59
62	Redux devtools	07:17
63	Dispatching actions	11:53
64	Map state to props	06:36
65	Redux hooks	13:03
66	Types	06:14
67	Making requests	09:27
68	Installation and router	12:53
69	Setting up Redux	11:28
70	Header and main layout	09:07
71	Api Server with json server	07:19
72	Fetching home posts	18:24
73	Fetching home posts part 2	19:14
74	Home masonry	12:47
75	Creating the add newsletter	21:15
76	Finishing newsletter	19:04
77	Newsletter fix and creating post page	18:40
78	Post cleanup and 404	12:34
79	Formik - Starting	12:34
80	Formik - Validating	13:40
81	Formik - Using Yup	06:15
82	Formik - Hooks	06:55
83	Formik - Custom components	13:57
84	Formik - Custom fields	13:37
85	Custom - Creating the state and input	15:30
86	Custom - Updating formdata	15:48
87	Custom - Validations	13:41
88	Custom - Submit form	14:45
89	Custom - Select and textarea	17:05
90	Adding a contact form to daily news	14:25
91	Daily news, storing the message.	11:48
92	The userReducer	24:41
93	What node is	04:54
94	Using the REPL	05:14
95	Blocking and non-blocking	07:45
96	Threads,Event Loop, Call stack and task queue	13:02
97	Final thoughts	06:16
98	Creating a node server	09:16
99	Sending responses	11:09
100	Creating routes	07:10
101	Express - creating server	12:11
102	Express - Params and querystrings	07:08
103	Express - Middleware part one	05:29
104	Express - Middleware part two	06:44
105	Express - Body parser	17:36
106	Express and React	20:06
107	Introduction	03:05
108	Creating a cluster	08:16
109	Connecting	08:13
110	Adding data to the DB	14:17
111	Creating a model and schema	10:57
112	Mongoose POST	14:31
113	Mongoose GET	09:47
114	Mongoose REMOVE	10:29
115	Mongoose UPDATE	16:00
116	Using postman	07:02
117	Creating a project	15:27
118	Register a user (no-hash)	09:25
119	Hashing passwords	17:51
120	Sign in users	19:34
121	JWT part one	09:17
122	JWT part two	12:31
123	JWT part three	16:35
124	Auth middleware	09:40
125	Deploying part one	14:20
126	Deploying part two	17:29
127	SERVER: Installations	11:01
128	SERVER: Init server and connecting to DB	15:40
129	SERVER: Creating the user model	19:03
130	SERVER: Creating the routes file	08:45
131	SERVER: Hashing and checking email	16:07
132	SERVER: Register user	13:13
133	SERVER: Sign in user	11:59
134	SERVER: Validating tokens	19:59
135	SERVER: Creating roles	14:09
136	SERVER: Testing roles	15:50
137	SERVER: Updating profile	14:56
138	SERVER: Updating email	14:53
139	SERVER: Articles model	15:40
140	SERVER: Posting article	15:30
141	SERVER: Patch, delete, get article by ID	17:39
142	SERVER: Find by ID	05:47
143	SERVER: Load more	17:53
144	SERVER: Pagination route	25:00
145	Starting with REACT	13:01
146	Creating a store	12:35
147	Header and sidedrawer	17:32
148	Finishing sidedrawer	10:57
149	Creating the home cars	22:00
150	Getting articles from loadmore part one	22:43
151	Getting articles from loadmore part two	12:45
152	Showing notifications part one	18:33
153	Showing notifications part two	07:55
154	Creating the login-register form	21:28
155	Register users	19:42
156	Sign in users	07:10
157	Auto sign in users	19:30
158	Creating a loader	02:38
159	Logout users	09:30
160	Admin layout	11:25
161	Changing layouts	20:03
162	Routes guard	20:34
163	Guarding nav links	15:18
164	Hotfix for the sign in and sign out	05:46
165	Creating the article section	17:22
166	Showing article data	14:07
167	Clearing articles	06:29
168	Add article part one	17:07
169	Add article part two	17:44
170	Using field array with actors	17:25
171	Creating the WYSIWYG editor	19:49
172	Finishing WYSIWYG	12:36
173	Posting article	17:47
174	Amin pagination part one	16:12
175	Amin pagination part two	16:33
176	Amin pagination part three	05:46
177	Changing article status	22:23
178	Removing articles part one	12:41
179	Removing articles part two	14:41
180	Editing articles part one	18:29
181	Editing articles part two	11:32
182	Email stepper part one	19:52
183	Email stepper part two	19:38
184	Email stepper part three	13:49
185	Updating user profile	17:52
186	Deploying	17:04
187	Contact form	20:07
188	Dispatching contact	17:05
189	Creating the email service	16:23
190	Testing the email service	04:47
191	Verifying users trough email	16:57
192	Verify, creating the front end	19:52
193	Finish verify account	11:12
194	Creating categories - server	12:21
195	Creating the categories layout	17:07
196	Categories to Redux	20:50
197	Fixing the add article category	16:00
198	Fixing the edit articles category	03:45
199	Creating client search - server	14:04
200	Creating client search - client part 1	19:50
201	Creating client search - client part 2	10:41
202	Creating the admin search - server	06:29
203	Creating the admin search - client part 1	18:54
204	Creating the admin search - client part 2	08:45
205	Uploading files to the server - part 1	17:41
206	Uploading files to the server - part 2	18:37
207	Uploading files to a service	20:35
208	Intro	01:19
209	Installing Node JS	01:53
210	IDE	01:49
211	Using a boilerplate	06:56
212	The bundle	07:55
213	Creating a simple app	06:54
214	Using JSX	07:01
215	Structuring	15:50
216	Using classes	06:41
217	A little bit of styles	10:58
218	Events	10:57
219	Component state	13:30
220	Working with props	13:45
221	Working with props 2	13:16
222	Props, from class to class	05:51
223	Childrens	03:13
224	More on styling	07:41
225	Using third party libraries	12:18
226	Filter the news	19:11
227	React Lifecycles	15:34
228	React Lifecycles 2	18:48
229	React hooks	03:34
230	Conclusion	02:35
231	Use state	08:17
232	Use state 2	07:01
233	Use state 3	16:01
234	Use effect	05:06
235	Introduction	03:48
236	Router process	11:16
237	Setting up routes	09:36
238	Linking	04:04
239	Make it a little bit better	05:43
240	Params	04:33
241	Memory, hash and navlink	03:25
242	Switch	05:59
243	Redirections	04:12
244	Intro and installation	06:29
245	Routes and json server	12:24
246	Finishing home	16:22
247	Creating the artists page	13:43
248	Getting albums	05:44
249	Conditional rendering	12:14
250	Pure components	08:25
251	Adjacent elements	06:26
252	Hight order components 1	08:33
253	Hight order components 2	12:18
254	Animations	13:56
255	Transitions with classes	09:46
256	CSS transitions	08:55
257	TGroup - the template	05:23
258	Animating with TGroup	11:00
259	Typechecking	14:47
260	Typechecking 2	10:19
261	Controlled vs uncontrolled	08:33
262	Intro and install	10:48
263	Creating header and footer	11:10
264	Creating the slider	16:03
265	Creating the Home subscription	14:48
266	Finishing the Home Subs	09:15
267	Adding home posts/ blocks	18:15
268	Home Poll	12:21
269	Finishing Home Poll	11:18
270	Creating the article post	11:09
271	Creating the teams component	20:35
272	Adding the modal	15:54
273	Finishing the modal	04:58
274	Introduction	03:08
275	Creating a store	11:03
276	Action creators and reducers	05:53
277	Creating reducers	15:14
278	Connecting	12:44
279	Dispatching an action	05:52
280	Making a better code	06:14
281	Using types	06:16
282	Working with promises	11:05
283	Redux and functional component	07:54
284	Redux and Hooks	11:35
285	Introduction	01:09
286	Creating a state for your forms	09:48
287	Templating form elements	14:10
288	Adding events to form elements	13:00
289	Creating a validation function	09:11
290	Displaying error messages	08:31
291	Remaining form elements	14:33
292	Posting data	15:58
293	Starting with formik	10:05
294	Validating with formik	15:29
295	Submitting with formik	07:06
296	Formik and yup	09:18
297	Intro	04:54
298	REPL my terminal	05:37
299	Using node on a project	05:21
300	Write in node	05:37
301	Exporting in node	07:53
302	Blocking and non blocking	11:22
303	Threads, events loop and call stack	04:30
304	Threads, events loop and call stack 2	06:30
305	Threads, events loop and call stack 3	07:54
306	Right to the bone	04:06
307	Intro	03:42
308	Simple server	09:14
309	Sending an HTML response	04:16
310	Sending a JSON response	07:08
311	Routing	06:18
312	Express intro	13:15
313	Express params and query string	04:58
314	Express middleware	04:55
315	Express middleware 2	05:48
316	Express posting data	18:29
317	Node server and react	12:42
318	Node server and react 2	08:16
319	Intro	04:13
320	Installing mongo and mongo driver	12:49
321	Using the mongo driver	16:11
322	Using the mongo driver 2	12:12
323	Mongoose , models and schemas	10:37
324	Mongoose posting	11:34
325	Mongoose getting	08:36
326	Mongoose remove	08:08
327	Mongoose updating	14:39
328	Using postman	06:39
329	Creating a server	15:26
330	Adding users	09:30
331	Using bcrypt	07:23
332	Hashing passwords	10:41
333	Hashing passwords 2	07:43
334	Hashing passwords 3	10:08
335	What is a JWT	12:22
336	Generating a token	11:24
337	Validating tokens	16:29
338	Auth middleware	07:09
339	Log out users	06:54
340	Creating a Heroku project	08:00
341	Connecting mongo DB cloud	14:40
342	Finishing deploy	14:23
343	Introduction	06:54
344	Creating a server	15:25
345	User model	14:59
346	Hashing password	06:02
347	Login users	13:02
348	Validating tokens	10:33
349	Logout users	04:20
350	Books model	12:08
351	Posting a book	07:42
352	Get, patch and delete a book.	13:12
353	Getting all books	10:57
354	Setting up redux	15:34
355	Creating the header and the sidenav	15:15
356	Adding links to the sidenav	11:28
357	Creating the login	15:56
358	Dispatching a login action	11:15
359	Login in and catch errors	09:22
360	Auth HOC	17:23
361	Logout user	11:10
362	Sidenav options	10:47
363	Creating the add posts section	18:37
364	Validating fields	15:32
365	Posting the book	15:07
366	Finishing the add book post	08:46
367	Creating the edit book	18:44
368	Creating the edit book 2	15:59
369	Finishing the edit book	06:13
370	Admin posts section	17:20
371	Get home articles	08:09
372	Get home articles 2	13:07
373	Home loadmore	04:58
374	Article view	16:24
375	Deploying to heroku	11:07
376	Deploying to heroku 2	19:31
377	Introduction to ES6	02:40
378	CONST and LET	04:49
379	CONST and LET: Using scope	07:06
380	CONST and LET: Real life example	07:05
381	CONST and LET: Exercise one - solution	03:11
382	CONST and LET: Exercise two - solution	05:22
383	Template strings	05:52
384	Template strings 2	07:56
385	Template strings 3	04:29
386	Template strings 4	02:32
387	Template strings: Exercise one - solution	02:59
388	Template strings: Exercise two - solution	04:37
389	Foreach	06:48
390	Foreach 2	03:35
391	Foreach 3	04:09
392	Foreach: Exercise - solution	05:30
393	Map	06:03
394	Map 2	04:20
395	Map: Exercise one - solution	02:02
396	Map: Exercise two - solution	03:12
397	Filter	03:01
398	Filter 2	03:55
399	Filter: Exercise one - solution	01:50
400	Filter: Exercise two - solution	06:12
401	Find	03:38
402	Find 2	08:38
403	Every & some	06:06
404	Every & some 2	02:16
405	Reduce	05:41
406	Reduce 2	04:31
407	Reduce: Exercise one - solution	01:43
408	Reduce: Exercise two - solution	05:23
409	For....of	04:07
410	Fat arrow functions	04:42
411	Fat arrow functions 2	05:45
412	Fat arrow functions: Exercise solution	06:22
413	Object literals	03:41
414	Object literals 2	04:31
415	Object literals: Exercise - solution	02:32
416	Default function arguments	04:11
417	Default function arguments: Exercise - solution	01:13
418	Rest operator	04:24
419	Spread operator	03:13
420	Rest and Spread: Exercise two - solution	02:19
421	Classes	02:47
422	Classes 3	03:24
423	Classes 4	04:07
424	Destructuring	07:03
425	Destructuring 2	03:18
426	Destructuring 3	03:38
427	Destructuring 4	04:12
428	Promises and fetch	03:24
429	Promises and fetch 2	06:53
430	Promises and fetch 3	07:37
431	Promises and fetch 4	02:32
432	Strings and numbers	06:37
433	Strings and numbers 2	04:37
434	Modules	07:11
435	Modules 2	04:19
436	Modules 3	06:08
437	Generators	08:08
438	Generators 2	06:47
439	Generators 3	06:41
440	Generators 4	07:01
441	Generators 5	05:12
442	Iterating sets	03:59
443	Iterating map	06:03

What courses are similar to The complete React Fullstack course ( 2021 edition )?

Updated 2y ago
Build a Realtime App with React Hooks and GraphQL
By: Udemy
Master the latest and greatest features in React within the context of a full-stack, real-world app. A realtime, full-stack React app from scratch with a GraphQ
4h 32m
Updated 2y ago
Crack the Frontend Interview with React
By: Zero To Mastery
Enhance your React skills with a project-based course that prepares you for frontend engineering interviews. Build a star rating component while mastering
1h 6m5/5
Updated 2y ago
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide
By: Udemy
Building fullstack applications (i.e. frontend + backend) with the MERN stack is very popular - in this course.
18h 45m
Updated 3y ago
React Supabase Full Course
By: Fireship
Build and deploy a full-stack, production-ready web app with Supabase, React, and Postgres.
1h 39m5/5
Updated 3y ago
React - The full course
By: Fireship
React - The Full Course is unlike any other React course on the Internet. It provides a fast-paced introduction to essential concepts, then puts them.
1h 20m
Updated 2y ago
Next.js & React with ChatGPT - Development Guide (2023)
By: Udemy
Throughout the course, you will gain experience developing a Next JS application from the ground up. Additionally, you'll receive instruction on integrating Ope
7h 6m
FreeUpdated
Complete React Developer in 2025 (w/ Redux, Hooks, GraphQL)
By: Udemy, Zero To Mastery
Free, project-based React course: build a full e-commerce app while learning Redux, Hooks, GraphQL, Firebase, and Stripe.
39h 48m5/5

More courses by Udemy

Updated 3mo ago
React - The Complete Guide
React: The Complete Guide by Maximilian Schwarzmüller — original 2022 edition covering React hooks, Redux, Context API, Next.js basics.
47h 42m5/5
Updated 3y ago
Complete C# Unity Game Developer 3D
This is the long-awaited sequel to the Complete Unity Developer - one of the most popular e-learning courses on the internet!
30h 34m
Updated 3y ago
Nest.js Microservices: Build & Deploy a Scaleable Backend
Nest.js is an incredible backend framework that allows us to build scaleable Nodejs backends with very little complexity. A Microservice architecture is a popul
5h 39m5/5
Updated 3y ago
The HTML & CSS Bootcamp 2023 Edition
Brand new HTML & CSS course, just released in February 2023 Check out the promo video to see the beautiful, responsive projects we build in this course!
37h 18m5/5
Updated 3y ago
Microservices with Node JS and React
Event-Based Architecture? Covered! Server side rendering with React? Yep. Scalable, production-ready code? Its here!
54h 13m5/5
FreeClassic
100 Days of Code - The Complete Python Pro Bootcamp for 2023
Watch the 100 Days of Code Python Pro Bootcamp free: 100 daily projects covering Python basics, web scraping, data science, automation and GUI apps.
58h 35m5/5

Frequently asked questions

What are the prerequisites for enrolling in this course?

The course is designed for beginners, so there are no specific prerequisites. However, having a basic understanding of JavaScript and web development concepts can be helpful. The course starts with foundational topics like installing Node.js and setting up an IDE, which makes it accessible to those new to full-stack development.

What will I be able to build by the end of the course?

By the end of the course, you will be able to build a full-stack web application using React and Node.js. The lessons cover various aspects of React, including component types, state management, and React Router for navigation, allowing you to apply these skills in a practical project.

Who is the target audience for this course?

This course is ideal for individuals who are new to React and want to understand how it integrates with technologies like Node.js. It's also suitable for developers looking to expand their skills into full-stack development, with a focus on React-based applications.

How does this course compare in depth and scope to other React courses?

This course offers a comprehensive approach to learning React, covering 443 lessons. It starts with basic concepts and progresses to more advanced topics like React Hooks, Context API, and Redux. Compared to other courses, it provides a detailed exploration of both front-end and back-end development, making it suitable for learners aiming for a deep understanding of full-stack applications.

What specific tools and platforms are covered in the course?

The course covers a variety of tools and platforms essential for React development. You'll learn to use Node.js, set up an appropriate IDE, and work with React Router for navigation. The course also introduces Redux for state management and dives into CSS transitions and animations for enhancing user interfaces.

What topics are not covered in this course?

While the course covers a broad range of topics in React and Node.js, it does not delve into advanced backend frameworks or databases beyond the initial setup. It focuses on the React ecosystem and assumes a separate backend knowledge acquisition for more advanced server-side technologies.

How much time should I expect to commit to this course?

The course consists of 443 lessons and is designed to be self-paced. The total runtime is unspecified, but given the extensive content, it's recommended to dedicate several weeks to complete the course, especially if you plan to practice and fully grasp each concept and project.