Fluent UI React v9 시작하기

Fluent은 접근성, 국제화 및 성능이 포함된 매력적인 제품 경험을 만드는 데 필요한 프레임워크를 디자이너와 개발자에게 제공하는 오픈 소스 크로스 플랫폼 디자인 시스템입니다.

Fluent UI React v9은 Teams 앱, Office 추가 기능과 같은 Microsoft 365 플랫폼용 React 개발에 중점을 둔 UI 라이브러리이며 웹 앱 개발도 함께 합니다.

다음은 라이브러리의 최신 버전을 시작하고 실행할 수 있는 빠른 자습서입니다.

이 자습서에서는 Create React App과 같이 React 프로젝트가 실행 중이고 일부 UI 구성 요소를 추가할 준비가 되었다고 가정합니다.

1. npm 패키지 설치

선호하는 패키지 관리자를 사용하여 구성 요소 제품군 패키지를 설치합니다.

npm

npm install @fluentui/react-components

실

yarn add @fluentui/react-components

2. FluentProvider 및 테마 추가

AFluentProvider 및 aTheme는 UI 구성 요소가 제대로 렌더링되도록 올바른 시각적 컨텍스트를 제공하는 데 필요합니다. 이것이 없으면 구성 요소에 시각적 개체가 없습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { FluentProvider, webLightTheme } from '@fluentui/react-components';

import App from './App';

ReactDOM.render(
  <FluentProvider theme={webLightTheme}>
    <App />
  </FluentProvider>,
  document.getElementById('root'),
);

3. 구성 요소 추가

Fluent UI React v9에는 두 가지 범주의 구성 요소가 있습니다.

안정적 - Semantic Versioning에 따라 버전이 지정되는 안정적인 API가 포함된 구성 요소입니다. 이들은 최상위 패키지에서 내보냅니다.

미리보기 - 변경될 수 있거나 완전한 기능 세트가 없을 수 있는 API가 포함된 구성 요소입니다. 이러한 구성 요소는 /unstable 심층 가져오기에서 내보냅니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { FluentProvider, webLightTheme, Button } from '@fluentui/react-components';
import { Select } from '@fluetui/react-components/unstable'; // Preview components deep import

ReactDOM.render(
  <FluentProvider theme={webLightTheme}>
    <Button appearance="primary">Hello World!</Button>
    <Select>
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
    </Select>
  </FluentProvider>,
  document.getElementById('root'),
);

이것이 Fluent UI React v9 사용을 시작하는 데 필요한 전부입니다.

https://react.fluentui.dev에서 더 많은 코드 샘플을 확인하고 GitHub에서 최신 정보를 확인하는 것을 잊지 마십시오.

마지막으로 전체 CodeSandbox는 다음과 같습니다.


즐기다!