React - The Complete Guide with React Hook Redux in 4hr

Understand var, let, and const in JavaScript, showing how let supports rebinding and scope, while const fixes the binding yet allows mutations to objects and arrays with age examples.

Explore how let behaves in switch cases and learn to fix shadowing errors by wrapping cases in blocks to create proper scope, demonstrated with color and input examples.

Master template literals in JavaScript to format console output and embed variables within strings using backticks, avoiding plus signs and escaping with backslashes.

Discover arrow functions in React, using concise bodies for one-liners, leveraging implicit returns, and knowing when to omit braces or parentheses for single versus multiple parameters.

Define a class with weight, age, and a park method, create object copies, and extend an animal class to let a puppy dog inherit the eat method.

Explore how the spread operator copies and merges arrays and objects, combines values into new arrays and objects, and gathers an unknown number of function arguments with rest parameters.

Master destructuring of objects and arrays to extract values directly, such as first name and age, and use rest or spread to access remaining elements.

Explore the difference between primitive and reference types, showing how primitives copy by value while objects copy by reference, and how to create independent copies with the spread operator.

Learn how default and named exports work in React, create components, export constants, and import with aliases to compose and reuse modules effectively.

Demonstrate how map applies a function to every element in an array, such as adding four to each phone number, offering a cleaner alternative to for loops.

Learn how to use for-in and for-of to iterate objects and arrays, access keys like apple, orange, and banana, and retrieve item values for calculations.

Store jsx element to a variable and reuse it in tests to demonstrate component manipulation. Apply styles to the element and observe how tests change when pasted or updated.

Delete the header, logo, and unnecessary imports to prepare a card list. Copy and adapt card code, adjust CSS with a style object, and plan a future component refactor.

learn how to pass multiple props, including first name, last name, job title, and avatar, to a card component by wiring data and rendering the title and image.

Demonstrate using the children prop to render nested content inside a component, such as placing multiple buttons inside a cart by passing JSX between opening and closing tags.

Explore state management with useState to change the user name and fix UI elements. Learn to fix cards, add a top button, and update the name interactively.

Learn how passing a function to a component enables a button to update names via an onChangedName handler, with controlled updates to Ellen Smith, Dave, and John Doe.

bind an input field to state with an onChange handler and pass the value and handler to child components to enable two way binding and live name updates.

implement a show and hide pattern with a new boolean state, use a ternary operator for conditional rendering in tsx, and render or hide the card accordingly.

Learn to render a list of cards in React by mapping a data array to multiple cards, add a delete button, and fix the missing key warning.

Click the red button to delete a specific card by passing its index to the delete handler; copy array with spread operator, remove targeted item, and update the state.

Fix the unique key error in React by assigning a unique key to each list item, avoid using index keys, and prefer a database-provided id.

Add an input field under each card to bind and update its name, using a change handler that copies the card and updates it by id without mutating the original.

Create a dynamic JavaScript button style that uses two conditions to change its background color from pink to red.

Explore dynamic styling with classes in React by updating a button’s color as cards are added or removed, switching to pink and red under specific conditions.

Extract the styled button, create a button in the element, copy it to another file, import and export default, then refresh to confirm it looks the same with no errors.

convert a functional component to a class-based one by importing the component, using a constructor with state for costs and cards, and moving render logic and handlers into class methods.

Convert the card component from a functional to a class-based component, enforce the structure with props, and update interactivity such as toggling cards, deleting items, and red button styling.

Explore the React updating lifecycle, including shouldComponentUpdate as a performance optimization, getSnapshotBeforeUpdate for special cases, and componentDidUpdate reacting to state or prop changes with examples.

Explore the unmounting lifecycle in React, implementing cleanup in the componentWillUnmount method to cancel network requests and unsubscribe, ensuring components clean up before they are destroyed.

Explore how useEffect manages side effects in functional components, demonstrating mount behavior with an alert. Learn how dependency arrays watch card changes and trigger or suppress alerts accordingly.

Learn how to use a useEffect cleanup to remove a mousemove listener, preventing memory leaks, while updating live x and y coordinates.

Fetch real external data in React with useEffect and axios, after installing axios, replace dummy data, render user names and phone numbers, and fetch only once.

Create an input field bound to an id and fetch a specific card with useEffect to display the user name and phone number and ensure a single request.

Explains how React context eliminates props drilling by creating a context, wrapping the app with a provider, and consuming the value in nested components A, B, and C.

Learn how to use multiple React contexts by creating a color context with a provider and consumer, importing and consuming name and color values in a component.

Demonstrate replacing nested context consumers with the useContext hook to consume multiple contexts in functional components, and display name and color from these contexts in component B.

Learn to build a new React app using useReducer, creating a counter component with dispatch actions for increment, decrement, and reset from an initial count of zero, with bootstrap buttons.

Learn to use useReducer to manage multiple state counters as objects, defining action types for increment and decrement (including content1 and content2), and dispatching updates with initial state and reset.

Explore using multiple useReducer hooks to run two independent counters with separate states, both starting at zero, dispatching actions for increment, decrement, and reset.

Demonstrate how to use useReducer with useContext to manage and share state across components, wiring initial state, dispatch, and a provider to drive a counter and form components.

Learn to manage state with useReducer and useContext by composing and rendering components B and C, importing them and passing actions to control state across components.

Use useReducer and useEffect to fetch data with axios, manage loading and errors, and render to-dos via dispatch-driven state.

Beautify the list with reactstrap and bootstrap by installing packages, importing bootstrap, and styling the list group; display completed tasks in green badges and incomplete ones via data.

Demonstrates using useMemo and memo to prevent unnecessary re-renders in a React app by memoizing a child component and rendering count only when state changes.

The lecture demonstrates the useMemo pattern to memoize props and prevent unnecessary renders, showing that updating component A does not re-render component B.

Create a brand new React app, import useRef, and attach a ref to an input field. Focus the first input with a button click.

Demonstrate using useEffect with cleanup to handle mounting and unmounting, track component mounting with useRef, and prevent state updates after unmount during a simulated fetch timer.

Learn how useCallback prevents function recreation to optimize performance in a React app, by memoizing increment functions for two counters and rendering a minimal UI with responsive buttons.

Create a reusable counter with a custom hook that extracts shared logic, letting components A and B share behavior and support customizable initial values, increments, and decrement actions using Bootstrap.

Learn to implement a custom hook to manage form state, building a name and email form with input fields, a submit that alerts values, and a reusable onChange handler.