# Vite.js(React)에서 ActiveReportsJS 보고서 디자이너 시작하기

## Content

[Vite.js](https://vitejs.dev/)는 최신 프론트엔드 개발을 위한 빌드 도구입니다. [네이티브 ES 모듈](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)을 활용하여 개발 경험을 개선하고 고도로 최적화된 프로덕션 빌드를 생성합니다. 이 튜토리얼에서는 `Vite.js React 애플리케이션`에서 [ActiveReportsJS 리포트 디자이너](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) 컴포넌트를 사용하는 방법을 보여줍니다.

### Vite.js React 응용 프로그램 생성하기

`Vite.js React` 애플리케이션을 만드는 가장 쉬운 방법은 [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) 스캐폴딩 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 기본 옵션이 있는 응용 프로그램을 만듭니다.

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

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

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

### ActivereportsJS NPM 패키지 설치

[@mescius/activereportsjs-react](https://www.npmjs.com/package/@mescius/activereportsjs-react) NPM 패키지를 통해 React 보고서 디자이너 컴포넌트를 제공합니다. 이 패키지는 핵심 기능을 포함하는 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) 패키지에 의존합니다. 이러한 패키지의 현재 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행합니다.

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

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

### ActiveReportsJS 스타일 가져오기

`src\App.css` 파일을 열고 내용을 다음의 코드로 바꿉니다.
기본 [보고서 디자이너 컴포넌트 스타일](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Themes)을 가져오고 [React 보고서 디자이너 컴포넌트](/activereportsjs/docs/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;
}
```

### ActiveReportsJS 보고서를 응용 프로그램에 추가하기

ActiveReportsJS는 보고서 템플릿 파일에 [JSON 형식](https://www.json.org/json-en.html)과 `rdlx-json` 확장자를 사용합니다. 애플리케이션의 루트 폴더에서 `report.rdlx-json`이라는 새 파일을 만들고 해당 파일에 다음 JSON 콘텐츠를 삽입합니다.

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

### 응용 프로그램에 React 리포트 디자이너 추가하기

`src\App.jsx`의 기본 코드를 다음 코드로 바꿉니다.

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

### 응용 프로그램 실행

개발 모드에서 애플리케이션을 실행하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행합니다.

```bash
# npm
npm run dev

# yarn
yarn dev
```

`'vite'가 내부 또는 외부 명령, 실행 가능한 프로그램 또는 배치 파일`로 인식되지 않는다는 오류와 함께 명령이 실패하면 `node_modules` 폴더를 삭제하고 `npm install` 또는 `yarn`을 실행하여 다시 필요한 모든 패키지를 설치합니다. 그런 다음 `npm run dev` 또는 `yarn dev`를 다시 실행합니다.
응용 프로그램 구축의 놀라운 성능과 핫 모듈 재로딩 속도에 주목하십시오. ActiveReportsJS 보고서 디자이너는 응용 프로그램의 시작 페이지에 나타나고 보고서 디자인을 표시합니다. 보고서 항목 추가, 속성 설정, 데이터 소스 생성 등을 통해 기본 기능을 테스트할 수 있습니다. 보고서 디자이너 컴포넌트 사용 방법에 대한 자세한 내용은 [보고서 디자이너 인터페이스 페이지](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface)를 참조하세요.