diff --git a/docs/en/get-started/layered-web-application.md b/docs/en/get-started/layered-web-application.md index cfbe1ebc40..f4a383ff0b 100644 --- a/docs/en/get-started/layered-web-application.md +++ b/docs/en/get-started/layered-web-application.md @@ -10,7 +10,7 @@ ````json //[doc-params] { - "UI": ["MVC", "Blazor", "BlazorServer", "BlazorWebApp", "NG", "React"], + "UI": ["MVC", "Blazor", "BlazorServer", "BlazorWebApp", "NG"], "DB": ["EF", "Mongo"], "Tiered": ["Yes", "No"] } @@ -62,8 +62,6 @@ Once your configuration is done, click the *Next* button to navigate to the *UI ![abp-studio-new-solution-dialog-ui-framework-blazor-webapp](images/abp-studio-new-solution-dialog-ui-framework-blazor-webapp_dark.png) {{ else if UI == "NG" }} ![abp-studio-new-solution-dialog-ui-framework-ng](images/abp-studio-new-solution-dialog-ui-framework-ng_dark.png) -{{ else if UI == "React" }} -React UI is available in the modern template flow with ABP Studio v3.0+. Select **React** in the UI Framework list to create the React app and Admin Console integration. {{ end }} Here, you see all the possible UI options supported by that startup solution template. Pick the **{{ UI_Value }}**. @@ -194,9 +192,6 @@ You can start the following application(s): {{ if UI == "NG" }} {{ if Tiered == "No" }}- `Acme.BookStore.HttpApi.Host`{{ end }} - `Acme.BookStore.Angular` -{{ else if UI == "React" }} -{{ if Tiered == "No" }}- `Acme.BookStore.HttpApi.Host`{{ end }} -- `react` {{ else if UI == "Blazor" }} {{ if Tiered == "No" }}- `Acme.BookStore.HttpApi.Host`{{ end }} - `Acme.BookStore.Blazor` @@ -212,7 +207,7 @@ You can start the following application(s): > Notice that the services running in docker-compose are exposed to your localhost. If any service in your localhost is already using the same port(s), you will get an error. In that case, stop your local services first. {{ end }} -Once the {{ if UI == "React" }}`react`{{ else }}`Acme.BookStore.{{ if UI == "NG" }}Angular{{ else if UI == "BlazorServer" || UI == "Blazor" || UI == "BlazorWebApp" }}Blazor{{ else }}Web{{ end }}`{{ end }} application started, you can right-click it and select the *Browse* command: +Once the `Acme.BookStore.{{ if UI == "NG" }}Angular{{ else if UI == "BlazorServer" || UI == "Blazor" || UI == "BlazorWebApp" }}Blazor{{ else }}Web{{ end }}` application started, you can right-click it and select the *Browse* command: ![abp-studio-quick-start-browse-command](images/abp-studio-quick-start-browse-command_dark.png) @@ -244,11 +239,7 @@ Once the solution is opened in Visual Studio, you should see a screen like shown ![visual-studio-bookstore-application](images/visual-studio-bookstore-application_dark.png) -{{ if UI == "React" }} -Right-click the `Acme.BookStore.HttpApi.Host` project and select the *Set as Startup Project* command. You can then hit *F5* or *Ctrl + F5* to run the backend host application. Start the React application from the `react` folder with `npm run dev`, then browse the React UI. -{{ else }} Right-click the `Acme.BookStore.{{ if UI == "NG" || UI == "Blazor" }}HttpApi.Host{{ else if UI == "BlazorServer" || UI == "BlazorWebApp" }}Blazor{{ else }}Web{{ end }}` project and select the *Set as Startup Project* command. You can then hit *F5* or *Ctrl + F5* to run the web application. It will run and open the application UI in your default browser: -{{ end }} ![bookstore-browser-users-page](images/bookstore-browser-users-page_dark.png) @@ -266,7 +257,7 @@ You can start the following application(s): - `Docker-Dependencies` - `Acme.BookStore.AuthServer` - `Acme.BookStore.HttpApi.Host` -{{ else if UI == "NG" || UI == "Blazor" || UI == "React" }} +{{ else if UI == "NG" || UI == "Blazor" }} - `Acme.BookStore.HttpApi.Host` {{ else if UI == "BlazorServer" }} - `Acme.BookStore.Blazor` diff --git a/docs/en/get-started/microservice.md b/docs/en/get-started/microservice.md index 5fb5aa927c..d30e3926fc 100644 --- a/docs/en/get-started/microservice.md +++ b/docs/en/get-started/microservice.md @@ -64,8 +64,6 @@ On that screen, you can enable multi-tenancy for your solution. After selecting Here, you see all the possible UI options supported by that startup solution template. You can pick your favorite one and click the *Next* button for the *Mobile Framework* selection screen: -If you select **React**, the solution includes the main React application and the React Admin Console surface. The Admin Console uses its own OpenIddict client and is served through the Web Gateway with the rest of the solution. - ![abp-studio-new-solution-dialog-mobile-framework](images/abp-studio-new-solution-dialog-mobile-framework-microservice.png) Here, you see all the mobile applications available in that startup solution template. These mobile applications are well-integrated into your solution and can use the same backend with your web application. They are simple (do not have pre-built features as much as the web application) but a very good starting point to build your mobile application. @@ -202,7 +200,7 @@ You can click the *Play* button on the root item in *Solution Runner* to start a > > Some applications/services may fail on the first run. That may be because of service and database dependencies were not satisfied and an error occurs on the application startup. ABP Studio automatically restarts failing services until it is successfully started. Being completely ready for such a distributed solution may take a while, but it will be eventually started. -Once all the applications are ready, you can right-click the main web application and select the *Browse* command. For React UI solutions, this is the `react` application. +Once all the applications are ready, you can right-click the `Web` application and select the *Browse* command: ![abp-studio-microservice-solution-runner-browse](images/abp-studio-microservice-solution-runner-browse.png) diff --git a/docs/en/get-started/single-layer-web-application.md b/docs/en/get-started/single-layer-web-application.md index 7c25202f04..ef657722b0 100644 --- a/docs/en/get-started/single-layer-web-application.md +++ b/docs/en/get-started/single-layer-web-application.md @@ -10,7 +10,7 @@ ````json //[doc-params] { - "UI": ["MVC", "Blazor", "BlazorServer", "BlazorWebApp", "NG", "React"], + "UI": ["MVC", "Blazor", "BlazorServer", "BlazorWebApp", "NG"], "DB": ["EF", "Mongo"] } ```` @@ -62,8 +62,6 @@ Once your configuration is done, click the *Next* button to navigate to the *UI ![abp-studio-new-solution-dialog-ui-framework-blazor-webapp](images/abp-studio-no-layers-new-solution-dialog-ui-framework-blazor-webapp_dark.png) {{ else if UI == "NG" }} ![abp-studio-new-solution-dialog-ui-framework-ng](images/abp-studio-no-layers-new-solution-dialog-ui-framework-ng_dark.png) -{{ else if UI == "React" }} -React UI is available in the modern template flow with ABP Studio v3.0+. Select **React** in the UI Framework list to create the React app and Admin Console integration. {{ end }} Here, you see all the possible UI options supported by that startup solution template. Pick the **{{ UI_Value }}**. @@ -148,9 +146,9 @@ In the Solution Runner section (on the left side) you can see all the runnable a To start an application, either click the *Play* icon near to the application or right-click and select the *Run* -> *Start* context menu item. -You can start the `Acme.BookStore`{{ if UI == "NG" }} and `Acme.BookStore.Angular`{{ else if UI == "React" }} and `react`{{ end }}. +You can start the `Acme.BookStore`{{ if UI == "NG" }} and `Acme.BookStore.Angular`{{ end }}. -Once the {{ if UI == "React" }}`react`{{ else }}`Acme.BookStore{{ if UI == "NG" }}.Angular{{ end }}`{{ end }} application started, you can right-click it and select the *Browse* command: +Once the `Acme.BookStore{{ if UI == "NG" }}.Angular{{ end }}` application started, you can right-click it and select the *Browse* command: ![abp-studio-quick-start-browse-command](images/abp-studio-no-layers-quick-start-browse-command_dark.png) @@ -182,11 +180,7 @@ Once the solution is opened in Visual Studio, you should see a screen like shown ![visual-studio-bookstore-application](images/no-layers-visual-studio-bookstore-application_dark.png) -{{ if UI == "React" }} -You can then hit *F5* or *Ctrl + F5* to run the backend host application. Start the React application from the `react` folder with `npm run dev`, then browse the React UI. -{{ else }} You can then hit *F5* or *Ctrl + F5* to run the web application. It will run and open the application UI in your default browser: -{{ end }} ![bookstore-browser-users-page](images/no-layers-bookstore-browser-users-page_dark.png) diff --git a/docs/en/modules/identity.md b/docs/en/modules/identity.md index b7f13a9c8b..d92f4b7b8e 100644 --- a/docs/en/modules/identity.md +++ b/docs/en/modules/identity.md @@ -19,7 +19,7 @@ The source code of this module can be accessed [here](https://github.com/abpfram ## User Interface -This module provides [Blazor](../framework/ui/blazor/overall.md), [Angular](../framework/ui/angular/quick-start.md), [React](../framework/ui/react/index.md) and [MVC / Razor Pages](../framework/ui/mvc-razor-pages/overall.md) UI options. +This module provides [Blazor](../framework/ui/blazor/overall.md), [Angular](../framework/ui/angular/quick-start.md) and [MVC / Razor Pages](../framework/ui/mvc-razor-pages/overall.md) UI options. ### Menu Items diff --git a/docs/en/solution-templates/layered-web-application/overview.md b/docs/en/solution-templates/layered-web-application/overview.md index a75698fd79..1a091649cc 100644 --- a/docs/en/solution-templates/layered-web-application/overview.md +++ b/docs/en/solution-templates/layered-web-application/overview.md @@ -96,7 +96,6 @@ The solution comes with a main web application with the following UI Framework o * **Blazor WebAssembly** * **Blazor Server** * **Blazor WebApp** -* **[React UI](../../framework/ui/react/index.md)** * **MAUI with Blazor (Hybrid)** **\*** ### The Mobile Application diff --git a/docs/en/solution-templates/layered-web-application/web-applications.md b/docs/en/solution-templates/layered-web-application/web-applications.md index 38d35772e1..8400a6dfbe 100644 --- a/docs/en/solution-templates/layered-web-application/web-applications.md +++ b/docs/en/solution-templates/layered-web-application/web-applications.md @@ -27,7 +27,6 @@ The web applications are the main user interfaces of the solution. They are the - **MVC / Razor Pages**: This is an ASP.NET Core MVC application. It is a traditional web application that serves HTML pages to users and is suitable for building web applications with server-side rendering. - **Angular**: This is an Angular application, a single-page application (SPA) that runs on the client side. It communicates with the server using HTTP requests and is ideal for building modern web applications with rich user interfaces. -- **React UI**: This is a React application, a single-page application (SPA) that runs on the client side. It communicates with the server using HTTP requests and includes the React-based ABP Admin Console integration. - **Blazor UI**: A flexible framework for building web applications with .NET. It supports various hosting models: - **Blazor WebAssembly**: This is a client-side SPA that runs entirely in the user's browser. It communicates with the server using HTTP requests and is suitable for modern web applications with rich interactivity and offline capabilities. - **Blazor Server**: This is a server-side SPA that runs on the server and communicates with the client in real time using SignalR. It is ideal for applications requiring constant connectivity and rapid server updates. @@ -131,18 +130,6 @@ See the [testing document](https://angular.dev/guide/testing). * [Chart.js](https://www.chartjs.org/) is used to create widgets. * [ngx-validate](https://github.com/ng-turkey/ngx-validate) is used for dynamic validation of reactive forms. -## React UI - -React UI is a modern SPA option built with React, Vite, TanStack Router, TanStack Query, shadcn/ui-style components, Axios, and Vitest. - -When you select the React option in the Layered Solution Template, it generates: - -- A React application located under the solution's root folder, typically named `react`. -- An ASP.NET Core application, named `*.HttpApi.Host`, where the server-side HTTP APIs run. -- An embedded React Admin Console hosted by the backend through the `Volo.Abp.AdminConsole` package. - -The React application communicates with the server by sending HTTP requests to the `*.HttpApi.Host` application. See the [React UI documentation](../../framework/ui/react/index.md) for details. - ## Blazor UI Blazor is a flexible framework for building web applications with .NET. It supports various hosting models, including Blazor WebAssembly, Blazor Server, Blazor WebApp, and Maui Blazor (Hybrid). diff --git a/docs/en/solution-templates/microservice/overview.md b/docs/en/solution-templates/microservice/overview.md index 6edc7c3c67..fc322565c3 100644 --- a/docs/en/solution-templates/microservice/overview.md +++ b/docs/en/solution-templates/microservice/overview.md @@ -47,7 +47,7 @@ The following features are built and pre-configured for you in the solution. * **Authentication** is fully configured based on best practices; * **JWT Bearer Authentication** for microservices and applications. * **OpenId Connect Authentication**, if you have selected the MVC UI. - * **Authorization code flow** is implemented, if you have selected a SPA UI (Angular, Blazor WASM or React). + * **Authorization code flow** is implemented, if you have selected a SPA UI (Angular or Blazor WASM). * Other flows (resource owner password, client credentials...) are easy to use when you need them. * **[Permission](../../framework/fundamentals/authorization/index.md)** (authorization), **[setting](../../framework/infrastructure/settings.md)**, **[feature](../../framework/infrastructure/features.md)** and the **[localization](../../framework/fundamentals/localization.md)** management systems are pre-configured and ready to use. * **[Background job system](../../framework/infrastructure/background-jobs/index.md)** with [RabbitMQ integrated](../../framework/infrastructure/background-jobs/rabbitmq.md). @@ -105,7 +105,6 @@ The solution comes with a main web application with the following UI Framework o * **MVC / Razor Pages UI** * **Blazor WebAssembly** * **Blazor Server** -* **[React UI](../../framework/ui/react/index.md)** * **MAUI with Blazor (Hybrid)** ### The Mobile Application diff --git a/docs/en/solution-templates/microservice/web-applications.md b/docs/en/solution-templates/microservice/web-applications.md index ffe7d37509..6c50a7801a 100644 --- a/docs/en/solution-templates/microservice/web-applications.md +++ b/docs/en/solution-templates/microservice/web-applications.md @@ -57,7 +57,6 @@ The following options are provided while [creating the solution](../../get-start * Angular * Blazor WebAssembly * Blazor Server -* React UI * MAUI Blazor (Hybrid) The following sections explain each of these UI types. @@ -78,10 +77,6 @@ If you've selected the Blazor WebAssembly UI while creating your solution, `Acme If you've selected the Blazor Server UI while creating your solution, `Acme.CloudCrm.Blazor` project is included in the `apps` folder of the solution. That folder contains the main web application of the solution that is implemented using Blazor Server. -### React Web Application - -If you've selected the React UI while creating your solution, the `react` application is included in the `apps` folder of the solution. The template also includes the React Admin Console surface. Both are served through the Web Gateway and authenticate with the AuthServer using OpenID Connect. - ### MAUI Blazor (Hybrid) Web Application If you've selected the MAUI Blazor (Hybrid) UI while creating your solution, `Acme.CloudCrm.MauiBlazor` project is included in the `apps` folder of the solution. That folder contains the main desktop application of the solution that is implemented using MAUI Blazor (Hybrid) that uses existing Blazor UI Implementation. diff --git a/docs/en/solution-templates/single-layer-web-application/overview.md b/docs/en/solution-templates/single-layer-web-application/overview.md index 568fa4294a..c7e16090a7 100644 --- a/docs/en/solution-templates/single-layer-web-application/overview.md +++ b/docs/en/solution-templates/single-layer-web-application/overview.md @@ -92,7 +92,6 @@ The solution comes with a main web application with the following UI Framework o * **MVC / Razor Pages UI** * **Blazor WebAssembly** * **Blazor Server** -* **[React UI](../../framework/ui/react/index.md)** ### Multi-Tenancy & SaaS Module **\*** diff --git a/docs/en/solution-templates/single-layer-web-application/web-applications.md b/docs/en/solution-templates/single-layer-web-application/web-applications.md index 5681c296c9..f454b3630e 100644 --- a/docs/en/solution-templates/single-layer-web-application/web-applications.md +++ b/docs/en/solution-templates/single-layer-web-application/web-applications.md @@ -25,7 +25,6 @@ The single-layer solution template includes a web application project that acts - **MVC / Razor Pages**: This is an ASP.NET Core MVC application. It is a traditional web application that serves HTML pages to users and is suitable for building web applications with server-side rendering. - **Angular**: This is an Angular application, a single-page application (SPA) that runs on the client side. It communicates with the server using HTTP requests and is ideal for building modern web applications with rich user interfaces. -- **React UI**: This is a React application, a single-page application (SPA) that runs on the client side. It communicates with the server using HTTP requests and includes the React-based ABP Admin Console integration. - **Blazor UI**: A flexible framework for building web applications with .NET. It supports various hosting models: - **Blazor WebAssembly**: This is a client-side SPA that runs entirely in the user's browser. It communicates with the server using HTTP requests and is suitable for modern web applications with rich interactivity and offline capabilities. - **Blazor Server**: This is a server-side SPA that runs on the server and communicates with the client in real time using SignalR. It is ideal for applications requiring constant connectivity and rapid server updates. @@ -51,18 +50,6 @@ When you select the Angular option in the single-layer solution template, it gen The Angular application runs as a client-side SPA in the user's browser and communicates with the server by sending HTTP requests to the ASP.NET Core host application. -## React UI - -React UI is a modern SPA option built with React, Vite, TanStack Router, TanStack Query, shadcn/ui-style components, Axios, and Vitest. - -When you select the React option in the single-layer solution template, it generates: - -- A React application located under the solution's root folder, typically named `react`. -- The ASP.NET Core host application, usually named something like `Acme.BookStore`. -- An embedded React Admin Console hosted by the backend through the `Volo.Abp.AdminConsole` package. - -The React application runs as a client-side SPA in the user's browser and communicates with the server by sending HTTP requests to the ASP.NET Core host application. See the [React UI documentation](../../framework/ui/react/index.md) for details. - ## Blazor UI Blazor is a flexible framework for building web applications with .NET. It supports various hosting models, including Blazor WebAssembly, Blazor Server, Blazor WebApp, and Maui Blazor (Hybrid).