创立 React 利用

创立 React 利用 参考链接， 如应用npx 包运行工具：

npx create-react-app arjs-react-viewer-app
如果您应用的是yarn，执行命令：

yarn create react-app arjs-react-viewer-app
更多创立 React办法可参考 官网文档

装置 ActivereportsJS NPM 包

React 报表 Viewer 组件曾经放在了npm @grapecity/activereports-react npm 中。 @grapecity/activereports 包提供了全副的外围性能。

运行以下命令安装包：

npm install @grapecity/activereports-react @grapecity/activereports
或应用yarn命令

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

导入 ActiveReportsJS 款式

关上 src\App.css 文件并增加以下代码，导入Viewer 的默认款式，定义了元素宿主的款式React Report Viewer 控件：

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";

viewer-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 Viewer",    "Style": {      "FontSize": "18pt"    },    "Width": "8.5in",    "Height": "0.5in"  }]

}
}

增加 React 报表 Viewer 控件

批改 src\App.js代码:

import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";

function App() {
return (

<div id="viewer-host">  <Viewer report={{ Uri: 'report.rdlx-json' }} /></div>

);
}

export default App;

运行和调试

应用 npm start 或 yarn start 命令运行我的项目，如果编译失败了，报以下谬误，请删除node_modules 文件夹并从新运行 npm install 或 yarn命令来重新安装须要的包文件。

react-scripts start

internal/modules/cjs/loader.js:883
throw err;
^

Error: Cannot find module 'react'
当应用程序启动时，ActiveReportsJS Viewer组件将呈现在页面上。Viewer将显示显示“ Hello，ActiveReportsJS Viewer”文本的报表。您能够通过应用工具栏上的按钮或将报表导出为可用格局之一来测试。