10、构建多视图 React 单页应用：美食订购系统实战

构建多视图 React 单页应用：美食订购系统实战

1. 项目概述

我们要创建一个多视图的 React 单页应用，模拟一个小型美食店的在线订购系统。顾客可以在线订购美食，到店自提并现金支付。整个应用包含三个核心组件： App 、 Foods 和 FoodOrder ，下面将详细介绍创建步骤。

2. 创建 React 项目

2.1 初始化项目

假设你的 VS Code 终端当前位于 just-react 文件夹，执行以下操作：
1. 回到根文件夹： cd..
2. 创建名为 just-food 的 React 项目： npx create-react-app just-food
3. 在 VS Code 中打开项目文件夹：通过 File ➤ Open Folder 打开。

2.2 配置 App.js

在 src 文件夹下的 App.js 文件中，定义美食项目及其数量。以下是代码：

import "./App.css";
import React, { useState } from "react";
const App = () => {
    const [menuItems, setMe