Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

The Complete Course: React, Vue, Nuxt.js, MongoDB, more!

Name: The Complete Course: React, Vue, Nuxt.js, MongoDB, more!
Rating: 4.7 (846 reviews)

Master React, Vue 3, Nuxt, MongoDB, Closure, Recursion, Sorting Algorithms, Data Structure, Vite, Tailwind, and More!

Created byOnlyKiosk Tech

Last updated 6/2026

English

What you'll learn

Understand closure and its value for good!
Understand recursion for good and be able to use it in real-life situations!
Make your JavaScript knowledge foundation air-tight!
Become smarter by training your brain using sorting algorithms
Master React 19, Vue 3, Nuxt, MongoDB, and sorting algorithms

Course content

30 sections • 743 lectures • 52h 49m total length

The React Strategy Explained in 2 Minutes2:04
The File Hierarchy of React and Its Updating Strategy12:04
Creating Your First React Component7:01
Event Handler, State Setter, and Every "Edgy" Situation9:35
"Fool React": Creating an Error Undetectable to React6:02
JSX: Controlling Page Elements Like We Never Could Before5:54
Creating a List from an Array and an Object7:51
Always More Complicated: Creating a List that's used in Real-life Projects7:17
The Golden Rule: To Display Something New, Set a New State!6:24
Extra Practice: Pin an Item to the Top5:41
Extra Practice: Change the List Item Order7:45
Challenge: Create a Complicated Menu List9:19
"Algorithm" for React: Creating a Clock5:29
Challenge: Stopwatch9:34
Extra Challenge: Stopwatch + List7:25
Extra Challenge: Countdown Part 15:23
Extra Challenge: Countdown Part 24:29
Extra Challenge: Countdown Part 3 (Closure)6:36
The dependency array, useMemo, and useCallback5:30
useEffect5:07
useEffect Application7:27
The clean-up function5:49
Component Props12:13
momo, lazy, & Suspense14:02
Transition16:55
Context13:25
useReducer5:40
useReducer Application6:27
useReducer + Context5:47
Custom Hook5:13
Create a Fade-in Animation Using the Custom Hook Part 13:45
Create a Fade-in Animation Using the Custom Hook Part 23:25
Create a Fade-out Animation Using the Custom Hook3:43
Challenge: Create a Fade-in and Fade-out Animation Using One Custom Hook4:50
useAnimationFrame6:55
Rethink What the Component Function Can Offer3:48
Challenge: Fade-out and Fade-in Together5:31
Add Fade-out Animation to List Items7:21
Make Some Improvements4:49
"Reverse" the Canceled Fade-out Animation3:26
Delete Multiple Items Together1:52
Introduction to React Router1:24
React Router: Setup8:53
React Router: Nested, Layout, and Prefix Routes5:30
React Router: NavLink6:01
React Router: SearchParams2:55
React Router: Mid-term Practice7:47
React Router: Loader5:29
React Router: Pending UI6:15
React Router: Action8:31
React Router: Action Misc3:17
React Router: useSubmit2:21
React Router: Fetcher6:01
React Router: Lazy Loading3:17

Create your first React project and meet the React FiberNode and the "#root" DIV4:59
Extra: React from the bird's eye view10:54
Extra: Fiber Node in detail7:34
Understand the file structure of React and meet JSX!3:52
The Rules of JSX4:23
Build true confidence by understanding the true identity of JSX7:29
The Smart Design of the Children Array and Its Life Saver--the Unique Key3:31
The "Edgy" situations where a unique key is needed!4:00
Understand why it's a bad idea to use array element index as the unique key4:23
Back to JSX!2:55
The simpler task: Converting a single object into a list3:07
The more complicated task: Create a list from the a non-SQL query result4:24
Challenge: lift the pinned item to the top of the list2:46
Improve the Program from the Last Lesson7:16
Pure Function: No Side Effects & Same Input, Same Output2:48
Introduction to Closure3:47
The value and application of closure: preserving data for future use6:01
The most important hook: useState8:04
The "batching" strategy and a preview of "transition"3:30
The updater function of state setter and the initializer function of useState2:58
Closure: the state variable, the event handler, the "stale" state, memory leak4:23
The "Prep" Area--React is a Funnel!3:46
useMemo: save data for the next render3:59
"FOOL" React--The Importance of Order!6:01
The new state must be completely new--deep copy only!4:56
Immer and useImmer2:40
Mid-term Practice: JSX, state, useMemo, immer, etc.8:47
Back to the pin program3:23
Big project9:35
Child component3:54
Props4:20
Lift state up4:47
Real-life application: create a custom button6:41
memo: reuse the component rendering6:04
The problem caused by closure and the strict rule of the dependency array2:54
Suspense and lazy loading4:28
Back to the menu list7:37
What is transition and why is it needed?6:21
startTransition6:29
useTransition9:38
Reducer8:16
Reducer application: ToDo List Part 16:34
Reducer application: ToDo List Part 27:27
useEffect5:12
The safety issue of useEffect1:55
Retrieve remote data6:45
Deal with the problem of race consition/hazard5:36
Custom hook5:44
Create a fade-in animation6:20
Create a fade-in animation using the custom hook2:24
Create a fade-out animation4:47
Create the fade-in and fade-out animations using the custom hooks5:42
Challenge: Limit the Speed of an Infinite Loop to One Re-execution per Second6:12

Set up a Vue app using Vue-CLI 33:44
In this lesson, we will show you how to use Vue CLI 3.
Project root directory analysis4:48
In this lesson, we will analyze the file structure of the Vue app created by Vue CLI 3.
App design0:52
Analysis of the APP we are about to create.
Create the App Part 12:49
Create the App Part 23:49
Project wrap-up4:18
Summary of the app we just created.
Get source code

Set up Nuxt8:49
In this lesson, we will show you how to set up a new Nuxt program. We will show you two options: starter template and the new Nuxt scaffolding tool.
You will also learn how to use the dev server, production server and output program as static files.
Project file structure analysis7:00
In this lesson, we will show you how nuxt generates its homepage. You will learn the working mechanism of nuxt. At the end of this lesson, we will do a comparison between nuxt and the vue program we created using vue cli 3. So if you skipped the Vue section, make sure you watch it before starting this lesson.
Layout1:39
In this lesson, we will show you how to create a universal header and footer. Every page will automatically inherit them. Watch this lesson to find out how.
Custom error page5:33
Nuxt offers us a default error page. In this lesson, we will show you how to create our own error page.
There will be a conflict between the default layout file and the error layout file. Watch this lesson to find out how to solve this problem.
Mini practice: custom page layout1:12
In this lesson, we will create a custom layout for our normal pages by applying what we have learned in the previous lessons.

Universal CSS and CDN4:44
In this lesson, we will show you how to create and register universal CSS.
We will use fontawesome as the icon library. But we want to install fontawesome via CDN. Watch this lesson to find out how.
Assets VS. static3:59
In this lesson, we will show you the difference between static and assets.
UI Module: bootstrap-vue5:08
In this lesson, we will show you how to install a UI library. We will use bootstrap as example. We will show you two installation methods.
Vue Meta in Nuxt1:50
At this moment, our Nuxt program has three pages: the homepage, the resource page and the UI page.
All these three pages have the same title. This is because they all inherit the same head setting from the nuxt config file.
In this lesson, we will show you how to set custom head info for each page.
VueX in Nuxt Part 14:04
In this lesson, we will show you how to use VueX in Nuxt.
VueX in Nuxt Part 22:00
In this lesson, we will show you how to set mutation methods and reset state properties.

Nuxt Router Introduction1:33
Starting from this lesson, we will show you how to use Nuxt router.
Nested route3:29
Nested route enables us to create one page using two page files. Watch this lesson to find out how.
nuxt-link2:27
In this lesson, we will show you how to set and style the nuxt-link tag.
active-link4:45
In this lesson, we will show you how to keep the active nuxt-link tag highlighted.
Create transition effects and animate.css4:31
In this lesson, we will show you how to create a transition effect when switching pages. We will also show you how to use animate.css.
Dynamic route Part 13:04
In this lesson, we will show you how to create dynamic routes and pass data using params.
Dynamic route Part 25:10
In this lesson, we will still show you how to create dynamic routes. But this time, we will do it using directories.
Dynamic nested route2:18
In our previous lessons, we have learned nested routes and dynamic routes. In this lesson, we will combine them together and learn how to use dynamic nested routes.
Validate4:37
Data passed via URL can be reset by anybody. Therefore, it is very important we check them before use. The validate method is what Nuxt offers us to check data passed by URL.

Introduction to Context1:03
Starting from this lesson, we will enter a new era of our nuxt study: the CONTEXT era. You can think of context as the nuxt equivalency of Vue this, only more powerful.
Context gives us access to every corner of the Nuxt program, including Nuxt router, VueX, Nuxt modules, etc.
How to create and register middlewares5:03
In this lesson, we will show you how to create and register middlewares. You will also learn a few quirks and features of middlewares.
Middleware and Nuxt router3:23
In this lesson, we will show you how to operate Nuxt router using context in middleware.
Middleware and VueX2:26
In this lesson, we will show you how to operate VueX using context in middleware.

Requirements

Basic VueJS knowledge is needed.

Description

Note: We have added EXTRA React, Vue 3, and MongoDB courses.

As an enhanced version of Vue, Nuxt has more functionalities and is also easier to configure. With Nuxt, you can code less but do more.

You don’t have to be a Vue expert to study Nuxt. Just basic Vue knowledge is enough.

In the first section, we will create a Vue app using Vue CLI 3.

The file structure created by Vue CLI 3 is very similar to the one used in Nuxt. They even have the same mechanism of generating pages.

We will recreate the same app using Nuxt and show you the similarities between Vue and Nuxt.

Your previous Vue knowledge can help you quickly understand the working mechanism of Nuxt. Once you have understood how Nuxt works, you can master it in no time.

Our official Nuxt study includes five sections.

1. Nuxt basics

2. Nuxt plugins and modules

3. Nuxt routing system

4. Nuxt context

5. Data exchange with the backend program (Express.js)

At the end of each section, there will be an infographic article to help you review everything you just learned.

Each review is followed by a practice session where you will practice and apply everything you have learned by creating a real app. You will also learn many new skills in this process, including how to handle cookies and create a membership system.

Who this course is for:

Developers who want to build a stronger knowledge foundation.
Developers who want to take their JavaScript skills to the next level
Developers who want to learn React
Developers who want to master Vue 3
Vue developers who want to master Nuxt
Developers who want to master MongoDB

The Complete Course: React, Vue, Nuxt.js, MongoDB, more!

What you'll learn

Explore related topics

Course content

React.js54 lectures • 5hr 47min

The New React Course53 lectures • 4hr 42min

Create a Vue App using Vue-CLI 37 lectures • 20min

Nuxt fundamentals5 lectures • 24min

Nuxt fundamentals: review and practice5 lectures • 16min

Nuxt plugins6 lectures • 22min

Nuxt plugins: review and practice5 lectures • 14min

Nuxt routing system9 lectures • 32min

Nuxt routing system: review and practice5 lectures • 20min

Context and middleware4 lectures • 12min

Requirements

Description

Who this course is for: