Microsoft Fluent UI React 入门

本文最初发表于此处。

您是否想过创建类似于 Microsoft 产品的用户界面？您听说过 Microsoft Fluent UI 吗？在本文中，我们将了解什么是 Fluent UI 以及如何将其集成到 React 应用程序中。

创造卓越的用户体验绝非易事。因此，大多数情况下，用户 UI 框架能够缩短开发时间并提高生产力。我们知道，谷歌的所有产品都使用名为 Material Design 的设计系统。此外，还有很多其他系统可供选择，例如 Semantic UI、Ant Design 等。因此，我们看到微软的 Outlook、Azure、Azure Devops 等产品都非常出色，而且 UI 也保持一致。因此，微软团队创建了一个名为Fluent Design System的设计系统。

什么是 Microsoft Fluent 设计系统？

根据 Microsoft文档：

Fluent 将原则性设计的基本原理、技术创新和客户需求融为一体。它是一种通过跨平台共享的开放设计系统来创造简洁性和一致性的集体方法。

Fluent 设计系统是一个完整的生态系统，包含众多组件和工具，可帮助用户在 Web、移动和桌面应用程序等所有平台上打造出色的用户体验。在本文中，我们将详细介绍 Web 版 Fluent UI。Web 版 Fluent UI 有两种版本：

• 流畅的 UI React
• 织物芯

织物芯

当我们想到其他 CSS 库（例如 Bootstrap）时，您会发现 Fabric 核心与它有很多相似之处。当您想让应用程序的外观和感觉与微软产品相似时，您可能会想到需要使用什么字体系列和字体大小，而所有这些都需要手动完成。

Fabric Core 是 CSS 类和 Sass mixins 的开源集合，可让您访问颜色、动画、字体、图标和网格。

Fabric Core 提供：

• 字体和排版
• 调色板
• 布局助手
• 动画助手
• 图标
• ETC。

Fabric Core 主要用于非 React 应用和静态页面。想要了解更多信息，可以查看此处的
文档。

流畅的 UI React

根据文献：

Fluent UI React 是官方开源的 React 前端框架，旨在打造无缝融入各种 Microsoft 产品的体验。它提供强大、最新、易于访问的组件，并可使用 CSS-in-JS 进行高度自定义。

Fluent UI React 包含 React JS UI 控件。它拥有许多类似库提供的控件集和功能，例如按钮、下拉菜单、网格、复选框等以及标准组件。它还包含 Microsoft 控件，例如日期选择器、人物选择器、角色等。

一些微软产品使用 Fluent UI React。

• 45 个其他 Microsoft 网站和产品

您可以在此处查看 github repo 。

创建新的 Fluent UI React 项目

创建 React 应用程序最常见的方式是使用由 React 团队创建的开发包 Create React App。

创建一个新的 React 项目：

 npx create-react-app fluent-ui-demo

一旦创建应用程序，我们就可以运行以下命令来添加 Fluent UI 依赖项：

cd fluent-ui-demo
npm i @fluentui/react

就是这样。

另一种方式是微软创建了一个与 Create React App 具有相同结构的启动器 repo。

因此克隆启动 repo

git clone https://github.com/microsoft/create-react-app-uifabric.git fluent-ui-demo
cd fluent-ui-demo

安装依赖项并启动应用程序。

npm install
npm start

现在打开 App.js 文件并从 @Fluentui/react 导入一个主按钮

import React from 'react';
import './App.css';
import { PrimaryButton } from '@fluentui/react';

function App() {
  return (
    <div className="App">
      <div className="App-header">
        <PrimaryButton>Button</PrimaryButton>
      </div>
    </div>
  );
} 

export default App;

运行应用程序以查看输出。

这只是一篇入门文章。下一篇文章我们将使用 Fluent UI React 创建一个简单的 Todo 应用程序。

结论

在本文中，我讲解了 Microsoft Fluent 设计系统，并讨论了 Fluent UI React。此外，我还演示了如何将 Fluent UI React 库添加到应用程序中。我衷心希望您喜欢这篇文章，并与朋友分享，也请随时给我发送您的想法或评论。

你可以在推特上关注我@sumitkharche01

编码愉快！！