Add React samples

10.0/BlazorWebAssemblyReact/.gitignore

@@ -0,0 +1,33 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+**/bin/**
+**/obj/**
+**/.vs/**
+
+**/build/**
+**/node_modules/**
+**/public/*.wasm
+**/public/*.js
+**/public/*.dat

10.0/BlazorWebAssemblyReact/README.md

@@ -0,0 +1,38 @@
+# Blazor WebAssembly in a React app
+
+This sample shows how to use Blazor WebAssembly integrated into a React app.
+
+* [Blazor Community Standup - Integrate .NET in JavaScript apps](https://www.youtube.com/watch?v=tAh899Gri4E)
+* [.NET + React demo (`DotNetWasmReact`, .NET 10 or later, `dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples)
+* [Host and deploy: JavaScript bundler support](https://learn.microsoft.com/aspnet/core/blazor/host-and-deploy/#javascript-bundler-support)
+
+## Project structure
+
+* `app`: Target React app using rollup to do the JavaScript build.
+* `blazor`: Blazor WebAssembly app containing several components.
+
+## Live demo
+
+https://maraf.github.io/blazor-wasm-react/
+
+## Building the source code
+
+### .NET
+
+* Install the [.NET SDK](https://dotnet.microsoft.com/download) (.NET 10 or later).
+* Run `dotnet publish` in the `blazor` folder.
+
+### App
+
+In the `react` folder:
+
+* Run `npm install`.
+* Run `npm run build`.
+
+## Producing bundler-friendly build output
+
+In JS, file dependencies, such as other JS files or images, are resolved using `import` statements. In browsers, only JS files can be imported using `import` statements. In .NET 10 or later, the .NET SDK can produce build output for JavaScript (JS) bundlers with the MSBuild property `WasmBundlerFriendlyBootConfig` set to `true`.
+
+Only publishing the app (`dotnet publish` or **Publish** in Visual Studio/Visual Studio Code) copies all files to the output directory. Bundler-friendly output isn't generated when building an app to make incremental builds faster. Making it work for build output should be possible by properly mapping imports to individual locations using a bundler's custom plugin. Microsoft doesn't provide any such plugin at the moment.
+
+For more information, see [Host and deploy: JavaScript bundler support](https://learn.microsoft.com/aspnet/core/blazor/host-and-deploy/#javascript-bundler-support) in the ASP.NET Core Blazor documentation.

10.0/BlazorWebAssemblyReact/blazor/Counter.razor

@@ -0,0 +1,16 @@
+<h1>Counter</h1>
+
+<p role="status">Current count: @currentCount</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+
+@code {
+    private int currentCount = 0;
+
+    [Parameter]
+    public int Initial { get; set; } = 0;
+
+    protected override void OnParametersSet() => currentCount = Initial;
+
+    private void IncrementCount() => currentCount++;
+}

10.0/BlazorWebAssemblyReact/blazor/DateTimeNow.razor

@@ -0,0 +1,12 @@
+<h1>Date and Time</h1>
+
+<p role="status">Current Date and Time: @currentDateTime.ToString("F")</p>
+
+<button class="btn btn-primary" @onclick="UpdateDateTime">Refresh</button>
+
+@code {
+    private DateTime currentDateTime = DateTime.Now;
+
+    private void UpdateDateTime()
+        => currentDateTime = DateTime.Now;
+}

10.0/BlazorWebAssemblyReact/blazor/Program.cs

@@ -0,0 +1,9 @@
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using blazor;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.RegisterCustomElement<Counter>("blazor-counter");
+builder.RootComponents.RegisterCustomElement<DateTimeNow>("blazor-date-time-now");
+
+await builder.Build().RunAsync();

10.0/BlazorWebAssemblyReact/blazor/_Imports.razor

@@ -0,0 +1,9 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using blazor

10.0/BlazorWebAssemblyReact/blazor/blazor.csproj

@@ -0,0 +1,20 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <WasmBundlerFriendlyBootConfig>true</WasmBundlerFriendlyBootConfig>
+    <WasmFingerprintAssets>false</WasmFingerprintAssets>
+    <CompressionEnabled>false</CompressionEnabled>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.CustomElements" Version="10.0.0-preview.7.25351.106" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.0-preview.7.25351.106" />
+  </ItemGroup>
+
+</Project>

10.0/BlazorWebAssemblyReact/blazor/wwwroot/main.js

@@ -0,0 +1,12 @@
+import Blazor from './_framework/blazor.webassembly.js';
+
+let isBlazorLoaded = false;
+
+export async function start() {
+    if (isBlazorLoaded) {
+        return;
+    }
+
+    await Blazor.start();
+    isBlazorLoaded = true;
+}

10.0/BlazorWebAssemblyReact/blazor/wwwroot/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "blazor",
+    "type": "module",
+    "main": "./main.js",
+    "module": "./main.js",
+    "exports": {
+        ".": {
+            "import": "./main.js",
+            "require": "./main.js"
+        }
+    }
+}