# ActiveReportsJS 보고서 뷰어 React 컴포넌트 시작하기

## Content

### **React 응용 프로그램 만들기**

새 React 응용 프로그램을 가장 쉽게 만드는 방법은 [Create React App](https://github.com/facebook/create-react-app#creating-an-app) 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 기본 옵션이 포함된 React 응용 프로그램을 만듭니다. 자세한 내용은 [React 앱 만들기](https://create-react-app.dev/) 사이트에서 [시작하기](https://create-react-app.dev/docs/getting-started)를 참조하십시오.

```bash
npm init react-app arjs-react-viewer-app
```

yarn을 사용하는 경우:

```bash
yarn create react-app arjs-react-viewer-app
```

React 응용 프로그램을 만드는 다른 방법은 [공식 문서](https://reactjs.org/docs/create-a-new-react-app.html)를 참조하십시오.

### **ActivereportsJS npm 패키지 설치**

React 보고서 뷰어 컴포넌트는 [@grapecity/activereports-react](https://www.npmjs.com/package/@grapecity/activereports-react) npm 패키지를 통해 배포됩니다. 기본 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) 패키지는 핵심 기능을 제공합니다. 이러한 패키지의 최신 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.

```bash
npm install @grapecity/activereports-react @grapecity/activereports
```

yarn을 사용하는 경우:

```bash
yarn add @grapecity/activereports-react @grapecity/activereports
```

### **ActiveReportsJS 스타일 가져오기**

`src\App.css` 파일을 열고 내용을 다음 코드로 바꿉니다. 이 코드는 기본 [보고서 뷰어 컴포넌트 스타일](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Themes#built-in-themes)을 가져오며, [React 보고서 뷰어 컴포넌트](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Integration/React-Component)를 호스트할 요소의 스타일을 정의합니다.

```css
@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";

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

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

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

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

### **React 보고서 뷰어 컴포넌트를 응용 프로그램에 추가**

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

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

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

export default App;
```

### **응용 프로그램 실행 및 테스트**

`npm start` 또는 `yarn start` 명령을 사용하여 응용 프로그램을 실행합니다. 아래와 같이 오류가 발생하고 명령이 실패하면 `node_modules` 폴더를 삭제하고 `npm install` 또는 `yarn`을 실행하여 필요한 패키지를 모두 다시 설치합니다.

```bash
> react-scripts start

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'react'
```

응용 프로그램이 시작되면 ActiveReportsJS 뷰어 컴포넌트가 페이지에 나타납니다. 뷰어에는 "안녕하세요, ActiveReportsJS 뷰어입니다"라는 텍스트가 표시된 보고서가 나타납니다. 도구 모음의 버튼을 사용하거나 사용 가능한 서식 중 하나로 보고서를 내보내 기본 기능을 테스트할 수 있습니다.

### **관련 링크**

* [라이브 데모](/activereportsjs/demos/features/viewer-integration/react)
* [React 개발자 가이드](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Integration/React-Component)