Ignite UI for React を使用した作業の開始

Ignite UI for React は、最新のデスクトップ ブラウザー対応の高パフォーマンス HTML 5 および TypeScript アプリケーションを構築するために設計された React コンポーネントのコンプリート セットです。

Ignite UI for React を実行する前に、Ignite UI for React を含むすべての React アプリケーションを実行するためにシステムでセットアップする必要のあるステップが 2 つあります。最初にシステムに NodeJS と Visual Studio Code をインストールします。React を使用した最新の Web 開発には NodeJS が必要で、これはブラウザーで実行されている ASP.NET アプリケーションのようなもので、サーバーに ASP.NET ランタイムを配備する必要があります。また React アプリケーションを構築するための開発環境は、 Visual Studio Code が最も適しているため、作業を開始する前に Node.js と Visual Studio Code をインストールします。

以上ですべて準備が整いました。新しい React アプリケーションを作成しましょう。
VS Code で、ターミナル メニュー、新しいターミナル オプションを選択し、ターミナル ウィンドウで以下のコマンドを入力します。
npx create-react-app my-app-name --typescript
また
yarn create react-app my-app-name --typescript
以上のコマンドについての詳細はこちらを参照してください。

既存アプリの更新

既存の React CLI プロジェクト (以前のもの) で Ignite UI for 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 のパッケージが、それらのすべての依存関係、フォントのインポート、および既存のプロジェクトへのスタイル参照と共に自動的にインストールされます。

アプリの起動

次のコマンドでアプリケーションをビルドまたは起動することができます。

  • npm run-script build
  • npm run-script start

シンプルなコマンドを実行した後、プロジェクトがビルドされて提供されます。これでデフォルトのブラウザーで自動的に開き、プロジェクトで Ignite UI for React コンポーネントを使用できるようになります。

モジュールのインポート

はじめに、使いたいコンポーネントの必要なモジュールをインポートします。GeographicMap に対してこれを行います。

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

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

コンポーネントの使用

マークアップに Ignite UI for React マップ コンポーネントを使用する準備が整いました。以下のように定義します。

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

アプリケーションの実行

以下のコマンドを使用して新しいアプリケーションを実行できます。

  • npm run-script start

以下の画像は、上記を実行した結果です。