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 をインストールします。

新しいアプリの作成

ここまですべての準備が整いました。さっそくアプリケーションを作成してみましょう。

VS Code で、ターミナル メニュー、新しいターミナル オプションを選択し、以下のように入力します。

  • npx create-react-app my-app-name --typescript

また

  • yarn create react-app my-app-name --typescript

この手順の詳細は、こちら (英語)を参照してください。

次に、VS Code で my-app-name フォルダーを開き、以下のコマンドを使用して、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

最後に、以下のコマンドでアプリケーションをビルドして起動することができます。

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

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

既存のアプリの更新

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

モジュールのインポート

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

import { IgrGeographicMap } from "igniteui-react-maps/ES5/igr-geographic-map";
import { IgrGeographicMapModule } from "igniteui-react-maps/ES5/igr-geographic-map-module";
import { IgrDataChartInteractivityModule } from "igniteui-react-charts/ES5/igr-data-chart-interactivity-module";

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

コンポーネントを使う

マークアップに GeographicMap を使用する準備が整いました。定義します。

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

アプリケーションの実行

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

  • npm run-script start

以下は、実行結果です。