Instructional Video12:39
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Checkout - Fixing the State

Higher Ed
We will create a checkout page, which will require us to handle the items in the product list, make final calculations, and add any other info if needed; reloading the page should allow us to make changes in the total by adding or...
Instructional Video1:14
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Finishing the Checkout

Higher Ed
You will learn to create forms to collect information and validate user information such as billing address, mode of payment, and so on.
Instructional Video7:58
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Implementing Basket Total

Higher Ed
After implementing the shopping basket and all the functions it needs, we will execute the tasks required to make the basket add up the totals of the prices of each product multiplied by the number of items and add other features such as...
Instructional Video4:44
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Implementing Basket Icons

Higher Ed
In this video, you will learn to create basket icons, implement them one by one, and test them for functionality.
Instructional Video6:30
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Implementing the Basket

Higher Ed
After creating a ledge for the basket page, we will now learn to add functionality to the basket and start receiving items from the product list and the function buttons to work.
Instructional Video11:19
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Basket Layout

Higher Ed
In this video, you will learn how to create the basket layout for storing the chosen products and increase or decrease the quantity of the items or delete the items from the list.
Instructional Video18:07
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - UseContext Hook and UseReducer Hook in React

Higher Ed
Let's understand UserContext Hook, which makes it easy to pass data throughout your app without manually passing props down the tree, and UseReducer Hook, which allows for a simpler, predictable, and organized way to update our component.
Instructional Video9:01
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Introduction to Context in React

Higher Ed
This video discusses the context in React, a method to pass props from parent to child component(s) by storing the props in a store. We will create a "cart" context to store items in our shopping cart.
Instructional Video5:58
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Refactor the Homepage

Higher Ed
In this lecture, the next step is to start building the homepage of the ecommerce site. We will use components to tell React what we want to see on the screen.
Instructional Video5:32
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Refactor the Layout

Higher Ed
In this video, we will understand cleaning up a bloated render method in a React component by extracting a layout component.
Instructional Video8:31
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Refactor the Categories

Higher Ed
This video demonstrates how we can refactor product listing categories based on certain specifics, update any changes made to the products, or take them off the listing.
Instructional Video4:15
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Dangerously Set HTML (Yeah Really)

Higher Ed
Let's learn about dangerouslySetInnerHTML, a property you can use on HTML elements in a React application to set their content programmatically.
Instructional Video3:15
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Styled Components - Product Description

Higher Ed
In this lesson, we will understand the styled system, a collection of utility functions that adds style props to your React components and allows you to control styles based on criteria.
Instructional Video13:08
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Introduction to Styled Components

Higher Ed
Here, you will learn more about a styled-component module, which allows us to write CSS within JavaScript in a very modular and reusable way in React instead of having one global dynamic class.
Instructional Video5:33
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Product Description

Higher Ed
Let's start by designing a static product tile that we can use as the template for the generated product tiles. Create a file named "components".
Instructional Video9:03
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Fetch API - Get Product By ID

Higher Ed
This lesson will teach us how to fetch and get product information by ID. This code uses the fetch() function to call the Web API Product controller class.
Instructional Video12:31
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - React Router - Detail Page

Higher Ed
In this video, you will learn how to use the React-Router and its components to create a Single Page Application as a detail page.
Instructional Video4:04
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Fixing the Key Warning

Higher Ed
Let's learn more about the "Each child in a list should have a unique key prop" warning, which happens in React when you create a list of elements without the unique key attribute.
Instructional Video6:14
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Installing React Router

Higher Ed
In this video, you will learn how to install the React router; the React Router can be installed through the NPM in our React application.
Instructional Video13:07
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Styling the Product List

Higher Ed
This video demonstrates how we can update and stylize the product list based on specific ecommerce store's sales criteria.
Instructional Video2:29
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Tidy the Fetch API Call

Higher Ed
Here, you will learn how to clean up the Fetch API, which provides a JavaScript interface for accessing and manipulating protocol parts, such as requests and responses.
Instructional Video8:33
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Dealing with Errors in Fetch API

Higher Ed
Let's understand how to deal with errors in a fetch API. If errors are encountered during a fetch() call, it is often necessary to halt the compiler from reading the next few lines of code, rectifying the code, and re-fetching the API.
Instructional Video8:57
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Refactor the Fetch API Call

Higher Ed
In this video, you will learn how to effectively handle the chaining of fetch calls to avoid nesting them together, clean up our component code, and abstract those details away from our component code.
Instructional Video8:12
Curated Video

AWS, JavaScript, React - Deploy Web Apps on the Cloud - Binding the Products

Higher Ed
In this video, we will explore binding products, which are articles that can be used as a graphical finishing or as an assembly item for other products.