Using ActiveReportsJS Report Designer Component in React applications

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-designer-app

Or if you are using yarn:

yarn create react-app arjs-react-designer-app

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

Install ActivereportsJS npm packages

We distribute the React Report Designer Component via @grapecity/activereports-react npm package that depends on the main @grapecity/activereports package that includes the core functionality.

To install the latest version of these packages, run the following command from the application's root folder.

npm install @grapecity/activereports-react@latest

Or if you are using yarn:

yarn add @grapecity/activereports-react@latest

Import ActiveReportsJS styles

Open the src\App.css file and replace its content with the following code.

It imports the default Report Designer Component Styles and defines style for the element that will hosts the React Report Designer Component

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

#designer-host {
  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.

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

Add React Report Designer component to the application

Replace the default code of src\App.js with the following code. It uses the React Report Designer Component. The designer component's report property points to the report.rdlx-json that you created on the previous step.

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;

Run and test the application

Running the npm start or yarn start commands could fail with the fatal error that the JavaScript heap is out of memory. In that case, open the package.json file and replace the start script with the following one.

react-scripts --max_old_space_size=8192 start

Then re-run npm start or yarn start command. 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. Then run npm start or yarn start again.

> react-scripts start

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

Error: Cannot find module 'react'

The ActiveReportsJS Designer component will appear on the start page of the application and display the report design. Test the basic functionality by adding report items, setting their properties, creating the data source, et cetera.Visit the Developer Guide and the Online Demo for more information on how to use the Report Designer component.