# Get Started with ActiveReportsJS Report Viewer in Vite.js(React)

Learn how to use ActiveReportsJS Report Viewer component in a Vite.js React application.

## Content

This guide will help you set up the `ActiveReportsJS Report Viewer` component in a `Vite.js React application`. [Vite.js](https://vitejs.dev/) is a modern build tool that leverages [native ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) to optimize the development experience and produce efficient production builds.

### 1\. Create a Vite\.js React App

To create a new Vite.js React application, use the [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) starter kit by running the following command:

```bash
# npm 6.x
npm init vite arjs-vite-react-app --template react

# npm 7+, extra double-dash is needed
npm init vite arjs-vite-react-app -- --template react

#yarn
yarn create vite arjs-vite-react-app --template react
```

### 2\. Install ActiveReportsJS and Dependencies

Install the `ActiveReportsJS React Report Viewer Component` and its dependencies with the following command:

```bash
#npm
npm install @mescius/activereportsjs-react@latest

#yarn
yarn add @mescius/activereportsjs-react@latest
```


### 3. Import ActiveReportsJS Styles

Replace the content of `src\index.css` with the following:

```css
@import "@mescius/activereportsjs/styles/ar-js-ui.css";
@import "@mescius/activereportsjs/styles/ar-js-viewer.css";

#viewer-host {
  width: 100%;
  height: 100vh;
}
```

### 4. Add an ActiveReportsJS Report

Create a new file named `report.rdlx-json` in the public folder and add the following `JSON` content:

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

### 5. Add the React Report Viewer Component

Replace the content of `src\App.jsx` with the following code:

```javascript
import React from "react";
import "./App.css";
import { Viewer } from "@mescius/activereportsjs-react";

function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'report.rdlx-json' }} />
    </div>
  );
}

export default App;
```

### 6. Run and Test the Application

To run the application in development mode, execute the following command:

```bash
# npm
npm run dev

#yarn
yarn dev
```

If you encounter an error stating *'vite' is not recognized as an internal or external command, operable program or batch file*, delete the `node_modules` folder and reinstall the required packages using `npm install` or `yarn`. Then run `npm run dev` or `yarn dev` again.
When the application starts, the ActiveReportsJS Viewer component will be displayed, showing the text `Hello, ActiveReportsJS Viewer`. Test the basic functionality using the toolbar buttons or by exporting the report to an available format.