The Complete REACT Course- Beginner to Advanced 2022

Master the basics of cascading style sheets, describing how to present a document with color and font family, and applying styles through selectors and declarations.

Explore cascading style sheets by using inline and internal styles, apply common properties like text alignment and width, and grasp cascade priorities that favor inline over internal and element selectors.

Learn how cascading style sheets use element, class, and state selectors, apply styles with properties and classes, and resolve priority to control background and color changes.

This lecture demonstrates CSS basics, including font-size and font-family, applying multiple classes with proper whitespace, and styling elements using id selectors (hash) and class names for headings and links.

Master CSS specificity by comparing inline, id, class, and element selectors, and learn to apply styles through external stylesheets linked across multiple pages for maintainability.

Learn how css margins create space around an element using top, right, bottom, and left values, and use the margin shorthand to set one or multiple values.

Explores how borders and padding shape the box around a paragraph, and how the background, area, and interior space interact within the element.

Learn how CSS position properties determine where elements appear, from the default static flow to left, right, and top offsets, and how sticky positioning shifts content.

Explore the difference between fixed and absolute positioning in CSS, showing how fixed keeps an element in place and absolute positions it relative to its container using left and top.

Master the CSS float property to align elements to the left or right, wrap text around images, and control paragraph layout with practical examples.

Explore how CSS overflow controls content visibility by enabling horizontal and vertical scrolling, hiding overflow, and using overflow properties like scroll and auto to manage space.

Explore bootstrap's responsive web design, adapting content and alignment across devices with its open source grid system and navigation components.

Learn how to download and install bootstrap, select the right bootstrap files, and add a button to your project, understanding bootstrap’s sizing and styling options.

Explore button design and color schemes in the React course, using class names, green button examples, and Bootstrap themes.

Learn to build responsive bootstrap forms and tables in React, using common bootstrap classes for form controls, input fields, buttons, and themed tables to control layout, width, and appearance.

Experiment with the bootstrap grid system to form rows and columns, creating three equal columns or two halves, and use auto sizing to adapt to device width.

Explore how to create responsive columns with equal-width blocks: three columns at 33.33% on large screens, then two columns at 50% on medium devices, and adapt on small devices.

Learn to design layouts with a grid system by dividing content into 12 columns, choosing equal or unequal column widths, and grouping columns to adapt as needed.

Explore typography with bootstrap styles, focusing on font family, size, alignment, and button appearance to shape user interfaces. Learn to include bootstrap via download or CDN and apply bootstrap classes.

Learn to implement alerts and badges in a React app to provide textual feedback for user actions, display warning and notification messages, and manage notification counts through UI elements.

Learn to build and customize a navigation bar in a React course, including dropdowns, responsive collapse for mobile and tablet, and essential JavaScript for interactivity.

Explore how to work with models and cards in a React app by wiring dialogs, buttons, and notifications, using model classes, states, and form styles to build customizable components.

Explore pagination and spinner components in React, including border styles, color options, sizing, and progress bars to enhance user interface navigation and loading indicators.

Learn to download, extract, and integrate bootstrap icons from a library of 1200+ items, customize size and color, and apply icons to UI elements like iPhone and Spotify.

JavaScript part-1 introduces core programming concepts and explains what a program is, what source code is, and how high-level code converts to machine binary.

Discover how a compiler translates high-level code into machine language and how browsers use just-in-time compilation with engines like V8 to run JavaScript, making web pages dynamic.

Explore the history of JavaScript from Netscape origins to a high-level, multi-paradigm language powering client-side web apps. Discover browser engines and core concepts like statements and prototypes.

Learn how comments enhance readability, and how variables, declarations, keywords, and identifiers store data in memory, with rules for valid names and initialization in JavaScript.

Explore JavaScript basics by declaring variables with var, let, and const, initializing values, and choosing display methods like console.log, document.write, and alerts to show output.

Explore JavaScript basics by examining data types—strings, numbers, booleans, undefined—and how dynamic typing affects variables declared with let, including string concatenation and type differentiation.

Declare and initialize variables in JavaScript, explore undefined values and basic types, and display results with console.log, document.write, and alert, using backticks for string interpolation.

Explore basic JavaScript operators, including assignment with equals for constants and variables, arithmetic and relational operators, increment and compound assignments, and the difference between loose and strict equality.

Explore JavaScript logical operators, including and, or, not, and comparison operators like == and ===, with examples of if/else and truth evaluations across numbers and strings.

This lecture demonstrates building multi-branch logic using if-else chains and switch cases, including default handling and break to exit each block.

Explore conditional and ternary operations in React by evaluating booleans, comparing values with equal and not equal checks, and selecting outcomes based on true or false results.

Explore how a for loop executes a block of code multiple times, leveraging initialization, condition, and update steps. See examples for iterating even numbers and controlling flow with basic statements.

Learn JavaScript for loop concepts, including initialization to zero, condition checks, and how the loop exits when the condition changes or the value stops changing.

Explore how to create and use functions in JavaScript, including defining, calling, and passing arguments, plus examples with console.log and an external JavaScript file.

Explore defining and calling functions, returning values, and the difference between function declarations and expressions, including anonymous functions, the square example, and function scope with global variables.

Master function scope and lifetime, distinguishing local from global scope, and use nested and returning functions. Learn to pass functions as arguments and invoke inner functions.

Understand the scope of let, var, and const, including global and block scope, hoisting, and how declarations differ from values, plus try and catch for exception handling.

Explore how try-catch-finally blocks manage errors in JavaScript, and how let, var, and const influence scope, alongside strict mode and declaring variables.

Learn how to use JavaScript to make an HTML page interactive by manipulating the Document Object Model, adding and removing elements, and handling events like button clicks.

Explore calling JavaScript functions within an HTML page, handling events, displaying alerts and prompts, storing and logging values, and converting string inputs to numbers in the complete React course.

Practice manipulating the html page with JavaScript by selecting elements with document.getElementById, updating innerHTML and styling, handling key press events, and calculating a sum from input values to display.

Demonstrate how to dynamically add items to a list by reading input on a button click, creating elements with createElement, and updating the DOM with bootstrap styling.

Learn to manipulate the document object model with JavaScript, adding elements, updating content, and clearing input fields, while exploring primitive versus object types and string immutability.

Learn essential JavaScript string functions from indexing to trimming, including indexOf, substring, slice, startsWith, endsWith, and type conversions with valueOf and toString, for React apps.

Learn to create and manage JavaScript arrays using square brackets or the array constructor, access zero-based indices, iterate with for loops or for-of, and grow by pushing elements.

Learn core array operations in React, including push, unshift, shift, splice, and slice to add, remove, or insert elements, and use index, length, split, and join for data handling.

Explore arrow function expressions as a compact alternative to traditional function expressions, noting their lack of own bindings and concise return syntax.

Learn how to pass functions as arguments using arrow functions and anonymous functions, and apply map, filter, and reduce to manipulate arrays in React basics.

Explore JavaScript inheritance and the prototype chain, distinguishing own properties from inherited ones, and learn practical ways to create objects using prototypes and Object.create.

Explore objects in JavaScript by examining state, behavior, and identity, and create objects with literal syntax or function constructors. Understand properties, keys, values, and methods with car and student examples.

Learn to create and inspect JavaScript objects, define properties and methods, access data with this, and convert objects to and from JSON strings for easy data exchange.

Explore how to create and inspect objects in JavaScript, using Object.keys, Object.values, and Object.entries to access properties, and differentiate own properties from inherited ones via prototype concepts and hasOwnProperty.

Learn to create and initialize objects in JavaScript using traditional functions, defining properties with this, and adding methods like a discount function.

Learn how to borrow and call functions from objects using call, apply, and bind, pass arguments directly or via arrays, and use partial function application for later execution.

Build a to-do list app with JavaScript, capture user input, store tasks in an array, render the list with dom updates, and remove tasks with a button.

Explore document object functions and browser events, including on scroll, on click, on change, and on select, with live examples and event handling patterns in a React context.

Learn to select DOM elements with selectors, dynamically update styles, and handle events with addEventListener and document delegation, using setTimeout for timed actions.

Learn how to use the spread operator to combine arrays and objects, and update object properties safely. Explore practical examples of merging data, handling duplicates, and using spread for updates.

Explore how TypeScript adds optional static typing to JavaScript and supports lab applications, contrasting dynamic typing with static typing and noting its relation to Java.

Explore how TypeScript introduces strong typing, type declarations, and inference to catch errors early. Learn how TypeScript compiles to JavaScript, enabling editor-based error detection and incremental adoption.

Explore static type-checking in JavaScript by showing how misusing variables as functions triggers errors, how editors warn and how code runs in browser or Node, with transpilation concepts.

Explains the TypeScript type system, including any, number, boolean, void, arrays, enums, classes, and interfaces, and how code completion and error documentation assist development.

Explore type annotations on variables, explicitly declaring string, number, and boolean data types in TypeScript, distinguish explicit declarations from type inference, and understand how this enhances safety.

Explore how to annotate variables, understand the any type and opting out, and how type inference works when no explicit type is given.

Learn how JavaScript uses class syntax as a blueprint for objects, compare with function constructors and prototypes, and implement classes with constructors to initialize properties.

Explore how a class acts as a blueprint for objects by declaring properties inside the class. See how objects have mutable state by updating properties and calling display functions.

Create a class with initialized properties, add a function (arrow style) to compute the average of months, and access properties with this keyword to build reusable student objects.

Explore object oriented programming concepts such as classes and inheritance using a base product class and a laptop subclass to demonstrate properties, constructors, and code reuse.

Explore object oriented programming concepts with a smartphone product hierarchy, learning single and multi-level inheritance, parent and child classes, super constructors, and polymorphic method overriding.

Learn how inheritance lets a base polygon class support shapes like square and rectangle. Override the area method to compute each shape's area, using super to access the parent behavior.

Explore access specifiers in classes, detailing public and private access for properties and functions, default public access, and encapsulation through class boundaries and object access.

Demonstrate how private, protected, and public access specifiers govern data and methods inside a class and its subclasses, with examples of initialization and public function access.

Understand static versus instance members, constructors, and class scope, and learn to access static methods via the class name while distinguishing instance data.

Explore access specifiers in a class, showing how private properties are accessed via public getters and setters, and how outside code interacts with private data through public methods.

Explore access specifiers in class design, showing how to declare and initialize public, private, and protected properties, and use constructors to set object state.

Explore how interfaces enable data abstraction and contract-based design in object-oriented programming, showing how interfaces hide implementation details while guiding object contracts and implementations.

Explore how interfaces declare members and how classes implement them, requiring definitions for properties and functions. Learn to create objects that satisfy interfaces with declared data types.

Learn how a class can implement multiple interfaces instead of relying on single inheritance, and how to define a draw method for shapes like polygon, square, and rectangle.

Learn how namespaces group related logic, prevent global namespace pollution, and manage access across files using explicit exports and using directives.

Explore how to work with namespaces in Onshape, creating and referencing shapes like rectangles and squares, and exporting drawings while aligning objects and classes within a namespace.

Explore namespaces in React development, distinguish type casting from type assertion, and examine object creation and inheritance, along with exports and imports to manage modules effectively.

Install Node.js and npm, create a React project, and build interactive user interfaces with a declarative, component-based JavaScript library that can render on the server.

Explore JSX in a React workflow, including setting up a React project and writing components for user interfaces. Learn how frameworks streamline development and enable reusable UI.

Explore the React project structure, including the public folder and essential modules, install dependencies, and run a development server at localhost:3000 with automatic live reload.

Learn how React renders elements, the smallest building blocks of a React app, into the DOM using a render call, while understanding functional components, imports, and the virtual DOM.

Learn to create a React component, export and import it, render it in the app root, and compose components like shopping list and smartphone to build an interface.

Explore building UI with React by creating function and class components, understanding props, and passing properties between components to render dynamic greetings like hello John.

Learn how to access props inside a class component and compare with function components, including render, this.props, extending Component, and default vs named exports.

Learn how to manage state in React by comparing class components with constructors and this.state to functional components using hooks like useState, and update state with handlers and setState.

Explore how to declare and update state in class and function components using setState and useState, handle button clicks, events, and reflect state changes in the UI.

Explore state management in React by building a simple counter in both function and class components, using useState and this.state with plus and minus buttons.

Create a React project to build a three-component todo app with a form for new tasks, a display list, and a todo item component, including an input and add button.

Create a dynamic React todo app by managing state with useState, using dummy data, rendering items with map, and composing components with props to add and complete tasks.

Create a React to-do app project by implementing a complete status toggle, updating the to-do list state via a click handler and the map function.

Create a react todo app part 4 by implementing unique keys and an id-based property to differentiate each item, using a dedicated item component and delete functionality to manage state.

Learn how to add a new to do item in a React app by building a form component, displaying the to do list, and handling inputs with placeholders and buttons.

Add a new todo item in React by handling the input event, extracting its value, creating a new object, and updating the to-do list with a passed add function.

Explains adding a new todo item in a React app by wiring button clicks to functions, handling input, and refactoring into components to fix UI updates and data rendering.

Learn how to add a new todo item to a to-do list, update the list state with a button click, and display the new task in the list.

Learn to build React components and manage data flow without Context API, using objects, props, and cards to display multiple companies and their products.

Explore managing a shared price state across components, avoiding prop drilling, and learn how the context API lets you access data directly without passing props.

Learn to use the context API to remove props drilling by creating a context, providing a value, and consuming shared data across components such as theme settings and toolbar buttons.

Learn how to implement the Context API to remove props drilling by creating a provider and consumer, and refactoring a class component to access shared store data.

Create a React e-commerce app that displays products, adds to cart, and updates quantity, price, tax, and shipping, using component-driven data wiring.

Create an e-commerce product list in a React app by mapping a products array to a product component, displaying image, name, price, and quantity in a three-column layout.

Define and integrate a cart component, display items with quantities, and implement add-to-cart logic that updates existing items, quantities, and total cost.

Define and refine the cart component in React, implement add item functionality for products, and debug with console output while considering pricing, database, and item parsing.

Build and refine a cart component by managing item quantities, implementing increment and decrement actions, displaying item quantities and prices, and supporting item removal with quantity safeguards.

Explore how to present item prices, shipping charges, and tax details clearly, while managing product visibility and pricing updates in a shopping flow.

Build a three-page React app that displays metadata, adds new media, and shows favorites while implementing routing with the react-router package and BrowserRouter for navigation.

Create a React app that uses browser routing and a main navigation to display three components separately, mapping paths to components and rendering the chosen one on each route.

Create and refine the main navigation in a React app by adjusting margins and height, importing Bootstrap, and arranging the layout with an eight-and-four column grid.

Create and render reusable UI components in a React app, using dummy data and state to display cards with media details, styling (Bootstrap, radius, shadows), and dynamic layouts.

Design components and styling, implement a favorites feature with a styles-driven skin, and build a favorites context and provider to manage state in this part of the React course.

Create and share state across components by implementing a React context with a provider, wrap your app, and replace a consumer with useContext to access favorite data.

Learn to build a React app part 7 using media blitz and favorite components, isolate the user with a selector, and manage favorites via a shared fabric context.

learn to add and remove items from the favorites in a react app using a context-driven fabric, update labels, and show the favorite count in the main navigation badge.

Learn to build a form-driven React component in a functional style, with inputs for name and description, image handling, and a submit button that renders a recap item.

Learn to build a new item by collecting form inputs, generating an id, and updating state in React: create an object from inputs, handle submit, and prevent page reload.

Show a navigation bar badge and load data from firebase cloud storage, replacing dummy data with cloud-stored makeup data.

Store and read meetup data in Firebase with a React app. Use useEffect to fetch data, create unique IDs, and organize entries under a collection for real-time updates.

Explore how to receive and structure data from a store as objects with keys and values, convert formats, update state, and manage loading for rendering.

Explore the concept of a React component life cycle, its mounting, updating, and unmounting phases, and how lifecycle functions control rendering and updates.

This lecture explains react component lifecycle functions, starting with initializing the state and mounting, then rendering and updating in response to state changes, including getDerivedStateFromProps.

Explore the React component lifecycle, focusing on mounting and updating phases and how state and props drive rendering. Examine key lifecycle methods such as render, componentDidMount, shouldComponentUpdate, getSnapshotBeforeUpdate, and componentDidUpdate.

Learn the React component lifecycle functions part 4, including mounting, updating, and unmounting phases, handling state updates, cleaning up before unmount, and canceling API calls.

Explore how Redux provides a predictable, stage-managed data flow for React and Angular apps, detailing stores, actions, reducers, and dispatchers that connect the UI with application state.

Define Redux action objects with a type and state, implement action creators for increment and reset, and build a reducer plus store to wire the app.

Build a redux-like counter in a React app by defining actions and reducers, creating and providing the store, and connecting components with a selector to read state and dispatch actions.

Learn to build a counter component in a React app by using useDispatch to increment, decrement, and reset, dispatching actions to update the store.

Learn to build a redux-style counter in a React app by creating a store with a reducer, and using useSelector and useDispatch to read and update state.

Explore building a counter with a Redux store, combining reducers, and dispatching increment, decrement, and reset actions using useDispatch in the app and counter components.

Define actions as objects and dispatch them to a reducer-driven store, with functions returning action objects, updating the initial state with increment and reset actions in a react redux app.

Learn how to build a counter component and app structure in React, and debug with browser extensions and dev tools to inspect actions, reducers, and state transitions.

Explore common React interview questions about advantages and limitations of the open source library for single-page interfaces, including keys, map function, components, props vs state, and data passing.