React Shopping Cart For Absolute Beginners [2021]

[Music] hello and welcome to my coding course to build a shopping cart using only react framework this is a very basic tutorial for all developers who want to learn react in action at the end of this course you will learn the basics of react creating component composing component working with arrays method like map reduce and filter and use them in a react application that's what you will build at the end of this lesson to get the source code of this lesson visit this link and go to the small shopping cart folder also if you want to download all files what you need to do is to click on code and click on download zip the only requirement for this lesson is to know the basic html css and javascript and also the basics of react but if you don't know about react at all try this course i'm quite sure you will build this react application by yourself see you in the course in this lesson we are going to create a small shopping cart using only react this is the final version of this application and here you have a list of products here when you click on add to cart for a product it's gonna be added to the cart items it's another component that shows the product in the cart and you can use plus button and minus button to increase number of this product in your cart automatically item price tax shipping and total price will be calculated based on your change you can add more products like this and it shows the total price based on criteria in your business also there is a header component here that shows the cart items and there is a batch that shows number of product in your cart if you remove a product it's gonna change what we're gonna practice in this simple shopping cart is learning creating functional components rendering list in react using array map method using react hook to manage a state you know uh increasing and decreasing items in the card uh learning compose and extract components and using you know some css to style a shopping cart like this but the css part is too short don't worry about it our focus is on creating react components extracting components managing arrays of products and rendering them in the screen and at the end of this lesson you will learn the basic react in action and you can create your own shopping cart using this code template [Music] first of all open vs code and click on open folder go to desktop and create a folder for react course click create and click open so what we have is a folder react codes in desktop and we are going to put all projects in this folder to create the to create this app open terminal from terminal menu click on new terminal and then use this command to create react application npx create dash react dash app here i'm gonna set a name for this project it's gonna be small dash shopping dash cart and press enter if you get an error that mps does not exist it means that you did not install node.js so what we need to do is to just check node.js download and you will be redirected to this link and click based on your operating system click on windows linux and based on your operating systems download the node.js and install it it's super easy great command has been done and at this point we have a folder small shopping cart what i'm gonna do at the first step is to run this project type npm start type first of all we need to go the small shopping cart folder and run npm start to open this application and run npm start to start your application here is the result so our mission is to convert this application to this one so at the very beginning i'm going to create three components header main and basket let's go for them in the vs code go to src and here what i'm gonna do is to right click and create a folder for components inside components folder right click new file and create the first component the first letter of component should be capital here header h is capital for header components let's implement hiddle component together to create a component in react we need to import react from react first this is the first comma and the second command is exporting a function that accept props it's react functional component export default function name of function should be the name of file header and it accept props props are properties that comes from the parent component and there should be a return function and for return what i'm gonna return is just a div that shows header i'm not gonna you know complete this i'm going to just put header here that's it for main and basket copy and paste two times rename this to main and rename this to basket so i have three components here for basket rename header to basket and four and for main rename and for main rename header to main great i have three components here and it's time to go to app.js and use them get rid of the contents of app div i mean the header here and we are going to use three components the first one is header now when you type header auto import from components headers appear here if you press tab you will see a new line in line 3 and it automatically import header for you close it do the same for main and basket but because i'm going to put but because i'm going to put main and basket next to each other i need to create i need to wrap them in another div so create another div main auto imported and basket auto imported it's the structure of my react application save the basket and let's check the result i have header main and basket [Music] what i'm gonna do is to work on header and make the header like this ready great let's go for it in the header component i'm going to get rid of this and create a round bracket inside that create header a header is a html5 semantic tag i'm gonna use this because it's you know it's the standard way of creating header in html and then create a dev inside dev create a link and the link should point to current page inside link create h1 because it's the title or the name of the brand and it's very important small shopping cart second div contains two links cart and sign in anchor cart and another one anchor sign in we're not gonna implement sign in here it's just for demo if you check the result it's gonna be like this and it's not what we want we are going to convert that to something like this to do that i need to add some css [Music] css is not the main topic of this lesson so what i'm gonna do is to do that really fast and if you are interested to know more you need to learn about you know flicks and you know basic css styling open index.css and get rid of all code here set body and i'm going to set the font family to helvetica you know like this for h1 h2 and h3 set margin vertical margin to half a ram ram is a measurement for css instead of pixel we're gonna use ram because it's responsive and it respects the zoom level of the browser and the horizontal to zero after saving it's gonna get formatted for h1 set font size to 1.5 ram i'm going to make it small and for h2 set font size to 1.2 ram and for h3 set font size to one rim also for links i'm gonna set text decoration to noun i'm not gonna show blue underline for link and here is the main part of this css comms i need to create a row because i'm gonna show a brand and link next to each other not in separate lines to do that i'm using display flex and set justify content to a space between to create a space between brand name and header links also i'm going to create a column one column one means that the smallest column set flex to 1 and column 2 is the b column flex 2. also create a block class for black class what i mean by black glass is to create a round a gray background and also a round border so it should be background color to something gray light gray e0 create a padding bun and create margin heifer m also to create border radius make it half ram in the headers component i'm gonna set the headers class and also for row class set a subclass center and for center set align items to center to to align items vertically after having this go to header component and for header class and for header element set three classes it's a row it's black and it's center save it to create a space you need to put them in the same line and save it aha it creates space that's it the first step for creating headers is done and let's go for second step for main components open main component what i'm gonna do here is to get rid of main and create main element it's the html5 element to contain the main content of your website create h2 and set and set h2 to products it's gonna contains the products and create a div set class name of this div to row and here i need to enter the products but the thing is i don't have products right now i just keep it like this but what i'm gonna do is to set the main class to block and column two it means that it contains three two up three share of the width of a screen save it to format your code and go back to app.js and for the container div for main set class to row like this the next step is gonna be basket go to the basket for basket instead of having div element i'm going to have a side element a site is html5 tag to show sidebars for a site set two classes the first class is black to make it gray and rounded border and column one it means that it occupy one share of three share of the width of a screen create h2 card items here i need to put the card items here but because i don't have any item i'm going to keep it like this by having these changes let's check the result great here if you check i have the basic structure of the spawn shopping cart it contains a header like this products and cart items okay if you are ready let's go for the next step the next step is gonna be adding products for adding products i'm going to create a new file in src folder set file name to data.js and it's gonna contains the products for me for data.js define a constant set it to data and this data object contains products and products is an array and this array contains product information each product information is object and product information includes id of product i set the first one to one the name of product like macbook you can use your own price let's say 1 400 and the image for image i'm gonna use pixsom.photo url for a sample macbook you can use this or you can use your own one duplicate this two times and change the id to two and three change macbook to old car and set price to two third one w shoes and the price like this for the last product set this id and for the old card use this one at the end we need to export the fault data by creating sample products we can go to app.js and import them [Music] import data from data from data get rid of logo here we do not need that anymore also we do not need the app.css anymore it's time to use data in the app.js define products from data i'm using the constructing assignment to extract products from data i need to pass products to main components because main component is responsible to render products it's the way to do that products equal to products equal to products inside curly braces go to main.js and read that from props i'm getting products from props now that i have products here i can render products in the products in this div to render list of items in react we type the name of the array and use map method of array in the map method we define a arrow function that gets the product i mean each element of this array and convert that to js6 object here instead of using you know dev and image i'm gonna define a component and set the component name to product i need to implement that later for this component because i'm using map function i need to set the key to prevent error of duplicate key and set the key to product.id and pass product as a product to the product component that's it we need to implement products write click on component and click a new file and enter product.js here i need to create a functional component if you type rfc you will get a recommendation from es7 react redux graphql a snippet you can install this by clicking in this extension part and type that you know this one click on install if you don't have it and then you type rfc you get this recommendation and by pressing tab automatically you will have a empty component based on their file name good at this point i'm going to get product from props and we need to set props as a parameter for product in this div i'm gonna render a product thumbnail set image and set class name of image to a small we're gonna have a small image we need to implement a small class in index.css later set source of image to product.image and set alternative text to product.name close the image after image it's time to create product name create h3 to respect the ceo and inside that entire product name after that we need to show product price create a dev put a dollar sign because it's price product dot price and close the curry braces and the last one is a div and inside that create a button for button set on click you know the c of one click is capital it's very important create a button and for button set add to cart we need to implement this action later great let's go to index.css and for image that is small set maximum width of image data small to 8 rim max with a trim save it go back to main.js and press control space to get recommendation for auto import product press tab to import it and in the data.js fix the typo in product put u here save it and in the index.css for image make it img the element name is img and change the max width to max height by having this change let's check the results aha we have list of products here and if you compare that with the final one they are very similar to each other let's add style for button i'm not gonna explain each line for styling the button but here is the code of styling because this lesson is not about css but what i did is to set the font size create a padding and margin create a border radius change the color of border and set the background color and make it full width and change the cursor to pointer save it aha very similar to each other now that we have this uh the shopping cart is not functional if you click add to cart it's not gonna work and you cannot see anything here or here since this point we are going to work on the state of this component make it dynamic let's go for it before going for that let's add three classes for button add it's the add button remove button and the batch i just change the background color and the width and to make them beautiful in the ui and the last class is text write to create right align text [Music] in the app.js i am going to define a state to manage cart items to define an estate in a functional component we need to use use state user state is a hook to implement state in functional component define const define cart items as a hook and set card items to change the value of card items and it's comes from use state select this one and press tab to import use state from react create a pair of round brackets and we need to set the default value for card items for sure it's an empty array it means that the card items is empty we need to pass card items to the basket copy this and paste it here cart items and create a pair of round bracket and paste card items here by passing this if you go to the basket you can fetch card items from props and here you need to create a div and create a conditional rendering if card items dot length equal to zero then render the step card is empty and close the dev let's check it yes it says cart is empty very similar to this one but here we are going to implement add to cart here when you click on add to cart a new item will be added to the cart we are going to implement that here first of all go to app.js and in the app function we are going to define a function to add to cat set the name of function to on add because it's like an event handler and i start with on and add is the add to cat this function accepts the product that need to be added to the hat and for the body of this function first of all i need to define exist exist is a variable that check cart items and try to find an item that its id is equal to the id of the product that i need to add if exists then so if the product exists what i need to do is to find that product inside that inside cart items and increase the quantity of that product if it's one i need to make it to to do that i'm gonna use map function so use set card items because i'm gonna update card items and the new value is card items and the mapped version of it in the mapped version i need to keep all car i need to keep other products same but only current product i mean the product with current id i need to update the quantity of it so in this function there should be a comparison i compare the id of each item in cart item with the id of product that need to be updated and if it's true i need to put this value instead of current element dot dot exist and for qty quantity use exist dot qty plus one if it's another product then use the use that you know don't change that save it to format your code let's go for the else part in the else part the product does not exist in the cart so i need to add it to add it set card items and use array concatenation dot dot dot card items you know i deconstruct the items in the card items array and join it with dot dot products and set qty variable to one because at the very first time the qty of product should be one save the file and that's all about on add i need to pass on add function to both basket and main because we use them there on add equal to on add and here is on add equal to on add go to main function and go to the product component inside product component when user click on add to cart i need to handle that and click equal to on add and i need to define an add as a property of props so for product i'm using on add props in the parent component of product i need to pass on add the parent of products is main so here i need to pass on at equal to on add i need to get an ad from props that's it if you check the path of passing on add you can see that in the main container of this react application we passed on add to main at this point inside main component we passed on add to product at this point and in the third level component we have used that for this button let's go to app.js for basket we are passing on add to the basket go to basket component and here get on add here and we are going to use that for plus button okay at this point i'm going to implement items in the cart items let's go for it in the basket use card items dot map to render list of elements and for each item i'm gonna render a div for this dev set id set key to cat.id to prevent error for dev set key to item dot id to prevent unique error and set class name to row because we are going to create a row to put product name buttons and price in this dev the first column is for item name item dot name second column is buttons button and click to add but here i need to use arrow function style to pass item to the add function and set class name to add to make it blue and put a plus sign here duplicate that for minus remove and the function is gonna be on remove but the thing is we did not implement it on remove i just put it right here and then i need to implement that great save it to format your code after buttons div create another div and this div is gonna show item dot qty and you know a multiply sign and put dollar sign to show item dot price and format it using two fixed two and it's gonna show that with two decimal points great let's add style four divs the item dot name div should be column two do the same for this one and this one but for the last one we are going to make it a line from right because they are prices after setting two fixed here the next step is gonna be in product component and here after setting this what we did for add button here i'm going to copy this go to product.js and paste it right here for add to cart button and change item to product let's check the results click add to cart aha you have product name here plus and minus button and quantity and price if i click on add it's gonna be 2 3 but the minus will get an error let's implement the minus one in the app.js right after an ad define on remove it accepts the product that need to be removed and in the body of this function what i'm gonna do is to get the product from cart items const exists equal to cart items dot find in the cart items search for a product with the id of product dot id if it does exist then if it exist then here i need to have an if condition if exist.qty equal to 1 it means that i need to remove this product because the current quantity is one and user want to decrease the quantity and it should be removed from list sit card items and cart items i'm to remove i'm using filter method and for filter method i check i return a boolean value that compares the id does not equal to product dot id so what it does if the product if the product does not equal to cart items then we remove then we'll return them because it's gonna get true otherwise we remove them by running this this product will be removed from cart item otherwise let's say the quantity is 2 3 what i need to do is to decrease the quantity if you check this code and if i paste it right here i can change plus to minus that's it if in the cart item the product exists then change the quantity to quantity minus 1 otherwise keep that product here is the on remove function and i'm gonna pass on remove to basket and go to basket component and here we are using on remove for minus let's test it click on add minus for this one it should be three two one and the card is empty okay the add and remove functionality have been done [Music] and the last part is about the order summary let's implement order summary here go to the basket and in the basket right after extracting props we need to define four variables the first one is items price for calculating the subtotal the item's price we need to use reduce function on card items card items dot reduce reduce accept to parameter accumulator and current item and what i can what i'm gonna return is to sum of accumulator and current item.price multiply by current item.quantity and set the default value for accumulator to zero based on that we can calculate the tax price i'm gonna use a simple rule here just items price multiplied by 0.14 0.14 it's 14 percent for tax price the next one is gonna be shipping price for shipping price you've you may have different policy what i'm gonna have is to check the item's price greater than 2000 then make it free otherwise make it 50 bucks and the last one is gonna be total price total price is simply sum up items price tax price and shipping price that's it let's use them right after the last div create a conditional rendering if cart items dot length does not equal to 0 it means that if it's greater than 0 then render the summary part for summary part create an empty container and create an hr to you know separate this part from the card items the first step which is gonna be a row contains a label for items price and the value which is going to be items price dot 2 fixed to the small point put a dollar sign before that set class name for this one to call 2 and set a class name for this to call one and make it text right it's gonna be right aligned i'm going to duplicate this dev for tax shipping and total renamed it tax shipping and total for total make it strong because it's the most important part and also for the value here and change the value to total price shipping to shipping price and tax to tax price you see the result here if i click on add multiple times it's gonna get increased if i click on minus it's gonna work and if you make it zero there is no summary at all [Music] okay the last part of this lesson is about badge in the cart like here when you add a new product it's gonna get increased to implement that go to app.js and for header component set a property count card items and the value is card items.length go to header and here get count card items from props and at this point what i'm gonna do is to create lines before and after this link and right after that create an empty space and check can't cart items if it does exist it means that it's not zero then render this a button set class of button to batch and set value of button to count card item otherwise we need to render empty string save it to format and let's check the results you know it works perfect if it's empty there is no badge here when you add the first product it's gonna be one second two third three but by adding products it's not gonna change because it counts the number of items in the cart [Music] let me add the checkout button at the end of it it is very simple in the basket at the very end you can create a separator here and create a dip set class of dev to row inside that create a button and for unclick you just need to alert implement checkout and set the title to checkout save it and that's it it's the checkout button that need to be implemented for checkout the ideas can be creating a new form here to get user name address and email and phone numbers and then user click on finalizing checkout user will be redirected to let's say a paypal payment gateway and make the payment and use email you know sender like mail gun to send the email to the user for this order [Music] that's it about this lesson we implemented a very simple shopping cart using react and what we have learned is a composing component is uh transferring and passing data between components and you know working with array functions we have used map function filter function and reduce function in the total price calculation and that's about it and that's all about react application i hope you can get more ideas from this project and you know improve that there are some improvement point that you can handle okay that's it about this lesson until next lesson bye-bye

Channel: Coding with Basir

Views: 47,728

Rating: 4.9147358 out of 5

Keywords: codingwithbasir, coding, programming, tutorial, amazona, html, css, javascript, react, redux, node, express, mongodb

Id: AmIdY1Eb8tY

Length: 46min 24sec (2784 seconds)

Published: Mon Nov 23 2020