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

Discover the true identity of JSX by seeing how Babel converts JSX into React.createElement, with a focus on props, type, key, and the resulting virtual node.

Learn to render a dynamic list from an array with stable, unique keys. Convert items to objects with an id, and apply alternating colors using index parity.

Convert a single record into a list by iterating with a for-in loop, rendering each property name and value in li items with alternating colors and skipping id.

Pin a record by converting its boolean to a string, build a pinned array with forEach and unshift, and lift the pinned item to the top, displaying a pin icon.

Explore how closure preserves data for future use by tying a fetch to Numbers API with an abort controller and a 200 millisecond timeout, via setup and cleanup in useEffect.

Learn how to use the useState hook in React by creating a learn-hooks component, declaring a state value and setter, and wiring an event handler to trigger a re-render.

Explore how closure and function scope govern component state, including the initial scope, a delayed event handler, and how stale state can persist and cause memory leaks.

Use the useMemo hook to memorize the parity of count across renders, reusing the value until count changes. Specify a dependency array to re-evaluate the memoized parity whenever count updates.

Explores building an interactive multi-menu UI with JSX, map over data, for-in content, open/close controls, and state strategies (useState and useImmer) to improve rendering via child components.

Apply fundamentals by building a reusable React button component with identical syntax to the native button, supporting children, onClick, types (default, success, error), disabled, and long width.

Master suspense and lazy loading by conditionally rendering a child component with a boolean state, using React lazy and suspense to load on demand.

Create independent menu components with their own state to prevent rerendering. Render menus with map and pass title and content as props, starting with the first menu open.

Discover how start transition defers state updates to render non-blocking transitions, enabling interruption and cancellation while ensuring restarts use the latest values to prevent race conditions.

Explore useReducer by consolidating state updates in a reducer, triggered with dispatch and an action object; learn the reducer function, updater function pattern, and cases like increment, decrement, reset, rotate.

Build a to-do list with add, edit, and delete using a dedicated item component and local edit mode, preparing to switch to a reducer in the next lesson.

Discover how the useEffect hook automatically runs a setup function, re-executed when count changes via the dependency array, and cleans up with a closure-based cleanup function.

Use useEffect to retrieve remote data with axios from a dummy JSON API, replace fetch with the axios get method, then setTodo with the response and manage id driven loading.

Learn to implement a fade-out exit animation for list items by wiring a delete button, delaying removal with a timeout, and refactoring with a custom hook.

Install and configure the iview UI library via npm in main.js, importing iview and iview.css. Create three pages—introduction, spec, history—that share a gallery component and adjust router and navbar.

Create and connect the gallery, introduction, history, and spec pages, display brand and model from store state via the eye view card, and iterate the spec with v-for and keys.

Create and integrate header, main, and footer components into the layout, resolve reserved name conflicts by capitalization, and add a navigation bar with links and hover styles.

Create a gallery component in a Nuxt.js page by moving images to assets, displaying brand and model with an image tag, and set 15px left and right padding in Mainview.

Learn to implement nested routes in Nuxt.js by converting the index into a parent page, sharing the upper layout, and creating three child pages for spec, history, and introduction.

Create a home page listing all cars with links to each introduction page via the car index, and implement a shared parent validate method to verify id values.