商城小程序源码PHP开源版

我们可以使用以下方法创建一个实现购物系统的商城小程序，该按钮具有在ReactJS中添加项和减少商品数的功能。React的materialui有这个组件可供使用，并且非常容易集成。

        源码仓库：xcxyms.top
创建React应用小程序并安装模块：
第一步：使用以下命令创建React应用小程序。

npx create-react-app foldername

第二步：创建项目文件夹（即foldername）后,使用以下命令移动到它。

cd foldername

第三步：创建ReactJS应用小程序后，安装用户界面使用以下命令的模块。

　　npm install @material-ui/core
　　npm install @material-ui/icons

源码结构：如下图。

        实例：现在我们重写App.js文件，在这里App是我们编写代码的默认组件。

　　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>
　　);
　　}

运行商城小程序源码的步骤：使用以下命令从项目的根目录运行应用小程序。

npm start

输出：现在打开浏览器并转到localhost:3000/，您将看到以下输出。