React 的 Fluent UI 介绍和安装

Fluent UI是一个开源、跨平台的设计系统，它为设计人员和开发人员提供构建出色应用程序所需的框架。它是微软于 2017 年开发的一种设计语言。 Microsoft Office 365、OneDrive、Outlook、Azure 等产品使用 Fluent UI，以便所有应用程序在不同平台上看起来一致。如果您喜欢 Microsoft 应用程序的简洁外观，那么它是您应该使用的唯一一个库。在本文中，我们将安装 Fluent UI，并了解如何将其与 React.js 一起使用。

流畅的用户界面特点：

• 高度可定制。
• 最新的组件。
• 跨平台。
• 开源。

先决条件：

• 像（VS Code、Atom、Sublime 等）这样的代码编辑器。
• 应该安装 NodeJS。
• React.js 的基础知识。

让我们开始构建 React 应用程序。

创建一个 React 应用程序：

第 1 步：通过在终端中键入以下命令来创建一个 React 应用程序：

npx create-react-app fluentui-demo

第 2 步：现在，通过运行以下命令进入项目文件夹，即 fluentui-demo：

cd fluentui-demo

项目结构：它看起来像这样：

安装 Fluent UI：要安装 Fluent UI，请在您的工作目录中运行以下命令。

npm install @fluentui/react

文件名：App.js：这是我们应用程序中唯一包含所有逻辑的默认组件。在这里，我们将导入 Fluent UI 库并显示一个徽标和一些按钮。

Javascript

import './App.css';
import { DefaultButton, PrimaryButton } 
    from '@fluentui/react/lib/Button';
import { FontSizes } from '@fluentui/theme';
import { Icon } from '@fluentui/react/lib/Icon';
import { initializeIcons } from 
    '@fluentui/font-icons-mdl2';
  
function App() {
  
    // Initialization for Fluent UI Icons
    initializeIcons();
    return (
        

            
                Hello Geeks!
            
            

            
            

            

                
                    Default Button
                
                
                    Primary Button
                
            
        
    );
}
  
export default App;

输出：