Adding Blazor to a React site

Adding Blazor to a React site is very similar to Angular.

This demo is based on the ASP.NET Core with React template in Visual Studio.

The project is called ReactProject.

First, we need a reference to our Blazor library. I added the BlazorCustomElement project as a reference.

We need a reference to the Microsoft.AspNetCore.Components.WebAssembly.Server NuGet package, this is to be able to serve the framework files.

To make our site serve the framework files we need to add the following to the program.cs:

app.UseBlazorFrameworkFiles();

Next, it’s time to add our component.

In the ClientApp/src/components/Home.js we add our custom tag:

<my-blazor-counter increment-amount="10"></my-blazor-counter>

In this case, we set the increment amount parameter to 10 which will increase the counter by 10 every time we click it.

To make this all work we need to load a couple of JavaScripts, in the ClientApp/public/Index.html we need to add...