Webデザイナコンポーネントの使用（React）

Reactアプリケーションを作成する

新しいReactアプリケーションを作成する簡単な方法はパッケージランナーツールのcreate-react-appを使用することです。
次のコマンドを入力して、新しいReactアプリケーションを作成します。

npx create-react-app arjs-designer-app

npmパッケージをインストールする

ReactアプリケーションでWebデザイナコンポーネントを使用するには@grapecity/activereportsパッケージに含まれるWebデザイナコンポーネントを使用します。このパッケージをインストールするには、アプリケーションのルートフォルダから次のコマンドを入力します。

npm install @grapecity/activereports

また、Webデザイナコンポーネントを日本語で表示するため、ローカライズモジュールをインストールします。次のコマンドを入力します。

npm install @grapecity/activereports-localization

Webデザイナコンポーネントのホストコンポーネントを追加する

ReactアプリケーションのsrcフォルダにDesignerHost.jsファイルを追加、次のコードを設定します。typescriptを使用する場合はDesignerHost.tsファイルを追加し、次のコードを設定します。また、Webデザイナコンポーネントに必要なスタイル、およびローカライズモジュールをインポートします。

import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-designer.css";
import '@grapecity/activereports-localization-ja';

Webデザイナコンポーネントを初期化する関数を追加します。

const initDesigner = (designerHostSelector) => {
  new ReportDesigner(designerHostSelector, { language: "ja" });
};

DesignerHost.js（またはDesignerHost.ts）にホストコンポーネントを追加します。

export const DesignerHost = () => {
  React.useEffect(() => initDesigner("#designer-host"), []);
  return <div id="designer-host"></div>;
};

このコンポーネントは、初回の描画が完了するとinitDesigner関数を呼び出し、Webデザイナコンポーネントを**#designer-host**要素の子ノードに追加します。

designer-host要素のスタイルをindex.cssファイルに追加します。

#designer-host {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
}

Webデザイナコンポーネントをアプリケーションに追加する

**App.js(ts)**ファイルを開き、以下の内容を設定します。

import React from "react";
import "./App.css";
import { DesignerHost } from "./DesignerHost";

function App() {
  return <DesignerHost />;
}

export default App;

アプリケーションを実行する

次のコマンドを入力してReactアプリケーションを実行します。ページ上にWebデザイナコンポーネントが表示されます。レポートに、コントロールの追加、プロパティの設定、データソースを作成するなど、基本的な機能を確認できます。

npm start

Reactアプリケーションを実行する際、JavaScriptのメモリ割当が不足し、ヒープエラーが発生する場合があります。
このエラーを回避するには、package.jsonファイルを開き、startスクリプトに次の設定を追加します。

"start": "react-scripts --max_old_space_size=4096 start"

Webデザイナコンポーネントを使用する方法については、チュートリアルおよびデモを参照してください。