How to create Shopping Cart Button in ReactJS?
Last Updated :
14 Dec, 2023
A shopping cart button is one of the most used component in e-commerce websites or applications which allows users to add items to their cart . In this tutorial, we will learn how to create a shopping cart button in ReactJS using Material-UI.Â
Prerequisites
Steps to create React Application And Installing Required Modules:
Step 1: Create a React application using the following command.
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.
npm install @material-ui/core
npm install @material-ui/icons
Project Structure
Project Structure
The updated dependencies in package.json file will look like:
"dependencies": {
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Javascript
import React from "react" ;
import ButtonGroup from "@material-ui/core/ButtonGroup" ;
import Badge from "@material-ui/core/Badge" ;
import ShoppingCartIcon from "@material-ui/icons/ShoppingCart" ;
import Button from "@material-ui/core/Button" ;
import AddIcon from "@material-ui/icons/Add" ;
import RemoveIcon from "@material-ui/icons/Remove" ;
export default function App() {
const [itemCount, setItemCount] = React.useState(1);
return (
<div style={{ display: "block" , padding: 30 }}>
<h4>How to create ShoppingCart Button in ReactJS?</h4>
<div>
<Badge color= "secondary" badgeContent={itemCount}>
<ShoppingCartIcon />{ " " }
</Badge>
<ButtonGroup>
<Button
onClick={() => {
setItemCount(Math.max(itemCount - 1, 0));
}}
>
{ " " }
<RemoveIcon fontSize= "small" />
</Button>
<Button
onClick={() => {
setItemCount(itemCount + 1);
}}
>
{ " " }
<AddIcon fontSize= "small" />
</Button>
</ButtonGroup>
</div>
</div>
);
}
|
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.
Share your thoughts in the comments
Please Login to comment...