设置 UI 工具包

在 项目规划与设置 中，我们为 Project Mini-Mek 列出了功能清单并绘制了部分 UI 原型图，使用 Create-React-App 创建了一个新项目，添加了基础的 Redux 配置，并启用了热模块替换（Hot Module Replacement），以便在不刷新整个页面的情况下实时查看 UI 变化。在本节中，我们将搭建初始应用布局以匹配我们的 UI 原型图，讨论文件夹结构设计，并通过一个示例展示如何使用 Redux 管理 UI 状态。

选择 UI 工具包

目前市面上存在数量庞大的 Web UI 工具包和 CSS 框架，其中 Bootstrap 及其变体可能是最流行的。我在另一个项目中一直使用 Semantic-UI，并且非常满意。它开箱即用的外观效果出色，标记语言清晰易读，并支持高度定制化的主题配置，包括按钮等组件的多种内置主题选项。

Semantic-UI 包含两个主要部分：仅用于样式的 CSS 内容，以及实现更智能控件（如 Dropdown 组件的 AJAX 获取功能）的逻辑。原始框架依赖 jQuery 来实现其智能控件。

你可以在 React 应用中直接使用 Semantic-UI 而无需额外工具或库。只需在页面中引入其 CSS 文件，并渲染类似 <div className="ui label">I'm a Semantic-UI label!</div> 的标记即可正确应用样式。然而，作为 React 开发者，我们更倾向于将事物视为封装良好的组件，而不是底层标记。此外，大多数 React 项目并不需要 jQuery，因此为了某些 SUI 控件的交互性而引入 jQuery 是我们希望避免的。

幸运的是，除了核心的 Semantic-UI 项目外，官方还提供了 Semantic-UI-React 库。它提供了与 Semantic-UI 所有 UI 元素相对应的 React 组件。SUI-React 的组件像其他 React 组件一样接受 props，并自动处理正确的标记和类名渲染。更重要的是，所有交互式控件都已重写为仅使用 React 和原生 JavaScript 实现，完全不再依赖 jQuery。因此，我们将使用 Semantic-UI-React 来进行 UI 布局和样式设计。

需要注意的是，Semantic-UI-React 仅负责生成正确的标记并添加额外逻辑。为了让这些标记真正影响视觉呈现，我们仍需引入 Semantic-UI 的 CSS。Semantic-UI 自带构建系统，可用于生成自定义主题，但为了简化流程，我们将直接使用 semantic-ui-css 包，它提供了一个预构建完成的完整 Semantic-UI CSS 输出版本。

设置 Semantic-UI

我们的第一步是将 semantic-ui-react 和 semantic-ui-css 添加到项目中：

1yarn add semantic-ui-react semantic-ui-css

通常，添加新包会更新 package.json（列出直接依赖的版本）和 yarn.lock（列出所有递归依赖的解析版本）。由于我们已启用“离线镜像”功能，还会在 ./offline-mirror 文件夹中看到一些新增的文件。这些是 Yarn 从 NPM 下载的包压缩文件，被复制到了我们配置的离线缓存中。我们需要将这些文件加入 Git，确保任何克隆和设置该项目的人都能获取它们。

1git add package.json yarn.lock offline-mirror

提交 30a0820：添加 Semantic-UI-React 和 Semantic-UI-CSS

接下来，我们需要在代码中导入主 Semantic-UI CSS 文件，使其包含在打包结果中。同时，我们也应该渲染一个单一的 Semantic-UI <Header> 组件，以确认其正常工作。

提交 73fd477：渲染初始 SUI 组件

index.js

1import {Provider} from "react-redux";
2
3-import './index.css';
4+import "semantic-ui-css/semantic.css";

App.js

1import React, { Component } from 'react';
2import {Header} from "semantic-ui-react";
3
4import './App.css';
5
6import SampleComponent from "./SampleComponent";
7
8class App extends Component {
9    render() {
10        return (
11            <div className="App">
12                <div className="App-header">
13                    <Header inverted as="h1">Project Mini-Mek</Header>
14                </div>
15                <SampleComponent />
16            </div>
17        );
18    }
19}
20
21export default App;

顺带一提，我们可以移除之前创建的示例组件及其关联的测试 reducer，因为不再需要；同时对项目初始化时生成的原始 CSS 和 HTML 进行清理（例如移除旋转的 Logo 图标，并缩小头部栏的尺寸）。

提交 7180805：移除未使用的代码和文件

清理完示例代码后，我们的初始空 UI 现在看起来如下：

太棒了——一条黑色横条配上白色文字！是不是很激动？:) 别担心，接下来我们会逐步添加更多内容。