How to Use React Report Viewer with Report Server
This tutorial demonstrates how to add the React Report Viewer component to a new React application and display a report coming from the Telerik Report Server.
Prerequisites
The following list describes the prerequisites for this tutorial:
- Review the React Report Viewer Requirements.
- A running intance of the Telerik Report Server.
Using React Report Viewer in React application
All paths and url links in the described steps must be adapted according to your project setup.
Steps:
-
Create new React application using the React tutorial.
-
Install jQuery by using the following command:
-
Install the Telerik React Report Viewer NPM package by running:
-
Once installed, import the TelerikReportViewer in the index.js file:
-
Add the report viewer to the page:
-
Style the viewer using the desired Kendo UI theme (еither using Less-Based Themes or Sass-Based Themes): Add references to the Less-based CSS files in the
<head>
element of index.html:To get the Sass-based Kendo UI themes, you can use either the pre-build CSS files, the Kendo UI CDN, or the NPM packages (Getting the Sass-Based Themes).
-
Run the application: