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

Learn how to use the Report Designer component in a Vite.js application

## Content

[Vite.js](https://vitejs.dev/) is a build tool for modern front-end development. It leverages [native ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) to improve the development experience and to produce a highly optimized production build. This tutorial will show you how to use the [ActiveReportsJS Report Designer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) component in a `Vite.js React application`.

### Create a Vite.js React Application

The easiest way to create a `Vite.js React` application is to use the [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) scaffolding tool. Run the following command from the command prompt or terminal to create an application with default options.

```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
```

### Install ActivereportsJS npm packages

We distribute the React Report Designer Component via [@mescius/activereportsjs-react](https://www.npmjs.com/package/@mescius/activereportsjs-react) NPM package that depends on the [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) package that includes the core functionality. To install the current version of these packages, run the following command from the application's root folder.

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

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

### Import ActiveReportsJS styles

Open the `src\index.css` file and replace its content with the following code.
It imports the default [Report Designer Component Styles](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Themes) and defines style for the element that will host the [React Report Designer Component](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview)

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

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

### Add an ActiveReportsJS report into the application

ActiveReportsJS uses the [JSON format](https://www.json.org/json-en.html) and the `rdlx-json` extension for report template files. In the application's `public` folder, create a new file called `report.rdlx-json` and insert the following JSON content into that file.

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

### Add the React Report Designer into the application

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

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

function App() {
  return (
    <div id="designer-host">
      <Designer report={{ id: 'report.rdlx-json', displayName: "sample report" }} />
    </div>
  );
}

export default App;
```

### Run and test the application

To run the application in the development mode, run the following command from the application's root folder:

```bash
# npm
npm run dev

# yarn
yarn dev
```

If the command fails with the error that says that `'vite' is not recognized as an internal or external command, operable program or batch file`, then delete the `node_modules` folder and run `npm install` or `yarn` to re-install all the required packages. Then run `npm run dev` or `yarn dev` again. Note the blazing performance of the application building and the speed of hot module reloading. The ActiveReportsJS Report Designer will appear on the start page of the application and display the report design. You could test the basic functionality by adding report items, setting their properties, creating the data source, et cetera. Visit the [Report Designer Interface page](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface) for more information on how to use the Report Designer component.