Adding React UI Components, by node.js/npm packages, to Blazor Web Assembly Application
dotnet new blazorwasm -n BlazorNpmSample |
npm init |
npm install @fluentui/react react react-dom --save |
npm install @babel/core babel-loader webpack webpack-cli --save-dev |
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')); | |
} |
import { renderProgressBar } from './progressbar'; | |
export function RenderProgressBar(count) { | |
return renderProgressBar(count); | |
} |
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" | |
} | |
}; |
<script src="_framework/blazor.webassembly.js"></script> | |
<script src="js/bundle.js"></script> |
{ | |
... | |
"scripts": { | |
"build": "webpack --mode production" | |
}, | |
... | |
} |
private async void IncrementCount() | |
{ | |
... | |
await Jsr.InvokeVoidAsync("FluentUiComponents.RenderProgressBar", currentCount); | |
} |
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment