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

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

    Note

    この GitHub リポジトリから Ignite UI for React を使用した React プロジェクトの例を取得するか、新しい 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 プロジェクトの作成

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

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

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

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

    モジュールのインポート

    はじめに、使いたいコンポーネントの必要なモジュールをインポートします。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
    

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

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