0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

はじめての React - ② Ignite UI for React のグリッドを表示させる

Posted at

インフラジスティックス・ジャパン、テクニカル コンサルティング チームの oquiron です。

「はじめての React」シリーズでは React が初めての人向けに React のアプリケーションの作成方法を順に説明したいと思います。Hello World から始めてインフラジスティックス製品の Ignite UI for React のグリッドやチャートを配置するところまでを目指します。

この記事はその第 2 回。Ignte UI for React のグリッドを表示させるところまで進めていきます。

連載目次

  1. 開発環境を整える。
  2. React のアプリケーションを動かしてみる。
  3. "Hello World!" と表示されるように書き換える。(前回の「はじめての React ①」はここまで)
  4. Ignite UI for React のグリッドを配置する。(←今回はここ)
  5. Ignite UI for React のチャートを配置する。

前回作成した Hello World に追加していく形で進めます。まだの場合は、前回の内容を見て Hello World まで作成してください。

4. Ignite UI for React のグリッドを配置する。

Ignite UI for React のグリッドはデータを表形式で表示することができます。

グリッドに必要なパッケージをインストールする。

グリッドに必要なパッケージは以下の 4 つです。
  • igniteui-react-core
  • igniteui-react-grids
  • igniteui-react-inputs
  • igniteui-react-layouts

これらを npm の install コマンドを使用してインストールします。プロンプトで次のコマンドを順に実行します。

> npm install --save igniteui-react-core
> npm install --save igniteui-react-grids
> npm install --save igniteui-react-inputs
> npm install --save igniteui-react-layouts

MyGrid コンポーネントを作成する。

前回の「はじめての React - ① Hello World」で HelloWorld コンポーネントを作成したのと同じ手順で、src フォルダーの直下に MyGrid コンポーネントを作成します。 ![26006613685912339_MyGridComponent_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/7e66bb84-4790-bd7d-a70a-3915018d4062.png)

新規作成した MyGrid.tsx を開き、以下のコードを貼り付け、保存します。

// src/MyGrid.tsx
import * as React from 'react';

// ①IgrDataGridに必要なモジュールをインポートする。
import { IgrDataGridModule } from 'igniteui-react-grids';
import { IgrDataGrid } from 'igniteui-react-grids';

// ②IgrDataGridに必要なモジュールを登録する。
IgrDataGridModule.register();

// ③Reactのコンポーネントを拡張してMyGridクラスコンポーネントを定義する。
export default class MyGrid extends React.Component {
    public data: any[];

    // ④MyGridクラスコンポーネントのコンストラクター
    constructor(props: any) {
        super(props);

        // ⑤IgrGridに表示するデータを生成する。
        this.data = [
            {"Year": "1920", "Population": 55963053 },
            {"Year": "1930", "Population": 64450005 },
            {"Year": "1940", "Population": 73114308 },
            {"Year": "1950", "Population": 84114574 },
            {"Year": "1960", "Population": 94301623 },
            {"Year": "1970", "Population": 104665171 },
            {"Year": "1980", "Population": 117060396 },
            {"Year": "1990", "Population": 123611167 },
            {"Year": "2000", "Population": 126925843 },
            {"Year": "2010", "Population": 128057352 },
        ];
    }

    // ⑥MyGridクラスコンポーネントの描画を実装する。
    // ※render()メソッドはクラスコンポーネントで必ず定義しなければならない唯一のメソッドです。
    public render() {
        return(
          <div style={{margin: "1em"}}>
            {/*
              ⑦IgrDataGridを配置する。
              dataSource: 表示するデータソースを指定する。
              autoGenerateColumns: 列を自動生成するかどうか指定する。trueは自動生成する。falseは自動生成しない。
            */}
            <IgrDataGrid style={{margin: "1em"}}
              height="300px"
              width="100%"
              dataSource={this.data}
              autoGenerateColumns="true"
              />
            </div>
        );
    }
}

26006613685912339_MyGridComponent_3.png

MyGrid コンポーネントを画面に配置する。

HelloWorld コンポーネントを画面に配置したときと同じように、src/App.jsx を開いて MyGrid コンポーネントのインポートと配置をします。
// src/App.tsx
import React from 'react';
import HelloWorld from './HelloWorld';
import './App.css';

import MyGrid from './MyGrid'; // ①MyGridコンポーネントをインポートする。

function App() {
    return (
        <div className="App">
            <HelloWorld />
            <MyGrid /> {/* ②MyGridコンポーネントを画面上に配置する。 */}
        </div>
    )
}

export default App;

26006613685912339_MyGridComponent_4.png

ファイルをすべて保存して、プロンプトを開き、"npm start" を実行します。ブラウザーの "Hello World!" の下に表が表示されていれば OK です。
26006613685912339_MyGridComponent_5.png

これでグリッドの表示までできました! あともう一息です。

次回はチャートの表示をしてみましょう。

最後に

以上、グリッドの表示のさせ方を見てきました。次回は、同じように Ignite UI for React のチャートを表示させてみましょう。

この記事に関して何かご質問・ご不明な点がありましたら、お気兼ねなくインフラジスティックスまでお問い合わせください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?