创立 React 利用

创立 React 利用的最简略的办法是应用 创立 React App, 如应用 npx 包运行工具:

npm init react-app arjs-react-designer-app
或应用 yarn 命令创立：

yarn create react-app arjs-react-designer-app
创立 React 利用更多可参考文档 官网文档

装置 ActivereportsJS

报表设计器相干的文件会蕴含在 @grapecity/activereports npm 包中。装置以后版本，运行以下命令：

npm install @grapecity/activereports-react @grapecity/activereports
也能够应用 yarn 命令：

yarn add @grapecity/activereports-react @grapecity/activereports

导入 ActiveReportsJS 款式

在 src\App.css 文件夹中导入以设计器须要的款式文件.

@import “@grapecity/activereports/styles/ar-js-ui.css”;
@import “@grapecity/activereports/styles/ar-js-designer.css”;

designer-host {

width: 100%;
height: 100vh;
}

将 ActiveReportsJS 报表增加到应用程序

ActiveReportsJS 应用 JSON 格局和 rdlx-json 扩大用于报表模板文件。在应用程序的 public 文件夹下，创立名为 report.rdlx-json 的新文件，并在该文件中插入以下 JSON 内容。

{
“Name”: “Report”,
“Body”: {

"ReportItems": [
  {
    "Type": "textbox",
    "Name": "TextBox1",
    "Value": "Hello, ActiveReportsJS Designer",
    "Style": {"FontSize": "18pt"},
    "Width": "8.5in",
    "Height": "0.5in"
  }
]

}
}

增加 React 报表设计器

关上 src\App.js 文件批改代码：

import React from “react”;
import “./App.css”;
import {Designer} from “@grapecity/activereports-react”;

function App() {
return (

<div id="designer-host">
  <Designer report={{id: "report.rdlx-json", displayName: "my report"}} />
</div>

);
}

export default App;

增加设计器宿主元素

在 src 文件夹中增加 DesignerHost.js (或如果您应用的是 typescript DesignerHost.ts) 文件。

增加须要的 import 包 DesignerHost.js(ts)

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”;
增加以下函数来初始化设计器，改函数是用于接管 宿主元素的选择器：

const initDesigner = (designerHostSelector) => {
new ReportDesigner(designerHostSelector);
};
增加功能模块 DesignerHost.js(ts)

export const DesignerHost = () => {
React.useEffect(() => initDesigner(“#designer-host”), []);
return <div id=”designer-host”></div>;
};
该组件调用了 initDesigner 函数，一旦组件实现渲染会，将设计器增加到 #designer-host 元素。

在 index.css 文件为 designer-host 元素增加款式文件。

designer-host {

margin: 0 auto;
width: 100%;
height: 100vh;
}

在利用中增加设计器组件

关上 App.js(ts)文件应用以下代码替换默认代码：

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

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

export default App;
运行并测试利用
应用 npm start 或 yarn start 命令运行利用，可能会存在谬误：“fail with the fatal error that the JavaScript heap is out of memory”，关上 package.json 文件替换 start 脚本：

react-scripts –max_old_space_size=4096 start

从新运行 npm start 或 yarn start 命令。