From 366d3a3befb3918cda59697cc6fe74397477db34 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Wed, 15 Sep 2021 08:03:28 -0500 Subject: [PATCH 1/3] Generate Angular and React components --- aspnetcore/blazor/components/index.md | 53 +++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md index b9665cbadc68..a27cf8aa286f 100644 --- a/aspnetcore/blazor/components/index.md +++ b/aspnetcore/blazor/components/index.md @@ -1093,6 +1093,59 @@ For a complete example of how to create custom elements with Blazor, see the [Bl > [!WARNING] > The custom elements feature is currently **experimental, unsupported, and subject to change or be removed at any time**. We welcome your feedback on how well this particular approach meets your requirements. +## Generate Angular and React components + +Generate framework-specific JavaScript (JS) components from Razor components for web frameworks, such as Angular or React. This capability isn't included with .NET 6, but is enabled by the new support for rendering Razor components from JS. The [JS component generation sample on GitHub](https://github.com/aspnet/samples/tree/main/samples/aspnetcore/blazor/JSComponentGeneration) demonstrates how to generate Angular and React components from Razor components. + +In the sample, an attribute for Razor components is used to generate Angular or React component wrappers: + +* For Angular: + + ```razor + @*Generate an Angular component*@ + @attribute [GenerateAngular] + ``` + +* For React: + + ```razor + @*Generate an React component*@ + @attribute [GenerateReact] + ``` + +Register the Razor components as Angular or React components: + +* For Angular: + + ```csharp + options.RootComponents.RegisterForAngular(); + ``` + +* For React: + + ```csharp + options.RootComponents.RegisterForReact(); + ``` + +When the project is built, Angular or React components are generated based on the Razor components. Use the components: + +* In Angular: + + ```html + + ``` + +* In React: + + ```html + + ``` + +The [sample](https://github.com/aspnet/samples/tree/main/samples/aspnetcore/blazor/JSComponentGeneration) isn't a complete solution for generating Angular and React components from Razor components, but we hope that the sample provides a basic demonstration. We welcome and encourage community efforts to build on this functionality. + +> [!WARNING] +> The Angular and React component features are currently **experimental, unsupported, and subject to change or be removed at any time**. We welcome your feedback on how well this particular approach meets your requirements. + ::: moniker-end ::: moniker range=">= aspnetcore-5.0 < aspnetcore-6.0" From 06827e118e319d74845901ca8e16ac5d1e02914b Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Wed, 15 Sep 2021 08:12:49 -0500 Subject: [PATCH 2/3] Updates --- aspnetcore/blazor/components/index.md | 46 --------------------------- 1 file changed, 46 deletions(-) diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md index a27cf8aa286f..e0298226cb0c 100644 --- a/aspnetcore/blazor/components/index.md +++ b/aspnetcore/blazor/components/index.md @@ -1097,52 +1097,6 @@ For a complete example of how to create custom elements with Blazor, see the [Bl Generate framework-specific JavaScript (JS) components from Razor components for web frameworks, such as Angular or React. This capability isn't included with .NET 6, but is enabled by the new support for rendering Razor components from JS. The [JS component generation sample on GitHub](https://github.com/aspnet/samples/tree/main/samples/aspnetcore/blazor/JSComponentGeneration) demonstrates how to generate Angular and React components from Razor components. -In the sample, an attribute for Razor components is used to generate Angular or React component wrappers: - -* For Angular: - - ```razor - @*Generate an Angular component*@ - @attribute [GenerateAngular] - ``` - -* For React: - - ```razor - @*Generate an React component*@ - @attribute [GenerateReact] - ``` - -Register the Razor components as Angular or React components: - -* For Angular: - - ```csharp - options.RootComponents.RegisterForAngular(); - ``` - -* For React: - - ```csharp - options.RootComponents.RegisterForReact(); - ``` - -When the project is built, Angular or React components are generated based on the Razor components. Use the components: - -* In Angular: - - ```html - - ``` - -* In React: - - ```html - - ``` - -The [sample](https://github.com/aspnet/samples/tree/main/samples/aspnetcore/blazor/JSComponentGeneration) isn't a complete solution for generating Angular and React components from Razor components, but we hope that the sample provides a basic demonstration. We welcome and encourage community efforts to build on this functionality. - > [!WARNING] > The Angular and React component features are currently **experimental, unsupported, and subject to change or be removed at any time**. We welcome your feedback on how well this particular approach meets your requirements. From 9e75967e38ae816c7c53aaeb1c44d9780ae8d8c6 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Wed, 15 Sep 2021 08:17:02 -0500 Subject: [PATCH 3/3] Updates --- aspnetcore/blazor/components/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md index e0298226cb0c..4392c8c933fa 100644 --- a/aspnetcore/blazor/components/index.md +++ b/aspnetcore/blazor/components/index.md @@ -1095,7 +1095,7 @@ For a complete example of how to create custom elements with Blazor, see the [Bl ## Generate Angular and React components -Generate framework-specific JavaScript (JS) components from Razor components for web frameworks, such as Angular or React. This capability isn't included with .NET 6, but is enabled by the new support for rendering Razor components from JS. The [JS component generation sample on GitHub](https://github.com/aspnet/samples/tree/main/samples/aspnetcore/blazor/JSComponentGeneration) demonstrates how to generate Angular and React components from Razor components. +Generate framework-specific JavaScript (JS) components from Razor components for web frameworks, such as Angular or React. This capability isn't included with .NET 6, but is enabled by the new support for rendering Razor components from JS. The [JS component generation sample on GitHub](https://github.com/aspnet/samples/tree/main/samples/aspnetcore/blazor/JSComponentGeneration) demonstrates how to generate Angular and React components from Razor components. See the GitHub sample app's `README.md` file for additional information. > [!WARNING] > The Angular and React component features are currently **experimental, unsupported, and subject to change or be removed at any time**. We welcome your feedback on how well this particular approach meets your requirements.