첫 번째 React 표시 - ② Ignite UI for React 메쉬

일본 인테리어 음악 컨설팅 회사 오쿠론입니다.
'처음의 리액트'시리즈React에서는 처음 보는 사람에게 리액트의 앱 제작 방법을 순서대로 설명한다.헬로월드를 시작으로 인프라 관련 제품Ignite UI for React의 격자와 그래프를 구성하는 것이 목표다.
이 보도는 두 번째다.Ignte UI for React의 격자선이 표시될 때까지 계속합니다.
카탈로그 연재

개발 환경을 조정한다.

React 애플리케이션을 이동해 봅니다.

"Hello World!"이렇게 고쳐 쓰다.(마지막 "처음의React ①"여기까지)

Ignite UI for React 격자선을 구성합니다.←이번엔 여기)

Ignite UI for React의 차트를 구성합니다.

지난번에 제작한 헬로월드에 추가되는 형식으로 진행된다.아직 없는 상황이니 지난번 내용을 보고 헬로 월드까지 제작해 주세요.
4. Ignite UI for React 격자선을 구성합니다.
Ignite UI for React의 격자는 테이블 형식으로 데이터를 표시할 수 있습니다.
격자를 설치하는 데 필요한 패키지입니다.
격자에 필요한 포장은 다음과 같은 네 가지가 있다.

igniteui-react-core

igniteui-react-grids

igniteui-react-inputs

igniteui-react-layouts

npm의 설치 명령을 사용하여 설치합니다.프롬프트에서 다음 명령을 순서대로 실행합니다.

> 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'에서 Hello World 구성 요소를 만드는 것과 같은 절차에 따라 src 폴더 바로 아래에 MyGrid 구성 요소를 만듭니다.

새 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>
        );
    }
}

MyGrid 구성 요소를 화면에 구성합니다.
Hello World 구성 요소가 화면에 설정되었을 때와 마찬가지로 src/App.MyGrid 구성 요소를 가져오고 구성할 jsx를 엽니다.

// 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;

모든 파일을 저장하고 알림을 열고 'npm start' 를 실행합니다.블라우스의 "Hello World!"의 아래에 테이블이 표시됩니다.

이렇게 하면 격자를 표시할 수 있다!좀 더 쉬다.
다음에 도표를 보여 보세요.
최후
이상은 격자 표시 방법입니다.다음에도 Ignite UI for React의 차트를 표시합니다.
이 보도에 대해 궁금한 점이나 모르는 점이 있으면 걱정하지 말고 직접 물어보세요인프라 시설.