当前位置：首页 > ai >正文

第八部分：第一节 - 初识 React：构建交互式点餐界面骨架

ai 2025/6/29 10:32:55

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook (现 Meta) 开发和维护。它不是一个完整的框架（比如 Angular 或 Vue 也是框架），它只专注于视图层。但结合其他库，它可以构建复杂的单页面应用 (SPA)。

为什么选择 React?

声明式 UI (Declarative UI): 你只需要描述 UI 在不同状态下应该是什么样子，React 会负责高效地更新 DOM 来匹配你的描述。这就像你只需要告诉前台系统，“当顾客点了宫保鸡丁后，在订单列表里加上这一项，总价更新”，系统自己会处理如何修改屏幕显示。这比命令式地一步步操作 DOM (用原生 JS 获取元素、修改样式、添加子元素等) 要简单直观得多。
组件化 (Component-Based): React 应用由独立的、可复用的 UI 组件构成。每个组件管理自己的状态，并通过清晰的接口 (Props) 与其他组件交互。这就像餐厅前台的显示屏、点餐按钮、支付终端都是一个个独立的“组件”，可以单独设计、开发、测试，然后在不同的地方重复使用和组合。
高效的性能 (Virtual DOM): React 使用虚拟 DOM (Virtual DOM) 来优化页面更新。它会在内存中维护一个 UI 的虚拟表示，当状态改变时，先计算出虚拟 DOM 的差异，然后只更新实际 DOM 中需要改变的部分。这大大减少了不必要的 DOM 操作，提高了性能。就像前台系统只更新屏幕上需要变化的那一小块区域，而不是整个刷新。
庞大的生态系统和社区： React 拥有非常活跃的社区和丰富的第三方库，几乎你能想到的任何功能都有现成的解决方案。

JSX (JavaScript XML):

JSX 是 React 的一个语法扩展，它允许你在 JavaScript 代码中编写类似 HTML 的结构。React 会将 JSX 代码“转换”成 JavaScript 函数调用来创建 React 元素。

// 普通 JavaScript 创建 React 元素 (繁琐)
// const element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');// 使用 JSX (更直观)
const element = <h1>Hello, world!</h1>;// 在 JSX 中嵌入 JavaScript 表达式，使用大括号 {}
const name = 'React';
const greeting = <h1>Hello, {name}!</h1>;// JSX 可以表示复杂的结构
const elementWithDiv = (<div><h1>欢迎来到 React!</h1><p>这是一个段落。</p></div>
);

JSX 看起来像 HTML，但它实际上是 JavaScript。要注意一些区别，比如在 JSX 中使用 className 代替 HTML 的 class，使用 htmlFor 代替 for 等，因为 class 和 for 是 JavaScript 的保留关键字。

设置 React 开发环境：

构建现代 React 应用需要一些工具，比如打包工具 (Webpack, Vite) 和编译器 (Babel) 来处理 JSX 和新版 JavaScript 语法。从零开始配置这些工具比较复杂，幸运的是，官方或社区提供了开箱即用的脚手架工具：

Create React App (CRA): 官方推荐的入门工具，帮你配置好一切，无需关注复杂的构建细节。注意： 虽然依然可用，但 CRA 现在处于维护模式，官方推荐使用其他工具。
Vite: 一个更快、更现代的前端构建工具，对 React 有原生支持，通常比 CRA 启动和构建速度更快。现在是创建新 React 项目更推荐的选择之一。
Next.js / Remix: 更进一步的全栈框架，基于 React，提供了服务器端渲染、路由、API 路由等更多功能，适合构建更复杂的应用。

我们将在教程中以 Vite 为例来创建项目，因为它更轻量、启动快，适合学习。

使用 Vite 创建 React 项目：

确保你安装了 Node.js (建议 14.0 或更高版本)。

npm create vite@latest my-react-app --template react
# 或者 yarn create vite my-react-app --template react
# 或者 pnpm create vite my-react-app --template react

在这里插入图片描述

执行命令后，CLI 会引导你完成项目创建。选择 react 模板。创建完成后：

cd my-react-app
npm install  # 安装依赖
# 或者 yarn install
# 或者 pnpm install

在这里插入图片描述

安装依赖后，启动开发服务器：

npm run dev
# 或者 yarn dev
# 或者 pnpm dev

在这里插入图片描述

这会启动一个开发服务器，通常在 http://localhost:5173 (或其他端口)。在浏览器中访问这个地址，你会看到 Vite 和 React 的欢迎页面。
在这里插入图片描述

项目结构概览：

使用 Vite 创建的 React 项目结构通常比较简洁：

my-react-app/
├── src/             // 源代码目录
│   ├── assets/      // 静态资源
│   ├── App.css      // App 组件样式
│   ├── App.tsx      // 根组件 App (JSX 文件)
│   ├── index.css    // 全局样式
│   └── main.tsx     // 应用的入口文件
├── .gitignore
├── index.html       // 应用的 HTML 入口文件
├── package.json
├── vite.config.ts   // Vite 配置文件
└── README.md

在这里插入图片描述

index.html: 应用的入口 HTML 文件。它非常简单，只包含一个根 <div id="root"></div>，React 应用将挂载到这个 div 中。
src/main.tsx: 应用的 JavaScript/JSX 入口文件。它负责将根组件 (App) 渲染到 index.html 中的指定 DOM 元素 (#root) 中。
src/App.tsx: 应用的根组件，通常是我们开始编写应用 UI 的地方。

小例子：修改默认组件

打开 src/App.tsx 文件，你会看到默认的代码。将其修改为一个简单的欢迎消息：

// src/App.tsx
import './App.css'; // 如果不需要样式可以删除function App() {return (<div className="App"> {/* 注意使用 className */}<h1>欢迎来到我们的餐厅点餐系统!</h1><p>正在准备菜单...</p></div>);
}export default App; // 导出 App 组件

保存文件。由于 Vite 的热模块替换 (HMR)，页面会立即更新。
在这里插入图片描述

小结： React 是一个用于构建用户界面的 JavaScript 库，其声明式和组件化的特性使其非常适合构建复杂应用。JSX 允许在 JavaScript 中便捷地编写类似 HTML 的 UI 结构。Vite 是一个快速的工具，用于创建和启动 React 开发环境。

练习：

使用 Vite 创建一个新的 React 项目，命名为 my-restaurant-app。
进入项目目录，安装依赖并启动开发服务器。
打开 src/App.jsx 文件，修改其内容，使其显示你餐厅的名称和一个简短的标语。
在 src/App.jsx 中，尝试在一个 <h2> 标签中嵌入一个 JavaScript 表达式，比如显示当前年份 <h2>当前年份: {new Date().getFullYear()}</h2>。

查看全文

http://www.xdnf.cn/news/11922.html