Upgrade and modernize Web App- ASP.net MVC to Rect JS+API 8.0

Question

Current State- ASP.NET MVC 4.8

Future State- React JS+ API 8.0 and host Azure contanerized apps

Can you pls provide the clarification,

1. How will UI part design, Req, Res?
2. API part - Design, Request, response part- how to design and integrate UI + API part.
3. Any impact, Any conversion tools,
4. how to host azure contanerized apps.

Answer 1

react uses components (pure if modern react) rather than views. you break your UI into components, and what state is passed to each component. UI / fetch events update state, which cause the component to pre-render with the new state.

you will convert you razor views to "page" components tied to the navigation component. then you should decompose each page into individual components.

your controllers should be converted to api calls that return json. as the react app has state, your controller actions may be returning too much data, you will probably want to redesign your view models.

you should learn the useState hook to fetch data from the webapi on component "load". this is how you get the view model. UI events can just async call the webapi, and the response updates state, which will re-render effected components.

there aren't any migration tools for this conversion.

see docs for deploying container app:

https://learn.microsoft.com/en-us/azure/container-apps/quickstart-portal

you can also just use asp.net core app service hosting, or host the the react as a static app, and use azure functions for the webapi:

https://azure.microsoft.com/en-us/products/app-service/static