# JSViewer React(Hooks)

This topic demonstrates the use of ActiveReports JSViewer with a ReactJS app using hooks and the ASP.NET Core back end.

## Content



This sample demonstrates the use of the ActiveReports JSViewer with a ReactJS app using hooks and the ASP.NET Core back end.

![ActiveReports JSViewer](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/sample_jsviewer_mvc.jpg)


> type=note
> **Note**: To run this sample, you must have
> 
> *   [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) (version 17.0 or later)
> *   [.NET 6.0 SDK](https://dotnet.microsoft.com/en-us/download)
> *   [.NET Core Hosting Bundle](https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-aspnetcore-6.0.0-windows-hosting-bundle-installer) (for deployment to IIS)
> *   [Node.js](https://nodejs.org/en) 16.x or 18.x

### Sample Location

[https://github.com/activereports/WebSamples19/tree/main/JSViewer\_React\_Hooks](https://github.com/activereports/WebSamples19/tree/main/JSViewer_React_Hooks)

### Details

When you run the sample, the JSViewer opens in your browser. The viewer provides links to reports to demonstrate the ActiveReports JSViewer using Hooks with a ReactJS app and the ASP.NET Core back end.

Clicking the report link in the left panel opens the report for preview. You can preview the following reports.

*   AcmeStore.rdlx
*   AnnualReport.rdlx
*   Invoice.rdlx
*   Invoice.rpx
*   InvoiceList.rdlx
*   Invoice\_Colored.rpx
*   Project & ResourceAnalysis - Staff Performance Analysis.rdlx
*   Statistical analysis scatter plot.rdlx
*   User defined report columns.rdlx

The project consists of the following elements.

*   **Controllers** folder: This folder contains the **HomeController** that handles the user interaction and returns the main Index view.
*   **ClientApp** folder: This folder contains a standard Angular CLI app that is used for all UI concerns.
*   **readme**: This file contains the instructions on how to build and run the sample project.
*   **Startup.cs**: The startup file adds the **UseReportViewer()** middleware to configure the middleware for ActiveReports API and handlers, and the **UseCors()** middleware to enable CORS. The **AddCors()** service call adds CORS services to the app's service container.
*   **wwwroot**: Contains designer CSS and JavaScript files.