Explore JavaScript essentials, compare VanillaJS and React, and learn to write a well-architected ReactJS application to stay maintainable and become a professional ReactJS developer.

Understand how scope governs variable visibility from global to nested function scopes and how closures create scope. Compare var, let, and const in terms of redeclaration, hoisting, and block scope.

Examine var hoisting and the lack of hoisting for let and const, then compare function and block scope with if and for loops, including setTimeOut behavior and function factory fixes.

Master logical or and in JavaScript, using || and && to evaluate conditions and understand truthy and falsy values.

Demonstrate how logical or returns the first truthy value and logical and returns the first falsy value, with examples using numbers and truthy/falsy concepts.

Learn how primitive values like string, number, bigint, boolean, undefined, and symbol behave when copied, and why objects and arrays share references, causing linked changes.

Explore primitive values versus reference types with hands-on examples, showing primitives copy by value while objects copy by reference, so changes to originals may or may not affect copies.

Learn shallow and deep copy in JavaScript using object.assign, array.slice, and spread operator, compare with JSON.parse(JSON.stringify(...)) for deep copies, and review performance and data loss.

Learn how shallow copies via object.assign and slice differ from deep copies using JSON.parse(JSON.stringify), and how nested objects and arrays behave in React data handling.

Explore the spread operator for shallow copying objects and arrays, adding or modifying values, use rest parameters for arguments, and apply destructuring to extract values with defaults and rest elements.

Master the rest parameters, spread operator, and destructuring through hands-on exercises to manipulate objects and arrays in React and TypeScript.

Learn how to create and use class templates in React and TypeScript, covering constructors, methods, public/private/static variables, inheritance with extends and super, and practical shape example with getArea.

Master class: react 17 + typescript web development hands on teaches private, public, static variables, constructors, and inheritance with shape and square, including getArea, super, and private data via getter.

Master the this object in JavaScript, where it binds to the caller. Contrast arrow functions, which lack their own this and execute where created, with their use in ReactJS.

Explore how this binds in the global scope with the window object, and compare a standard function versus an arrow function in a printer and a custom printer.

Master asynchronous flows in JavaScript by learning promises and async/await. Understand how callbacks and error handling fit into promise chains and async/await for React and TypeScript web development.

Master promises and async/await with hands-on examples, covering resolve, reject, and catch, and explore promise.all, allSettled, any, and race for multiple tasks.

Explore modular programming with export and import in React and TypeScript, covering named exports, default exports, aliasing, and import patterns.

Master scope and hoisting, block scope with let and const, primitive versus reference types, shallow and deep copies, and async patterns with promises and async/await, plus export and import.

Explore the ReactJS library basics, excluding hooks, learn use cases and common issues, and code the React way to build robust, maintainable, future proof apps with Babel, TypeScript, and Webpack.

Set up your development environment by downloading nodejs, creating a React app with TypeScript, and initializing the project with yarn start and yarn build.

Explore building reusable React components and props-driven user interface, class components with state and lifecycle, and functional components that render user interface, use fragments, and define props with TypeScript interfaces.

Build a reusable button component in a React 17 + TypeScript course by implementing a primary or default button, using props and children for flexible text and styling.

Explore state in React: a private, component-controlled, immutable data store updated with setState. Learn object vs function updates, asynchronous batching, rerenders, and post-update callbacks.

Explore state management in a class-based React component using TypeScript. Learn to initialize props and state, update with setState using previous state, and use callbacks.

Explore React component lifecycle focusing on mounting and unmounting, learn the execution order of constructor, getDerivedStateFromProps, render, and componentDidMount, and how to clean up with componentWillUnmount.

Explore mounting and unmounting lifecycles in a react and typescript web development course by wiring getDerivedStateFromProps, componentDidMount, and componentWillUnmount to manage counter state, ownerName props, and api data via axios.

Master the updating lifecycle in React by using derived state from props, shouldComponentUpdate, render, getSnapshotBeforeUpdate, and componentDidUpdate, with guarded setState and avoiding forceUpdate.

Learn the updating phase of the React class lifecycle with hands-on examples. Implement getDerivedStateFromProps, shouldComponentUpdate, getSnapshotBeforeUpdate, and componentDidUpdate, and fetch user data via axios in mounting and updating.

Build a React 17 + TypeScript user management and button components, handling onclick and type props with primary and default styles, while fetching and rendering user data from an API.

Learn how error handling works in the React lifecycle, using getDerivedStateFromError and componentDidCatch to catch, log, and respond to errors from descendant components.

Implement a React error handling lifecycle in a class component using getDerivedStateFromError and componentDidCatch to catch errors in child components, log error info, and render a fallback error component.

learn why certain React lifecycle methods are deprecated and unsafe, such as componentWillMount, componentWillReceiveProps, and componentWillUpdate, and how to refactor to use componentDidMount or componentDidUpdate for safer, future-proof code.

Discover how pure components and the React.memo higher order component limit re-renders with shallow prop and state checks, and when deep cloning and cautious use boost performance.

Master pure components and React.memo through hands-on demos, exploring shallow prop and state checks, shouldComponentUpdate behavior in class components, and comparator use in React.memo.

Explore render props pattern and higher order components to reuse logic like tracking clicks and data fetching within components, using a wrapper or function that returns a component.

Demonstrate render props to share click-tracking across profile and news feed, then implement a withTrackClick higher order component with TypeScript generics.

Render lists in React by using an array of components with stable, unique keys. Learn how keys prevent full re-renders and why indexing is discouraged.

Render a fruit list in React by mapping an array to li elements, add new fruits through an input and button, and use keys to correctly track updates.

Explore how to access DOM nodes with React refs, including createRef, callback refs, and forwarding refs. Learn when to use refs for focus and element positioning in React and TypeScript.

Master refs in React using callback refs, createRef, and forwardRef to access inputs and child components, focus elements, and pass current refs in TypeScript.

Learn to pass data through a component tree without having to pass props down manually, using React context, createContext, provider, and consumer, with displayName, contextType, and TypeScript generics.

Master the Context API in a React and TypeScript project by building a MyContext with theme and a centralized user store, using provider and consumer patterns and update functions.

Explore React form elements, override default submissions with onSubmit and preventDefault, and control inputs with value, onChange, and defaultValue across input, textarea, select, checkbox, and file inputs.

Learn how to manage form elements in React: prevent default submit, read inputs with value props or refs, and distinguish defaultValue from controlled inputs using onChange handlers.

Build a React 17 + TypeScript form with a reusable button and input, use forward refs for focus, and manage grades with 90 percent above and 70 percent below views.

Explore code splitting to reduce initial load with dynamic import, react.lazy, and suspense. Handle loading and errors via fallbacks and error boundaries, noting SSR limits and loadable components.

Learn to implement code splitting in a React app using lazy loading, dynamic imports, and Suspense to load even and odd components based on a counter, with error handling.

Explore building reusable components with React by manipulating children through React.Children utilities, cloning elements, and validating elements with React.isValidElement, while safely overriding props and preserving keys and refs.

Learn to build a reusable button group by overriding colors and onClick with React.cloneElement, using React.Children.map and React.isValidElement to wrap safely in UI libraries.

Explore building a reusable React button group component in TypeScript that adapts UI by direction, tracks the selected index, clones valid children, and passes onClick with the index.

Explore core React concepts—from components, props, and state to lifecycles, hooks, and patterns like higher-order components, render props, context, refs, and code splitting.

Explore how react-dom renders React components to the DOM, install the react-dom package, and leverage its APIs to bootstrap and render in a create-react-app project.

Explore render and hydrate APIs in React 17 with TypeScript, using ReactDOM.render for mounting components and ReactDOM.hydrate for server-side rendered content, emphasizing identical client and server outputs.

Experiment with the render API by rendering an extra element with a new div id renderSample in index.html, creating two homepage instances, and checking the console log.

Learn how to use the unmountComponentAtNode API of ReactDOM to remove a mounted React component from the DOM, clean up its event handlers and state, and return true when unmounted.

Explore the FindDOMNode API in React 17 + Typescript, learn how ReactDOM.findDOMNode returns the native DOM element for a mounted component, and why refs are recommended to avoid it.

Explore the findDOMNode API hands-on in a React 17 and TypeScript development course. Create a ref, access a profile component's DOM node, and learn about its deprecation in strict mode.

Master rendering React components outside the DOM hierarchy with ReactDOM.createPortal for modals, dialogs, hover cards, and tooltips, including lifecycle and event propagation details.

Master the createPortal technique by rendering a modal into a dedicated root element, wiring show and onClose props, and preventing event propagation to keep the modal on top.

Build a reusable button and modal using portals to render above elements, avoid click propagation, manage show state, and present a day-based message app with header, body, and footer.

Master the ReactDOM APIs: render to mount in the DOM, hydrate for server side rendering, unmount at a node, find DOMnode, and create portals to render outside a component.

Learn how to create multi-page experiences in a single-page React app by using react-router-dom, install the library and its types, and set up navigation with TypeScript.

Learn to build navigation with React Router DOM by creating a browser history and rendering routes with component, render, or children props, using route props like match and location.

Learn hands-on routing in react with react-router-dom, including creating browser history objects, exact routes, switch behavior, and route props for params and location.

Explore browser and hash routing, basenames, and history manipulation with react router, then compare render, component, and children props, plus switch behavior and route matching in depth.

Learn how to navigate a single page application using link and redirect components, with push and replace behavior, href and navigate props, and how to handle errors with redirects.

Explore link and redirect components inside a browser router, using to and path props, history.push versus history.replace, and the from prop to control navigation without page reloads.

Learn how to access router props in deeply nested components using the withRouter higher-order component, which passes history, location, and match through wrapped components in a React 17 TypeScript app.

Explore the history library in JavaScript, covering browser history, hash history, and memory history, and learn to create browser/history/hash/memory history, path, location, and listen for location changes.

Learn to access the browser router history with withRouter instead of creating a separate history, so navigation updates properly across app components.

Implements a reusable button with onClick, type, and className props, a labeled input with forwardRef, and routing with login state and session storage.

Master React Router DOM by exploring router types like BrowserRouter, HashRouter, MemoryRouter, and StaticRouter, and components such as Route, Switch, Link, Redirect, and withRouter, all built on the context API.

Discover redux, a centralized state container for JavaScript apps, with actions, reducers, and a store, and integrate with react-redux in TypeScript via connect and provider.

Install Redux libraries, build a fruits reducer, create a store with initial fruits, and wrap the app with a provider to access it via mapStateToProps.

Learn to dispatch an add fruits action via mapDispatchToProps, wiring addFruits to a button to update the fruits array in the reducer and pass dispatch props to the fruits component.

Learn how to use combine reducers to split complex state management into independent reducers, then pass a single reducing function to createStore with todos and counter.

Learn to implement combineReducers in a React + TypeScript project by wiring fruits and users reducers into a rootReducer. Observe how mapStateToProps and connect optimize rerenders.

Explore middleware as a third-party extension between dispatch and the reducer, using redux applyMiddleware to intercept actions, run side effects, and craft custom store logic.

Create our own custom middleware (redux-thunk like) to centralize fruit actions, log store state, and support function dispatch in a redux-style TypeScript React app.

Create and type custom middleware for dispatch, implement dispatch overloading, and wire applyMiddleware in App.tsx to enable typed, reusable middlewares.

Explore typing a store with generics in a React 17 plus TypeScript middleware, using rootReducer, the return type of combineReducers, getState, dispatch, and typed actions for fruits and users.

Explore reselect, a selector library for redux that derives data with memoization, keeping minimal state and enabling efficient, reusable selectors like filtering fruits by the letter o.

learn to set up redux devtools with a chrome extension, attach it to your store using compose with devtools, and test actions like add fruits and add users with jest.

Build a redux-driven note-taking app in React and TypeScript, featuring reusable ui components and modals for viewing, adding, editing, and deleting notes.

Learn how Redux provides a predictable centralized state container for JavaScript apps, including React Redux, actions, reducers, store, and essential tooling like middleware, reselect, and devtools.

This lecture introduces server side rendering in React, showing how the server returns a pre-rendered HTML page for faster load times and improved SEO, with renderToString and hydration.

Set up a server side rendering environment with node/express and ts-node, configure tsconfig, build assets, and serve build and public folders via express on port 7777.

Apply server-side rendering to a React 17 + TypeScript app by rendering components to a string with renderToString, using StaticRouter and req.url to determine the route, including base name handling.

Pass the initial Redux state from server to client by injecting it into index.html and hydrating on the client. Secure the state with serialize-javascript to prevent script injection.

Learn how to implement React server-side rendering by rendering components to string with redux provider and StaticRouter, replace index.html content, and use serialize-javascript to secure window.initialState.

Build a from-scratch e-commerce shop with homepage, paginated products and filters, add-to-cart and checkout with validation, a thank-you message, and a dark/light theme toggle.

Clone or download the project, install dependencies with yarn, then run yarn start and yarn start-api to access localhost:3000 and localhost:1234 with get all products, post, update, and delete operations.

Create initial pages and set up routing with react-router-dom and TypeScript. Build home, all products, and checkout pages with a routes constant and exact paths, plus a redirect.

Build a header navigation in a React and TypeScript app, with left and right nav items, Shopspree home link, all products, and a Font Awesome cart icon styled with CSS.

Build the homepage component with a cover image, then showcase shop qualities: eco friendly, high quality, and support local, while planning best sellers and partners.

Build a dynamic best-seller section on the home page by creating a reusable product card component, styling with CSS, and introducing a partners showcase.

Learn to set up Redux with TypeScript, create a product details store, reducers, actions, and a root reducer, and wire it with Redux Saga in a React 17 project.

Introduce redux saga as a middleware for managing side effects like data fetching and cache access, using generators to enable readable, testable asynchronous flows.

Set up Redux saga as middleware to listen for fetch actions with takeLatest, fetch data via axios using call, and dispatch results with put in a root saga.

Install and enable chrome redux dev tools extension, wire compose with devtools into the project, and monitor actions and state changes such as fetch product details and set product details.

Connect components to the redux store with mapStateToProps and render all products using a product card, extracting image URLs from variants.

Implement backend api changes by adding a product filters api with category query parameters and align frontend with trends and hot this month.

Refactor the frontend to fetch and display best seller products with pagination options, update API contracts, and introduce shop products state while enhancing readability and maintainability.

Connect best seller to redux by fetching best seller products, updating the store, and rendering them in a connected component. Optimize with store data checks to avoid extra API calls.

Refactor the shop to fetch products and product filters from two APIs via a single redux action, lowering renders, using saga and a store update for the all products page.

Create a reusable checkbox component for the filters sidebar on the all products page in a React 17 + TypeScript app, using Font Awesome icons for checked and unchecked states.

Create and integrate an all products sidebar component in a React 17 + TypeScript project, rendering product filters from the store with a UI container, heading, and checkboxes.

Build a redux-based filter system by creating a user reducer, actions, and saga to update user filters in the store and refresh shop products by converting filters to categories.

Create a button component and a pagination component, wiring props for className, selected, and onClick. Implement button types default and primary, style with style.css, and handle hover and selected states.

Create a reusable React TypeScript pagination component with left/right carets, dynamic page buttons, and an onChange callback for the selected page and number of pages.

Build a pagination feature by updating the redux reducer, actions, and saga to fetch products for the selected page and size, integrating filters and API calls.

Implement and refine a pagination feature for the shop products page using mapStateToProps and mapDispatchToProps, handling current and override selected pages, total pages, and filters to ensure correct navigation.

Create a reusable modal component in React 17 with TypeScript, using a portal and overlay to show product details like sizes, colors, and price, with a buy action.

Develop and integrate a product card modal in React and TypeScript, featuring a two-column layout with image and details, opening on click and closing when clicking outside the modal.

Refactor the product card modal to handle variant details, including an initial variant and a variants list, enabling rendering of name, price, discounted price, sizes, colors, and add to cart.

Build and refine a product card modal in React 17 with TypeScript, featuring dynamic price display with discounts, quantity controls, and size and color variant options plus an add-to-cart button.

Refactor the product card modal by extracting render variant options, quantity UI, and price UI into separate components with props for variants and the selected variant.

Build an interactive product card modal in a React 17 + TypeScript app with quantity controls, stock-aware add/minus, and dynamic size and color variant selection, including utilities for available options.

Implement add to cart by storing product purchases in a redux cart, extending product variant details with quantity, and wiring through all products page and modal to show cart updates.

Convert the shopping cart icon into a reusable component connected to the Redux store to access cart items and show a notification in the header when the cart has items.

Learn to build a reusable popover component in React with Typescript, triggered by clicking a shopping cart, supporting bottom left and bottom right positions, using portals and dynamic width calculations.

Learn to implement a cart popover with controlled show logic, move the cart to a redux-connected container, convert the component to a class, and wire checkout navigation via route checkout.

Learn to render cart items in a React 17 + TypeScript app, create a shopping cart product component, compute subtotals with discount handling, and implement remove-to-cart actions and popover close logic.

Connect the checkout page to the redux store, render cart items with a subtotal and total, and build a reusable checkout page product component with color styling.

Build a reusable input component for billing information in a React and TypeScript app, supporting onChange, error and positive states, label, and customizable input and container styles.

Create a dynamic customer information form in a React and TypeScript checkout page, with fields for complete name, address, city, state or province, and mobile number, using mapping.

Learn to build a dynamic customer information form in React 17 with TypeScript, adding field validation, focus management on errors, and ref-driven input handling.

Refactor the APIs to wire the orders endpoint for completing purchases, restructure routes into product and order routers, and implement new paths like /product/all and /order (post).

Pass the cart data to the checkout flow, validate fields, call the API to post order, show a thank-you modal, and clear the cart before redirecting users to all products.

Implement dark and light themes with the React context API, creating a theme provider, portal-driven toggle, and CSS updates across product cards, pagination, and checkout; conclude with code splitting.

Refactor the ui theme toggle using font awesome sun and moon icons driven by the theme context, with onClick to switch themes, and update css for light and dark modes.

Master the code splitting workflow in a React 17 + TypeScript app using React.lazy, suspense, and dynamic imports, with robust error handling, route-based fallbacks, and server-side rendering.

Implement server-side rendering for a universal react app with express and ts-node, preloading redux state and data for home and all products via render to string.

Learn complete server-side rendering with React and TypeScript, including JSDOM-based DOM rendering, CSS handling, and conditional portal rendering. Build a server API workflow for images and static routes.

Take the reins to implement and polish features in the React 17 + Typescript e-commerce app, from Shopspree navigation and stock UI to cart merging, loader states, and stripe payments.

Explore how React hooks let functional components act like class components while solving stateful logic reuse, reducing refactoring, and enabling easier testing and modular code.

Learn to add state to a functional React component using the useState hook, update with the setCounter function, and optimize performance with lazy initial state.

Learn how to use the useEffect hook to simulate componentDidMount, componentDidUpdate, and componentWillUnmount with dependency arrays. Discover cleanup functions and managing multiple effects for clean, responsive components.

See how useEffect runs after the DOM paints and is asynchronous, while useLayoutEffect runs before painting and blocks updates, flushing synchronously for precise UI control.

This hands-on demonstrates useCallback and useMemo to memoize a callback and an expensive computation, illustrating how function identity affects React.memo re-renders and state updates.

Explore useRef to reference a button and inspect current values, and use a callback ref to measure width and persist an instance-like variable across renders.

Explore how the useImperativeHandle hook overrides a component's ref using forwardRef, enabling a parent to call child functions like handleButtonClick; learn about deps and re-instantiation.

Build custom hooks to reuse logic, combining useState, useEffect, and useRef; create useEffectOnUpdates and usePrevious to mimic component did update and track previous values.

Learn how to create and consume a theme context using the useContext hook, supply a ThemeContext.Provider with dark or light values, and reflect the current theme in the UI.

Use useReducer to handle complex state logic, multiple sub values, and next state depending on the previous state, with actions, dispatch, and lazy initialization in React with TypeScript.

convert class components to a functional approach using react-redux hooks like useDispatch, useSelector, and useStore to manage fruits and users in a redux store.

Explore how to use the useDebugValue hook to label and format values in custom hooks, illustrate with usePrevious, and understand react devtools formatting and performance implications.

Explore core react hooks, incl. useState with lazy init, useEffect and useLayoutEffect, and memoization with useCallback and useMemo; useRef, useImperativeHandle, useContext, and custom hooks prefixed with use.

Practice using React hooks by modifying your existing e-commerce shop components, and convert the app to hooks to demonstrate how React works.

Convert a pagination component to a React hooks-based functional component using useState and useContext, with props destructuring, theme context, and onChange handling for page navigation.

Learn to convert a class-based modal component to a functional component with React hooks. Use useRef and useEffect to manage mount, unmount, and outside click handling.

Convert the popover component to a functional React component using useRef and useState, and implement custom hooks useEffectOnUpdate and useLayoutEffectOnUpdate for on-update behavior and reduced flicker.

Convert the all products page to a functional component using hooks, connect to redux with useSelector and useDispatch, manage shop products and user filters, and optimize rendering with equality checks.

Refactor class components to functional components with React hooks (React 17), optimizing pagination, modal, and popover patterns; use useCallback and React.memo to boost all products sidebar performance.

Convert the customer information component from class to a functional component using React hooks, including useRef, useMemo, and useState to manage field refs, state, and errors.

Convert the whole e-commerce application to React hooks. Build expert understanding of React by practicing with hooks and become a hooks master.