2

I have an ASP.NET MVC Framework project. It's time to move the client part to modern React. The project is very big. How to organize all this correctly or can you share the project on the GitHub?

Foundation task. Do it together with ASP.NET MVC. What would both fronts work together on the same site. What would create the React routing and not break the current ASP.NET MVC routing?

Improve this question

1 Answer 1

Reset to default
3

If you want to use React or any SPA framework it means that you need to use SPA(Single Page Application) approach of building WEB application. Please see more about this here:

https://developer.mozilla.org/en-US/docs/Glossary/SPA

Here are general advices:

  1. Backend: Since you use ASP.NET MVC it would be flexible and easy to migrate your backend part to ASP .NET WEB API ( build REST endpoints). As contrary to MVC Razor pages approach, WEB API Controllers will return data, not a view. Of course you need to revise you logic at backend side and transfer from Razor pages required pieces of code that related to handling data etc.

  2. Frontend: Create a simple React application(here you can see the guide):

https://reactjs.org/docs/getting-started.html

You React application will send requests to the new WEB API Controllers not to MVC Controllers. Once you receive data from the backend side, store it and handle it at your Client-side. For storing your data I highly recommend you to use Redux Store: https://redux.js.org/api/store

  1. Routing: React has router https://v5.reactrouter.com/web/guides/quick-start using this router you will render and manipulate you pages on client side without page-refreshing according to the SPA conception, hence, no need to worry about your MVC routing.

  2. Example of application you can find at official page here: https://reactjs.org/community/examples.html . But I think once you complete the guide, this question is going to be skipped.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This is cool. But how to add which directory to use for spa? And how config routes to use MVS and SPA together.
@sir, your client is separately from your backend. You can create your own repository/folder for client application wherever you want it doesn't matter. You talk to your backend only via WEB API. React routing do rendering component as per path/route yes, but inside react components/services you will use backend calls to fetch data/update data etc. react router doesn't cross the mvc router, you can find anything in tutorial. here is super basic you can find: medium.com/bb-tutorials-and-thoughts/…
The fact of the matter is that the client frontend goes along with the backend. The route uses: {controller}/{action} return view{action}. I see to route ignore for /clientApp/{controller}/{action} But, need solve the routing in asp.net

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.