Oh look, a newly registered user asking a question about something which has probably been discussed to death already, yeah, yeah, yeah, I know, but please don’t hate me for this, I really have looked for a solution for quite a long time but Google has got nothing!
Basically, I’ve spent a few years writing a really large Angular application and I’m trying to work out whether to re-write it in React or VueJS. I much prefer the look of Vue to be honest but React does seem to be more popular so I’ve been researching how I would do this for a while, there’s just one thing I can’t seem to get past and it’s the use of JSX instead of HTML.
I do understand the benefits in certain situations and I can totally understand how it would work for small components with small templates., like a form field, a button or a drop down menu. The trouble is that my current application is divided into “pages”, not components and the router loads pages one at a time as you navigate around the site. Those pages contain lots of components but the pages themselves but can get pretty massive (one is over 1500 lines of html).
In Angular, pages are HTML files (with an accompanying JS controller file) and components are “directives” which normally have a smaller embedded HTML template.
Anyway, getting back to react, if everything has to be a component that means all of my pages have to become components too, including the massive 1500 HTML row pages, which presumably I would have to re-write as JSX? What if I need to generate the HTML template for a page using a server side language (e.g. what if I want asp.net to generate the template in the users language before the front-end takes over? This is fine in Angular).
So, How do people work with large amounts of HTML in JSX? Without any of the benefits of HTML editors like syntax highlighting etc. Is this even practical? Or is there a solution I’m missing?
Apologies for the rambling post. If anyone is still reading then help would be massively appreciated.