Reactアプリケーションの組み込み

このトピックでは、ReactアプリケーションにJSビューワコンポーネントを組み込む方法について説明します。Reactアプリケーションサーバーを実行するには、NodeJSがコンピュータにインストールされている必要があります。

1. Visual Studio 2026を開き、「React and ASP.NET Core」テンプレートを選択して、新しいプロジェクトを追加します。

   
   

2. プロジェクト名を入力し、［次へ］をクリックします。

   
   

3. フレームワークとして「.NET 8.0（長期的なサポート）」を選択し、他のオプションのチェックボックスを外します。

   
   

4. ［ソリューションエクスプローラー］で、ソリューションを右クリックし、［NuGet パッケージの管理］を選択します。

5. 次のパッケージをプロジェクトに追加します。

   MESCIUS.ActiveReports.Aspnetcore.Viewer.ja

   
   

6. プロジェクトフォルダ内に［resources］フォルダを作成します。［resources］フォルダに、ビューワに表示するレポートを保存できます。

7. レポートの［ビルドアクション］プロパティが「埋め込みリソース」に設定されていることを確認します。

8. Program.csファイルを開き、次のように変更します。

   using GrapeCity.ActiveReports.Aspnetcore.Viewer;
   var builder = WebApplication.CreateBuilder(args);
   // コンテナにサービスを追加します。
   builder.Services.AddReportViewer();
   builder.Services.AddControllers();
   var app = builder.Build();
   var ResourcesRootDirectory =
       new DirectoryInfo(Path.Combine(Directory.GetCurrentDirectory(), "resources"));
   app.UseReportViewer(config => config.UseFileStore(ResourcesRootDirectory));
   app.UseDefaultFiles();
   app.UseStaticFiles();
   // HTTP要求パイプラインを構成します。
   app.UseHttpsRedirection();
   app.UseAuthorization();
   app.MapControllers();
   app.MapFallbackToFile("/index.html");
   app.Run();

9. .clientプロジェクトでは、package.jsonファイルを開き、「dependencies」の下に次のパッケージを追加します。

   "@mescius/activereportsnet-viewer-ja": "^20.x.x"

10. コマンドプロンプトで「.client」プロジェクトを開き、次のコマンドを実行してnpmパッケージをインストールします。

    npm install

    ビューワに関するファイルとフォルダは、現在のディレクトリにダウンロードされます。".\node_modules\@mescius\activereportsnet-viewer-ja\dist"

11. App.cssファイルを開き、以下のスタイルを追加します。

#root {
    height: 100%;
    width: 100%;
}
tr:nth-child(even) {
    background: #F2F2F2;
}
tr:nth-child(odd) {
    background: #FFF;
}
th, td {
    padding-left: 1rem;
    padding-right: 1rem;
}
.viewer-host {
    height: 100vh;
    width: 100%;
}

12. App.jsxファイルを開き、そのコードを次のコードに置き換えます。

import { useEffect } from 'react';
import './App.css';
import { createViewer } from '@mescius/activereportsnet-viewer';
import "@mescius/activereportsnet-viewer/dist/jsViewer.min.css";
function App() {
    useEffect(() => {
        const viewer = createViewer({
            element: '#viewer-host',
            reportID: "DemoReport.rdlx"
        });
        return () => {
            viewer.destroy();
        };
    }, []);
    return (
        <div id="viewer-host" className="viewer-host" />
    );
}
export default App;

13. vite.config.jsファイルを開き、次のように設定を更新します。

proxy: {
    '/api':{
        target: 'http://localhost:5267',
        secure: false
    }
}

14. React 17 以降を使用する場合、「main.jsx」ファイルを開き、「import React from 'react'」ステートメントを削除し、<React.StrictMode>および</React.StrictMode>ステートメントを削除して厳密モードを無効にします。最終的なmain.jsxは次のようになります。

import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
    <App />
)

15. ［ビルド］ > ［ソリューションのビルド］をクリックして、ソリューションをビルドします。F5を押して実行します。