-
Book Overview & Buying
-
Table Of Contents
Web Development with Blazor - Fourth Edition
By :
Adding Blazor to a React site is very similar to Angular. This demo is based on the React and ASP.NET Core template in Visual Studio. The project is called ReactFrontend.
Next, it's time to add our component. In ReactFrontend/src/App.tsx, 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 increments the counter by 10 each time we click it.
To make React be ok with custom elements, we can create a file called custom‑elements.d.ts with the following content:
import 'react';
declare module 'react' {
namespace JSX {
interface IntrinsicElements {
[elemName: string]: any;
}
}
}
To load and run the Blazor custom element, we need to include the required JavaScript that bootstraps the Blazor runtime and ensures the component can fetch its resources. In ReactFrontend/index...