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
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
// App.js 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.
How to create Shopping Cart Button in ReactJS?
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.
Contact Us