My company has a fully functioning ASP.NET MVC app (with Razor views).
They want to move to using React on the frontend.
Now I understand how to inject a React app it's just they want to do it bit by bit. Replace couple of components on the page then maybe the whole view and the move to another one.
Normally React creates a bundle that you just import to your index file. But that's just one endpoint. Not sure if this would work in this scenario.
Related
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?
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:
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.
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
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.
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.
We have an existing legacy laravel application and like to convert it into a react application for this kind of application we want to migrate but can't do in a big bang way. what is Ideally needed? make a react application and put laravel application in an iframe and then migrate one by one section? thinking of using httpclient and parse dom.
do we have a better way?
Well, firstly you need to actually analyze the scope of work that needs to happen.
Ideally, you migrate component of your Laravel app step by step to React app.
I Have an angular Application build on 8+ now I have a requirement where I want to create react component and embed it in Angular Application.
How my Angular folder structure will be modified, is there any possible design pattern I have to follow while working both angular and react in one application?
I am not a guru of the frontend, as I know it is possible.
Interact through Web Component spec
Apply Microfrontend patterns to mix Angular/React in the sample application
Ionic team created a project named stencil which targets WebComponent development and conceptly it mixes the Angular and React good part in the same framework.
So the question is if it is possible to split a React app into two different separate apps hosted on two different hosts, where the app A is a kind of a frame which controls the app B and C in the future. I have a problem, where I would like to make a common fundament for both apps (the A app) and then load two other as a content of it. It would be as if I had lazy loading with a bundle fetched from a different place. I was thinking about three main possibilities:
Iframe
Single SPA project from github
using ReactDOM.render method
I am not sure if it is possible at all, beacuse there still may be a problem with React Router - does the inside app have access to manipulate the browser routing?
It is quite possible to split your react Application into multiple smaller react applications.
Suppose you have a react application such as an e-commerce platform . You can choose to write the cart Page using a separate react-App and the products page using another separate react app and integrate them together using Module Federation Plugin webpack/lib/container/ModuleFederationPlugin.
A good reason to do something like that would be to develop different parts of your application in isolation ..and they can be taken care by different teams altogether.
There is a udemy course that teaches you exactly that. Very much recommended. You can make react dependency as singleton to avoid several installs of react.
All 3 of these options you've stated are valid and can be used to share components but there are few disadvantages to each one, for example- iFrames makes it hard to create responsiveness, ReactDOM splits your app so that the different parts won't have the same global scope...
Module-Federation is the best and most efficient way to share remote components that i know of, here is a github link to a basic project.
The MF plugin makes use of webpack's abilities, which means that the shared components are being consumed as runtime objects of the app's scope, rather then as a promise of an iframe.
NOTE: Debugging and updating a Module Federation project is a much deeper task then debugging a create-react-app application, you'll need to share dependencies correctly and remember to update desired changes at all the right places all the time.
This is not possible. Each react app can only have a single package.json in the hierarchy. if you nest it, the app will fail and say you have several installs of react. what you should do is think more react minded and objecty. You can have a folder for common components to share inside src/. You can also have src/A which is one "app". src/B which is another.
What you described in your question is exactly what you should do, just dont think of it as a react app separation, rather a seperation of component and app inside the src folder. App A can be comprised of components from /components as well as App B.
I have a asp.net core web application. My application has some reactjs components, that runs client side.
In my asp.net core views, i use IViewLocalizer to localize my pages and it works just fine.
I have found some projects like react-localization to handle this on reactjs. To use it, I need to do one of the following:
In my view create an object with my resources and give it to react-localization
Create an endpoint that return my resources, call it inside reactjs component and give it to react-localization
My question is, what is the best approach to bring localization to reactjs components?
When i posted this question, i had a simple react application with less than ten resources.
I chose the number one option, in my view create an object with my resources and give it to react because it is a more simple solution.
On another big react project, i chose the number two option: create an endpoint that return my resources and call it inside reactjs. It is a bit more complex, but all logic is inside reactjs and the html does not have a giant script object with all resources.