Ignite UI for React を使用した作業の開始
Ignite UI for React は、Infragistics による React 向けの UI ウィジェット、コンポーネント、および Sketch UI キットの完全なセットです。開発者は、デスクトップ ブラウザー、モバイル エクスペリエンス、およびプログレッシブ Web アプリ (PWA) 向けのモダンで高パフォーマンスな HTML5 および JavaScript アプリを構築できます。
Ignite UI for React は、含まれるコンポーネントとサービスに応じて、MIT または商用ライセンスで利用可能な複数のパッケージで構成されています。コンポーネントとそのライセンスの詳細なリストについては、ライセンス FAQ とインストールおよびオープン ソースとプレミアム トピックを参照してください。
前提条件
- NodeJS をインストールします。
- Visual Studio Code をインストールします。
Ignite UI CLI の使用
アプリケーションを最初から作成し、Ignite UI React を使用するように構成するには、Ignite UI CLI を使用できます。最初の手順には、以下のように各パッケージをグローバルにインストールします。
npm install -g igniteui-cli
使用可能なオプションをガイド付きで体験したい場合は、新しいアプリケーションの作成とセットアップに役立つ手順モードを初期化できます。ガイドを開始するには、ig コマンドを実行します。
ig
次に、フレームワークとして React を選択し、プロジェクト タイプとして Ignite UI for React TS を選択します。Default Top Navigation プロジェクト テンプレートを選択するか、特定のコンポーネント/ビューを追加するか、Complete & Run を選択します。
Ignite UI CLI の詳細については、CLI の概要を参照してください。
プロンプト中にグリッド コンポーネントを追加した場合、アプリケーションが実行されると、次のようなものが表示されます。
[!NOTE] デフォルトでは、Ignite UI CLI は 商用ライセンスの下にある Ignite UI for React の Grid コンポーネントの Trial バージョンをインストールすることに注意してください。
あるいは、React チームが推奨する Next.js、Vite、Expo などの一般的なフレームワークを使用することも可能です。以下では、これらの方法のいずれかを使用して Ignite UI for React を利用した React アプリケーションを作成する手順をステップごとに説明します。
Vite CLI の使用
新しい React プロジェクトの作成
React 開発向けの主要なフレームワークはすべて、React アプリケーションをスキャフォールディングするための強力な CLI ツールを提供しています。
1 - VS Code を開き、[ターミナル] メニューを選択してから、[新しいターミナル] オプションを選択します。
2 - ターミナル ウィンドウに以下のコマンドのいずれかを入力します。
npm create vite@latest
次に、プロンプトに従って、プロジェクトの名前、フレームワークとしての React、TypeScript を使用するかどうか、および Vite によって提供されるその他のさまざまなオプションを選択します。React アプリケーションの初期構成 (ボイラープレート) を行うさまざまな方法については、このトピックを参照してください。
Ignite UI React Grid コンポーネントの追加
パッケージのインストール
Ignite UI React Grid コンポーネントをアプリに追加するには、igniteui-react-grids パッケージをインストールする必要があります。
npm install igniteui-react-grids --save
コンポーネント モジュールのインポート
次に、使いたいコンポーネントの必要なモジュールをインポートします。テンプレートでも使用する Grid コンポーネントと Column コンポーネントに対しても、同じことを実行してみましょう。テーマの 1 つをインポートする必要もあります。
import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
コンポーネントの使用
マークアップに Ignite UI for React グリッド コンポーネントを使用する準備が整いました。以下のように定義します。
// App.txs
function App() {
const data = [
{ name: "John", age: 30 },
{ name: "Jane", age: 25 },
{ name: "Bob", age: 35 }
];
return (
<div style={{ height: "100%", width: "100%" }}>
<IgrGrid
data={data}
autoGenerate={false}>
<IgrColumn
field="name"
header="Name"
dataType="string">
</IgrColumn>
<IgrColumn
field="age"
header="Age"
dataType="number">
</IgrColumn>
</IgrGrid>
</div>
);
}
アプリケーションの実行
最後に、新しいアプリケーションを実行します。
npm run dev
コマンドを実行した後、プロジェクトがローカルでビルドされて提供されます。これでデフォルトのブラウザーで自動的に開き、プロジェクトで Ignite UI for React コンポーネントを使用できるようになります。最終結果には、サンプル データを含むデータ グリッドが表示されます。
既存アプリの更新
既存の 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 のパッケージが、それらのすべての依存関係、フォントのインポート、および既存のプロジェクトへのスタイル参照と共に自動的にインストールされます。
Ignite UI for React パッケージの概要
Ignite UI for React は、React 向けの UI コンポーネント、デザイン ツールキット、関連サービスを包括的に提供するスイートです。デスクトップ ブラウザー、モバイル環境、PWA (Progressive Web App) など、あらゆる React アプリケーションでモダンかつ高パフォーマンスな開発を実現できるよう、開発者を強力にサポートします。
チャートおよびグラフ
Ignite UI for React には、チャートとグラフのライブラリが含まれており、65 種類以上のシチャート リーズと組み合わせを通じて、あらゆる種類のデータを魅力的でインタラクティブなグラフとダッシュボードに視覚化できるライブラリです。速度と美しさを追求し、すべてのモダンブラウザーで動作するように設計されており、完全なタッチ操作とインタラクティブ機能により、あらゆるデバイスでレスポンシブなビジュアルをすばやく構築できます。
ゲージ
Ignite UI for React は、簡単かつ直感的な方法でデータを示すために使用されるラジアル ゲージ、リニア ゲージとバレット グラフ コンポーネントを提供します。ラジアル ゲージには、定義済みの形状とスケールを作成するためのさまざまなカスタマイズ オプションがあります。リニア ゲージは、スケールおよび 1 つ以上の範囲と比較した値の単純なビューを提供します。1 つのスケール、1 セットの目盛り、および 1 セットのラベルをサポートします。バレット グラフ コンポーネントを使用すると、ダッシュボードで使用されるメーターやゲージを単純な棒チャートに置き換えて、データの視覚化を作成できます。
マップ
Ignite UI for React 地理マップ コンポーネントは、アプリケーションで地理データを視覚化する機能を提供します。マーカー、線、多角形、さらにはインタラクティブなビットマップの形状で、多くの地理的位置で構成されるデータ セットを描画できます。複数のマップ レイヤーを地理データでオーバーレイし、特定の地理的位置をマークし、カスタム マーカーと色を使用して情報を表示できます。
グリッドと入力
Ignite UI for React は、少ない構成でデータをバインドして表示できる複数のグリッド コンポーネントを提供します。グリッド ライト - MIT ライセンスの下にある軽量グリッド コンポーネント、データ グリッド - 商用ライセンスの下にある機能豊富なグリッド コンポーネント、リスト、ツリー、さらには スプレッドシートの形式で提供されます。
ボタン、入力、レイアウト、メニュー
Ignite UI for React は、依存関係のないアプローチでカプセル化と再利用可能なコンポーネントの概念を使用して、最新の Web アプリケーションを構築できるようにするさまざまなタイプのボタン、入力、メニュー、レイアウトを提供します。ストーリーブックはこちらをご覧くださ。これらのコンポーネントは Indigo Design System に基づいており、App Builder によって完全にサポートされており、Sketch、Adobe XD、および Figma 用のすぐに使用できる UI キットによって支えられています。