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

Learn the essential react rule: to display something new, set a new state, triggering a re-render that creates new content with jsx and state-driven choices, including conditional rendering between images.

Explore building a React component with JSX, importing React, using hooks like useState, and mastering JSX rules, root elements, fragments, and curly brace expressions.

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.

Discover the smart design of the children array and how React differentiates identical elements in the render tree, using createElement, and why the key property becomes essential for unique identification.

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.

Move back to JSX to render a list from the challenge array using map, with item.content and item.id as key, and apply a style prop for alternating colors.

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.

Learn to convert an array of objects into a list of lists using map for per-record sublists, assign unique keys, and apply alternating colors while omitting the id property.

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.

Improve the program from the last lesson by replacing map with forEach, lifting the pinned item to the top, removing the pinned property, and using useState for state.

Explain pure functions in React as having no side effects and same output for identical inputs, and show why external mutations violate purity while props and useState drive behavior.

Explore closure in JavaScript by creating an app function with a local num and a child function. Learn how delaying execution with setTimeout or setInterval preserves the function scope.

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.

Learn how React batches multiple state updates to avoid extra re-renders, triggering a single re-render after an event handler completes and previewing the useTransition hook for lower-priority updates.

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.

Hoist the event handler above the template and remove setTimeout to verify triggering works. The prep area derives new values from current state and computes parity, avoiding state changes there.

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.

Learn how React differentiates useState hooks by order and why declaring hooks at the top level matters. Avoid conditional hooks to prevent swapped state values.

Teach how to implement a one-at-a-time pin feature using useImmer, converting the challenge array to state, adding pin and unpin controls, and triggering re-renders.

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.

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.

Explore how to build and render a dynamic list of ten child components, control rendering with a boolean state, and observe React's render order to understand why transitions are needed.

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.

Explore a reducer-based to-do list: manage state with a reducer, handle add, delete, and edit actions, enforce input validation, and update items by id via dispatch.

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.

Master the safety of useEffect by avoiding infinite loops: never reset a state in the setup function if it’s in the dependency array, and vice versa.

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.

Study how race conditions occur when rapid requests collide and prevent them by canceling ongoing requests with an abort controller and a cleanup function, illustrating closure preservation.

Learn to build and reuse a custom hook that manages first and last name state, exposes handlers, and returns values for spreading into components for reusable, scalable form logic.

Create a list app that adds items via input and a button, then animates new items with a fade-in entry using an offset class and useEffect, while exploring useLayoutEffect.

Recreate a fade-in animation with a custom hook that manages list state and a reset effect, returning the list and its setter.

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.

Learn to build a dynamic list with entry and exit animations via a custom hook use list, managing add and delete with state and effects.

Build a clock that updates every second by storing the current time in state. Use setTimeout to create a one-second gap and encapsulate the logic in a useClock 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.

Practice using vuex by creating a store file index.js with a state function, then define getters to capitalize the brand and access them in the gallery component.

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.