Creating the React application

Create React application reference links, such as running tools with the NPX package:

NPX create-react-app arjs-react-viewer-app If you are using yarn, execute the command:

YARN Create React -app Arjs-React -Viewer -app For more information about creating react methods, see the official documentation

Install the ActiveReportsJS NPM package

The React report Viewer component is already in npm@grapecity/activeReports-React NPM. The @grapecity/ ActivieReports package provides all the core functionality.

Run the following command to install the package:

NPM install @grapecity/activereports-react @grapecity/activereports or use yarn command

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

Import the ActiveReportsJS style

Open the SRC \ app.css file and add the following code to import the default Viewer style that defines the React Report Viewer control for the element host:

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

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

viewer-host {

width: 100%;

height: 100vh;

}

Add an ActiveReportsJS report

ActiveVerePortsJS uses the JSON format and RDLX-JSON to extend the report template file. In the public folder of the application, create a new file named report.rdlx-json and insert the following JSON content into the file:

{

“Name”: “Report”,

“Body”: {

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

}}

Add the React Report Viewer control

Modify the SRC \ app.js code:

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;

Run and debug

Run the project with the NPM start or yarn start command. If the compilation fails, delete the node_modules folder and rerun the NPM install or yarn command to reinstall the required package files with the following error.

react-scripts start

internal/modules/cjs/loader.js:883

throw err;

^

Error: Cannot find module ‘react’ When the application starts, the ActiveReportsJS Viewer component will appear on the page. The Viewer will display a report that displays the text “Hello, ActiveReportsJS Viewer.” You can test this by using the buttons on the toolbar or by exporting the report to one of the available formats.