В этой главе будет рассмотрен пример использования компонентов Stimulsoft в приложениях React.

 

 
Создайте проект React
В терминале перейдите в каталог, в котором необходимо разместить будущий проект. Затем следует выполнить команду.

 

terminal

 

npx create-react-app my-app

 

 

 

Установите компоненты Stimulsoft
Для начала необходимо скачать пакет Stimulsoft. Если необходимы только инструменты отчетности, то следует скачать пакет stimulsoft-reports-js. Если же требуются и средства отчетности и дашборды, то пакет stimulsoft-dashboards-js. Для этого следует выполнить команду в терминале.
 

terminal

 

npm install stimulsoft-dashboards-js

 

 

 

Интегрируйте Stimulsoft в приложение
Для этого следует отредактировать файл App.js в папке src проекта. Для начала, следует импортировать модуль Stimulsoft и класс React. Далее, следует создать класс App, унаследованный от React.Component, переопределить конструктор класса, методы render() и componentDidMount(). Например, будет вызван дизайнер отчетов с пустым отчетом.

 

App.js

...

import React from 'react';

import { Stimulsoft } from 'stimulsoft-dashboards-js/Scripts/stimulsoft.designer';

 

class App extends React.Component {

constructor() {

super();

this.designer = new Stimulsoft.Designer.StiDesigner(false, "StiDesigner", false);

}

 

render() {

return (

<div className="App">

<h2>Stimulsoft Designer</h2>

<div id="сontent"></div>

</div>

);

}

 

componentDidMount() {

var report = new Stimulsoft.Report.StiReport();

 

this.designer.report = report;

this.designer.renderHtml("сontent");

}

}

 

export default App;

...

 

 

Или, вызвать вьювер с ранее созданным отчетом. Файлы отчетов следует предварительно скопировать в папку reports в директории проекта ./public.

 

App.js

...

class App extends React.Component {

constructor() {

super();

this.viewer = new Stimulsoft.Viewer.StiViewer(false, "StiViewer", false);

}

 

render() {

return (

<div className="App">

<h2>Stimulsoft Viewer</h2>

<div id="сontent"></div>

</div>

);

}

 

componentDidMount() {

var report = new Stimulsoft.Report.StiReport();

report.loadFile("reports/Invoice.mrt");

 

this.viewer.report = report;

this.viewer.renderHtml("сontent");

}

}

...

 

 

Первый запуск
React приложение по умолчанию определяет стартовую команду в файле package.json. Поэтому для запуска проекта, достаточно в корневой папке проекта из терминала выполнить командy.

 

console

 

npm start