Ignite UI for React 패키지 개요

    Ignite UI for React는 React를 위한 포괄적인 UI 구성 요소, 디자인 툴킷 및 지원 서비스 제품군입니다. 개발자가 데스크톱 브라우저, 모바일 경험 및 프로그레시브 웹 앱(PWA)을 위한 최신 고성능 React 애플리케이션을 만들 수 있도록 구축된 Ignite UI for React는 최신 React 모범 사례와 API를 활용합니다.

    Charts & Graphs

    Ignite UI for React 에는 65+ 유형의 차트 시리즈 및 조합을 통해 모든 유형의 데이터를 멋진 대화형 차트 및 대시보드로 시각화할 수 있는 차트 및 그래프 라이브러리가 포함되어 있습니다. 속도와 아름다움을 위해 제작되었으며 모든 최신 브라우저에서 작동하도록 설계되었으며 완벽한 터치와 상호 작용을 통해 모든 장치에서 반응형 비주얼을 빠르게 구축할 수 있습니다.

    게이지

    Ignite UI for React 데이터를 쉽고 직관적인 방법으로 설명하는 데 사용되는 방사형 게이지, 선형 계기 및 Bullet Graph 구성 요소를 제공합니다. 방사형 게이지 에는 미리 정의된 모양과 스케일을 만들기 위해 다양한 사용자 정의 옵션이 있습니다. 이 선형 계기는 척도 및 하나 이상의 범위와 비교한 값에 대한 간단한 보기를 제공합니다. 하나의 눈금, 하나의 눈금 표시 세트 및 하나의 레이블 세트를 지원합니다. 글 머리 기호 그래프 구성 요소는 데이터 시각화를 생성하여 대시보드에서 사용되는 미터와 게이지를 간단한 막대 차트로 대체할 수 있습니다.

    지도

    Ignite UI for React 지리 지도는 애플리케이션에서 지리 데이터를 시각화하는 기능을 제공합니다. 많은 지리적 위치로 구성된 데이터 세트를 마커, 선, 다각형 또는 대화형 비트맵 모양으로 렌더링할 수 있습니다. 이를 통해 여러 지도 레이어를 지리 데이터로 오버레이하고, 특정 지리적 위치를 표시하고, 사용자 정의 마커와 색상을 사용하여 정보를 표시할 수 있습니다.

    Grids & Inputs

    Ignite UI for React 데이터 그리드, 목록, 트리 및 스프레드시트 형태로 거의 구성하지 않고 데이터를 바인딩하고 표시할 수 있는 여러 그리드 구성 요소를 제공합니다. 또한 필터링, 정렬, 그룹화, 고정 등과 같은 기능을 제공합니다.

    Buttons, Inputs, Layouts & Menus

    Ignite UI for React 다양한 유형의 버튼, 입력, 메뉴 및 레이아웃을 제공하여 종속성 없는 접근 방식으로 캡슐화 및 재사용 가능한 구성 요소 개념을 사용하여 최신 웹 애플리케이션을 빌드할 수 있는 기능을 제공합니다. 여기에서 동화책을 참조하십시오. 이러한 구성 요소는 Indigo Design System 기반으로 하며 App Builder에서 완벽하게 지원되며 Sketch, Adobe XD 및 Figma에 즉시 사용할 수 있는 UI 키트로 지원됩니다.

    Ignite UI for React 시작하기

    Install IgniteUI CLI

    애플리케이션을 처음부터 생성하고 Ignite UI React 사용하도록 구성하려면 Ignite UI CLI를 사용할 수 있습니다. 첫 번째 단계는 다음과 같이 각 패키지를 전역적으로 설치하는 것입니다.

    npm install -g igniteui-cli

    사용 가능한 옵션을 통해 안내 경험을 얻으려면 새 애플리케이션을 생성하고 설정하는 데 도움이 되는 단계별 모드를 초기화할 수 있습니다. 가이드를 시작하려면 ig 명령을 실행하면 됩니다.

    ig

    그런 다음 프레임워크로 React를 선택하고, 유형으로 TS를 React 하고, 프로젝트 템플릿을 선택 Default Top Navigation 하고, 특정 구성 요소/뷰를 추가하거나, 선택합니다. Complete & Run 또한 여기에서 Ignite UI CLI에 대해 자세히 알아볼 수 있습니다.

    또는 React 팀에서 권장하는 대로 Next.js, Vite 또는 Expo와 같은 널리 사용되는 프레임워크를 사용할 수 있습니다. 다음은 이러한 방법 중 하나를 사용하여 Ignite UI React 사용하여 React 애플리케이션을 만드는 단계별 지침입니다.

    Prerequisites

    1. NodeJS를 설치합니다.
    2. 비주얼 스튜디오 코드를 설치합니다.

    Creating New React Project

    위의 필수 구성 요소가 설치되면 새로운 React 애플리케이션을 만들 수 있습니다.

    1 -VS Code를 열고 터미널 메뉴를 선택한 다음 새 터미널 옵션을 선택합니다.

    2 - 터미널 창에 다음 명령 중 하나를 입력합니다.

    npx create-next-app@latest

    그런 다음 프롬프트에 따라 프로젝트 이름, Typescript 사용 여부 및 React 제공하는 다양한 기타 옵션을 선택합니다. 이 예 npx 에서는 필수입니다 create-next-app. React 응용 프로그램을 상용구로 만드는 다양한 방법에 대한 자세한 내용은 이 항목을 참조하십시오.

    Updating Existing App

    기존 React CLI 프로젝트(이전에 가지고 있는 프로젝트)에서 Ignite UI for React 사용하고 싶다면, 저희가 해결해 드리겠습니다! 다음 명령을 실행하기만 하면 됩니다.

    npm install --save igniteui-react
npm install --save igniteui-react-charts igniteui-react-core
npm install --save igniteui-react-excel igniteui-react-core
npm install --save igniteui-react-gauges igniteui-react-core
npm install --save igniteui-react-grids igniteui-react-core
npm install --save igniteui-react-maps igniteui-react-core
npm install --save igniteui-react-spreadsheet igniteui-react-core

    또는

    yarn add igniteui-react-charts igniteui-react-core
yarn add igniteui-react-excel igniteui-react-core
yarn add igniteui-react-gauges igniteui-react-core
yarn add igniteui-react-grids igniteui-react-core
yarn add igniteui-react-maps igniteui-react-core
yarn add igniteui-react-spreadsheet igniteui-react-core

    이렇게 하면 기존 프로젝트에 대한 Ignite UI for React 패키지와 모든 종속성, 글꼴 가져오기 및 스타일 참조가 자동으로 설치됩니다.

    Importing Component Modules

    먼저 사용하려는 구성 요소의 필수 모듈을 가져와야 합니다. 계속해서 GeographicMap 구성 요소에 대해 이 작업을 수행하겠습니다.

    import { IgrGeographicMapModule, IgrGeographicMap } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';

IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();

    Using Components

    이제 마크업에서 Ignite UI for React 맵 구성 요소를 사용할 준비가 되었습니다! 계속해서 정의해 보겠습니다.

    // App.txs
function App() {
  return (
    <div style={{ height: "100%", width: "100%" }}>
      <IgrGeographicMap
        width="800px"
        height="500px"
        zoomable="true" />
    </div>
  );
}

    Running Application

    마지막으로 다음 명령 중 하나를 사용하여 새 애플리케이션을 실행할 수 있습니다.

    npm run-script start

    이 명령을 실행하면 프로젝트가 빌드되어 컴퓨터에서 로컬로 제공됩니다. 기본 브라우저에서 자동으로 열리고 프로젝트에서 Ignite UI for React 사용할 수 있습니다. 최종 결과에는 대화형 세계 지도가 표시됩니다.