Ignite UI for React 시작하기

이 주제에서는 Ignite UI for React 사용하여 React 애플리케이션을 만드는 단계별 지침을 제공합니다.

Prerequisites

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

노드 다운로드

VS 코드 다운로드

Creating New React Project

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

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

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

npx create-react-app MyAppName --typescript
cmd

yarn create react-app MyAppName --typescript
cmd

접근 방식에 npx​ ​yarn 따라 또는 필요할 수 있습니다. 위의 명령에 대한 자세한 내용은 이 웹 사이트를 참조하십시오.

cd MyAppName
cmd

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
cmd

또는

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
cmd

이렇게 하면 기존 프로젝트에 대한 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();
ts

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>
  );
}
tsx

Running Application

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

npm run-script start
cmd

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// for handling of maps events
import { IgrRectChangedEventArgs } from "@infragistics/igniteui-react-core";
import { IgrGeographicMapModule } from "@infragistics/igniteui-react-maps";
import { IgrGeographicMap } from "@infragistics/igniteui-react-maps";
import { IgrOpenStreetMapImagery } from "@infragistics/igniteui-react-maps";
import { IgrDataChartInteractivityModule, IgrSeriesViewer } from "@infragistics/igniteui-react-charts";

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

export default class MapDisplayImageryOSM extends React.Component<any, any> {

    public geoMap: IgrGeographicMap;

    constructor(props: any) {
        super(props);

        this.onMapRef = this.onMapRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container" >
                    <IgrGeographicMap
                        ref={this.onMapRef}
                        // actualWindowRectChanged={this.onMapWindowRectChanged}
                        width="100%"
                        height="100%"
                        zoomable="true"/>
                </div>
                <div className="overlay-bottom-right overlay-border">Imagery Tiles: @OpenStreetMap</div>
            </div>
        );
    }

    public onMapRef(geoMap: IgrGeographicMap) {
        if (!geoMap) { return; }

        const mapImagery = new IgrOpenStreetMapImagery();
        geoMap.backgroundContent = mapImagery;

        const geoRect = { left: -150.0, top: -60.0, width: 315.0, height: 140.0 };
        geoMap.zoomToGeographic(geoRect);
    }

    public onMapWindowRectChanged(viewer: IgrSeriesViewer, e: IgrRectChangedEventArgs) {
        let geoMap = viewer as IgrGeographicMap;
        // const rect = e.newRect;
        // console.log("win \n left:" + rect.left +
        // ", top:" + rect.top + ", width:"  + rect.width + ", height:"  + rect.height);

        // const geo = geoMap.getGeographicFromZoom(rect);
        // console.log("geo \n left:" + geo.left +
        // ", top:" + geo.top + ", width:"  + geo.width + ", height:"  + geo.height);
    }

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MapDisplayImageryOSM/>);
tsxコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.