Adding React UI Components to Blazor Web Assembly Application

01-dotnet-new.sh

dotnet new blazorwasm -n BlazorJsSample

02-add-react-library.html

<script crossorigin src="//unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script crossorigin src="//unpkg.com/office-ui-fabric-react@7/dist/office-ui-fabric-react.js"></script>

03-add-react-component.html

<script>
  window.RenderProgressBar = (count) => {
    const Progress = () => React.createElement(
      Fabric.ProgressIndicator,
      {
        'label': 'React Counter',
        'description': count,
        'percentComplete': (count % 10) * 0.1
      },
      null
    );

    ReactDOM.render(Progress(), document.getElementById('reactProgressBar'));
  }
</script>

04-update-razor-page.razor

@page "/counter"
@inject IJSRuntime Jsr

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<div id="reactProgressBar"></div>

@code {
    private int currentCount = 0;

    private async void IncrementCount()
    {
        currentCount++;

        await Jsr.InvokeVoidAsync("RenderProgressBar", currentCount);
    }
}