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

    このトピックでは、Ignite UI for React を使用して React アプリケーションを作成するための手順を説明します。

    前提条件

    1. NodeJS をインストールします。
    2. Visual Studio Code をインストールします。

    新しい React プロジェクトの作成

    前提条件のインストール後、新しい React アプリケーションを作成できます。

    1 - VS Code を開き、[ターミナル] メニューを選択してから、[新しいターミナル] オプションを選択します。

    2 - ターミナル ウィンドウに以下のコマンドのいずれかを入力します。

    npx create-react-app MyAppName --typescript

    yarn create react-app MyAppName --typescript

    アプローチに応じて、npx または yarn が必要になります。以上のコマンドについての詳細はこちらを参照してください。

    cd MyAppName

    既存アプリの更新

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

    モジュールのインポート

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

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

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

    コンポーネントの使用

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

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

    アプリケーションの実行

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

    npm run-script start

    コマンドを実行した後、プロジェクトがローカルでビルドされて提供されます。これでデフォルトのブラウザーで自動的に開き、プロジェクトで Ignite UI for React コンポーネントを使用できるようになります。最終結果には、インタラクティブなワールドマップが表示されます。