This page explains how you can embed the JSViewer component in your React application (ASP.NET Core). To run the React Application Server, you will require the node.js JavaScript runtime.

1. Create an ASP.NET Core React project and configure ActiveReports in ASP.NET Core Middleware as illustrated in JSViewer ASP.NET Core Middleware topic.
   Now configure the client application for React application as illustrated in the next steps.

2. Expand the ClientApp folder and open 'package.json'.

3. Add the following package for JSViewer under 'dependencies' and save package.json:
   "@grapecity/ar-viewer": "latest"

4. In the command prompt, open the ClientApp folder's location and run npm install command to install the JSViewer packages.

5. Navigate to ClientApp\src  folder.

6. Open 'App.js' and replace the content with the following code to initialize the JSViewer:

   App.js

   Copy Code

   import React, { Component } from 'react'; import './custom.css'; export default class app extends Component { GrapeCity: any; constructor(props) { super(props); } componentDidMount() { this.viewer = window.GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host', reportID: 'DemoReport.rdlx' }); } componentDidUpdate() { this.viewer.openReport("DemoReport.rdlx"); } render() { return ( <div> <div id="viewer-host" /> </div> ); } }

7. Add the following import statements in 'index.js' file.
   import "@grapecity/ar-viewer/dist/jsViewer.min.js";
import "@grapecity/ar-viewer/dist/jsViewer.min.css";

8. Add the following css in 'custom.css' file to set the viewer's host element's size to 100%.

   custom.css	Copy Code
   #viewer-host { width: 100%; height: 100vh; }

9. Build the application and then press F5 to run it.