Adding React UI Components, by node.js/npm packages, to Blazor Web Assembly Application

01-dotnet-new.sh

dotnet new blazorwasm -n BlazorNpmSample

02-npm-init.sh

npm init

03-npm-install-save.sh

npm install @fluentui/react react react-dom --save

04-npm-install-save-dev.sh

npm install @babel/core babel-loader webpack webpack-cli --save-dev

05-progressbar.js

import * as React from 'react';
import ReactDOM from 'react-dom';
import { ProgressIndicator } from '@fluentui/react/lib/ProgressIndicator';

export function renderProgressBar(count) {
    const Progress = () => React.createElement(
        ProgressIndicator,
        {
            'label': 'React Counter',
            'description': count,
            'percentComplete': (count % 10) * 0.1
        },
        null
    );

    ReactDOM.render(Progress(), document.getElementById('reactProgressBar'));
}

06-index.js

import { renderProgressBar } from './progressbar';

export function RenderProgressBar(count) {
    return renderProgressBar(count);
}

07-webpack-config.js

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, '../wwwroot/js'),
    filename: "bundle.js",
    library: "FluentUiComponents",
    libraryTarget: "window"
  }
};

08-index.html

<script src="_framework/blazor.webassembly.js"></script>
<script src="js/bundle.js"></script>

09-package.json

{
  ...
  "scripts": {
    "build": "webpack --mode production"
  },
  ...
}

10-counter.razor

private async void IncrementCount()
{
    ...
    await Jsr.InvokeVoidAsync("FluentUiComponents.RenderProgressBar", currentCount);
}

11-app.csproj

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netstandard2.1</TargetFramework>
    <RazorLangVersion>3.0</RazorLangVersion>

    <JsLibraryRoot>JsLibraries\</JsLibraryRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(JsLibraryRoot)node_modules\**</DefaultItemExcludes>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.0" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0" PrivateAssets="all" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.0" PrivateAssets="all" />
    <PackageReference Include="System.Net.Http.Json" Version="3.2.0" />
  </ItemGroup>

  <ItemGroup>
    <Content Remove="$(JsLibraryRoot)**" />
    <None Remove="$(JsLibraryRoot)**" />
    <None Include="$(JsLibraryRoot)**" Exclude="$(JsLibraryRoot)node_modules\**" />
  </ItemGroup>

  <Target Name="PublishRunWebpack" AfterTargets="Build">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(JsLibraryRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(JsLibraryRoot)" Command="npm run build" />
  </Target>
</Project>