ActiveReportsJS in React

Following are the prerequisites before you start using ActiveReportsJS in React framework.

Prerequisites:

• Node.js
• Yarn
• Create React App - Install the global tool for React application using
  

   npm install create-react-app -g

      or

   yarn global add create-react-app

The following steps show how to view an existing report in a React application.

1. Create a new React application by typing following command in command console

   create-react-app arjs-react

2. Make this directory your working directory

   cd arjs-react

3. Install the following ActiveReportsJS React modules in the project

   npm install @grapecity/activereports-react

           or

   yarn add @grapecity/activereports-react

4. Place the report you want to view (for example, InvoiceList.rdlx-json) in the 'public' folder of the application.
5. Modify 'src/App.js' file to import required stylesheet and scripts

   import React from 'react';
   import '@grapecity/activereports/styles/ar-js-viewer.css';
   import { Viewer } from '@grapecity/activereports-react';
   import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';

   class App extends React.Component {
    _viewer = Viewer;

    render() {
         return (<div className="demo-app" style={{ height: '1000px'}} >
                    <Viewer
                      report={{ Uri: "InvoiceList.rdlx-json" }}
                      sidebarVisible={true} toolbarVisible zoom='100%' />
                    </div>);
       }
     }
  export default App;

6. To add export capabilities in viewer, add following import statement to the html page

   import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';

These modules are also required to allow export of report without using viewer. See Export topic for more information.

7. In the command console, type following command to run the application

   npm start

      or

   yarn start

You will get a running application in the browser (localhost:3000).

Refer to the React Component topic for more details on using ActiveReportsJS in React applications.