Get Started with ActiveReportsJS React Report Viewer Component

Create React Application

The easiest way to create a new React application is to use Create React App tool. Run the following command from the command prompt or terminal to create a React application with default options. For details, see Getting Started on the Create React App site.

npm init react-app arjs-react-viewer-app

Or if you are using yarn:

yarn create react-app arjs-react-viewer-app

For more ways to create a React application, see the official documentation

Install ActivereportsJS npm packages

The React Report Viewer Component is distributed via @grapecity/activereports-react npm package. The main @grapecity/activereports package provides the core functionality. To install the current version of these packages, run the following command from the application's root folder.

npm install @grapecity/activereports-react @grapecity/activereports

Or if you are using yarn:

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

Import ActiveReportsJS styles

Open the src\App.css file and replace its content with the following code. It imports the default Report Viewer Component Styles and defines style for the element that will hosts the React Report Viewer Component

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

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

Add ActiveReportsJS report to the application

ActiveReportsJS uses JSON format and rdlx-json extension for report template files. In the public folder, create the new file called report.rdlx-json and insert the following JSON content into that file.

{
  "Type": "report",
  "Body": {
    "Name": "Body",
    "Type": "section",
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "textbox1",
        "Style": { "FontSize": "18pt" },
        "Value": "Hello, ActiveReportsJS Viewer",
        "Height": "10in"
      }
    ]
  },
  "Name": "Report"
}

Add ActiveReportsJS React Report Viewer Component to the application

Replace the default code of src\App.js with the following 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 test the application

Run the application using npm start or yarn start commands. If the command fails with the error like the one below, delete the node_modules folder and run npm install or yarn to re-install all the required packages.

> 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 the report that shows "Hello, ActiveReportsJS Viewer" text. You can test the basic functionality by using buttons on the toolbar or exporting the report to one of the available formats.