目前官方只提供了angular和react俩种示例所以本教程只讲react教程
思路讲解：
首先在现有react项目中我们可能某些组件是在Blazor中完成，但是我们没办法找到怎么在react中轻量级使用blazor组件，可能会有人会使用`iframe`去加载Blazor项目，但是我不太喜欢这种方式，所以今天问了很多大佬，有大佬说可以直接在react使用Blazor组件的方式，并且找到了文档和示例（其实在Blazor文档中微软已经提到了这个但是由于在文档的在下面的示例中可能没什么人去看 [文档直通车]([ASP.NET Core Razor 组件 | Microsoft Learn](https://learn.microsoft.com/zh-cn/aspnet/core/blazor/components/?view=aspnetcore-7.0#render-razor-components-from-javascript))）
## 首先流程
1. 创建`react`项目
npx create-react-app react-debug cd react-debug yarn or npm i
将以下代码添加到App.js
importReact, { useState } from'react'; importlogofrom'./logo.svg'; import'./App.css'; functionApp() { const [nextCounterIndex, setNextCounterIndex] =useState(1); const [blazorCounters, setBlazorCounters] =useState([]); constaddBlazorCounter= () => { constindex=nextCounterIndex; setNextCounterIndex(index+1); setBlazorCounters(blazorCounters.concat([{ title: `Counter ${index}`, incrementAmount: index, }])); }; constremoveBlazorCounter= () => { setBlazorCounters(blazorCounters.slice(0, -1)); }; return ( <divclassName="App"><headerclassName="App-header"><imgsrc={logo} className="App-logo"alt="logo"/><p><buttononClick={addBlazorCounter}>AddBlazorcounter</button> <buttononClick={removeBlazorCounter}>RemoveBlazorcounter</button></p> {blazorCounters.map(counter=><divkey={counter.title}><my-blazor-countertitle={counter.title} increment-amount={counter.incrementAmount}></my-blazor-counter> //这里将是渲染razor组件的地方`my-blazor-counter`是在razor中定义的，会在下面讲到</div> )} </header></div> ); } exportdefaultApp;
将以下引用添加到`public/index.html`中 `Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js`是Microsoft.AspNetCore.Components.CustomElements 生成的
<htmllang="en"><head><metacharset="utf-8"/><linkrel="icon"href="%PUBLIC_URL%/favicon.ico"/><metaname="viewport"content="width=device-width, initial-scale=1"/><metaname="theme-color"content="#000000"/><metaname="description"content="Web site created using create-react-app"/><linkrel="apple-touch-icon"href="%PUBLIC_URL%/logo192.png"/><linkrel="manifest"href="%PUBLIC_URL%/manifest.json"/><title>React App</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><divid="root"></div><scriptsrc="_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script><scriptsrc="_framework/blazor.webassembly.js"></script></body></html>
2. 创建`WebAssembly`项目
mkdir webassembly cd webassembly dotnet new blazorwasm-empty
`WebAssembly`文件夹 并且在文件夹中创建 `WebAssembly`的空项目
需要确保项目是7.0 因为目前只支持6的预览和7的正式版
安装 `Microsoft.AspNetCore.Components.CustomElements`
<PackageReference="Microsoft.AspNetCore.Components.CustomElements"Version="7.0.2"/>
`Microsoft.AspNetCore.Components.CustomElements` 是提供组件化的主要实现
修改`Program.cs`的代码
usingMicrosoft.AspNetCore.Components.Web; usingMicrosoft.AspNetCore.Components.WebAssembly.Hosting; varbuilder=WebAssemblyHostBuilder.CreateDefault(args); // BlazorApp.Pages.Index可以修改成自己的渲染的razor组件// my-blazor-counter就是上面提到的razor对应的标记 这样就可以在react通过my-blazor-counter去渲染BlazorApp.Pages.Index组件的内容了builder.RootComponents.RegisterCustomElement<webassembly.Pages.Index>("my-blazor-counter"); builder.RootComponents.Add<HeadOutlet>("head::after"); awaitbuilder.Build().RunAsync(); ````webassembly.Pages.Index`组件相关代码```razor<h1></h1><prole="status">Currentcount: </p><p>Incrementamount: </p><buttonclass="btn btn-primary"="IncrementCount">Clickme</button> { privateintcurrentCount=0; [Parameter] publicstringTitle { get; set; } ="Blazor Counter"; [Parameter] publicint?IncrementAmount { get; set; } privatevoidIncrementCount() { currentCount+=IncrementAmount.GetValueOrDefault(1); } } <style>button { font-weight: bold; background-color: #7b31b8; color: white; border-radius: 4px; padding: 4px12px; border: none; } button:hover { background-color: #9654cc; cursor: pointer; } button:active { background-color: #b174e4; } </style>
## 如何查看运行效果：
如果需要查看运行效果有很多种方式比如通过代码将Blazor和react的代理到一块这样就可以一边修改一边预览，
但是我现在做最简单的
先将react build生成
yarn build
将build目录下面的所有文件拷贝到`webassembly\wwwroot`下，并且覆盖`index.html`
然后执行dotnet程序 在`webassembly`目录下执行
dotnet watch
将会打开浏览器 ，效果入下图，我们可以添加 `Add Blazor counter`
效果将是这样，可以点击`Click me`将会条件 Current count数量 点击`Remove Blazor counter`将会删除razor组件
好了效果差不多是这样字，
通过这个案例我们可以知道 blazor也可以像react那样嵌入在任何的现有项目中，并且使用方便，如果是vue的话目前还不知道是否支持 目前官方只提供了angular和react俩种实现，并且支持webassembly和server，***当前教程是WebAssembly***的实践，Server会有所差异，
## 结尾
项目地址：示例项目地址
官方示例: https://github.com/aspnet/AspLabs/tree/main/src/BlazorCustomElements
技术交流群：737776595
来着token的分享;
