I have an existing codebase that I setup using EJS for front end templating. I want to use the same api, but with React instead.
Is there a step by step suggested way to do this?
I don’t want to wipe it all out and rewrite everything, although I guess it’s just the /views fodler where my EJS files are that needs to change.
Additionally my routes need to send JSON and not a res.render (‘ejsfile’, {}).
But I’m afraid if I start from zero i’ll be reinventing my views, layouts and logic.
Any suggestions?
I’m interested in whether I have to create a webpack solutoin, or can I just include react, react-dom, babel in my index file?
I searched this forum and serached google 10 pages deep and could not find this, yet read over and over that I can simply introduce react into an existing codebase one component at a time.
I don’t think there can be a “one size fits all step by step” approach. They are such different approaches that they are speaking different languages. I think you just have to know your React and know your ejs and make the conversion. You’ll pretty much be building the React app with the finished ejs app as a code. You can probably reuse some of the original JS logic but you’re going to have to do a lot of refactoring.
If you use import and all those latest syntax, you will need to implement babel, webpack etc. Later you can learn and implement client side rendering with proxy and more, but let’s keep it simple for now.
Thanks for the suggestions. I found the react documentation talks about this and with ReactDOM you can insert something as tiny as a button into An existing site. But I’m still confused how and where. I’ve installed react and babel and can get bank to compile an es6 file to run my server code, but still struggling in where the rest of my existing code would receive a DOM injection.
It sounds like you still need an understanding of React. I would not even attempt something like this without an understanding of React. Again, React and ejs are very different ways to structure an app. It’s not as simple as “replace this with that”. You really have to understand how to structure an app in React because you will be creating that from scratch. Much of the JS logic can get reused but you will have to make the React components and JSX. In a typical React app, there is almost no HTML, instead being injected as JSX. This is almost the polar opposite of ejs.
Well, I’ve made more react apps than I have made .ejs apps. That’s the whole point…taking the time to rewrite it means the current app wouldn’t be functional until it’s completely rewritten and that’s not absolutely necessary.
Not only am I still learning more about React, but I want to be more fluent with React…it can be inserted into ANY site…it’s not an exclusive front end. I’m trying to get more practice doing that…“React is just javascript”.
JSX is different and that’s part of what’s confusing me in compiling it…but I can write it all without using JSX at all, and it’s still React.
I feel like i’m asking someone to help me look for my keys that I dropped right here, and you’re saying, look over there, the light is better.
I know it’s easier to write react from the ground up sometimes…but I also know that there is another way to integrate react. I’m asking this question not because this is how I plan to learn react, but because I specifically want to transition a site from .ejs to React…they’re not mutually exclusive they’re just different. (React is just javascript…)
However I do appreciate your interest and when I sort this out, I’ll post an update!
To me, it’s like saying, “I have a car. How do I turn it into a submarine?” You don’t. Sure, you can reuse some parts. Maybe even have a similar layout a feel, but those are such fundamentally different concepts that it’s hard to turn one into the other. I think it is better to ask, “How do I build a submarine? I may get to modify and reuse several of the car parts, but my primary focus is on building the best submarine I can, not some kluged car-marine.”
I haven’t done a lot of ejs, but I’ve done a little handlebars which is conceptually similar. I think completely differently for the two. I guess, if I had too, I could rethink my handlebars templates as components and any handlebars logic would be replaced by JS in the React component. But still, I think you might end up with some design imperfections as artifacts of the process. It just seems like an inefficient way to do it. And a half and half app - it just seems like you’d end up with the worst of both worlds.
JSX is different and that’s part of what’s confusing me in compiling it…but I can write it all without using JSX at all, and it’s still React.
Yeah, it’s React. That doesn’t mean that it’s good React. Sure, I can do 18 holes with only a 5-iron - I’m technically playing golf but I don’t think I’ll be playing my best. And I don’t think I’ll learn very well.
JSX is one of the beauties of React. Actually, it is one of the things that is going to be conceptually similar to ejs. In ejs, you are injecting logic into your html. In JSX, you are injecting JS logic into pseudo-html.
All good points, and I understand what you’re saying. Mabye it’s wishful thinking and maybe I don’t understand it well enough but I’ll keep this post updated.
I read the whole thread start to finish to understand what’s going on here.
Why I suggested a JSX templating/a react view/a SSR? Because it’ll be like the first step to change from ejs template to jsx template. Since you do not want to rebuild anything due to reasons, at least you can change the view template as starter. Changing the view template will be much more easier than rebuilding whole. It’ll render the data on server side and won’t do anything on the client side.
If you want to send JSON from the routes, then you will need to create a client from scratch, it’s as true as it is. No other way to get around it. You cannot expect both without less/no work. Sending JSON means it must be rendered somehow by the client, where the client actually doesn’t exist yet.
Also, if you want React, trust me you will need JSX. I worked on a small project where I suggested JSX, while the other dev suggested without JSX, the manager did not accept my suggestion. Later it grew into a super huge file even with code spiting and non-maintainable. We had to do a great deal of work to make that into jsx before we could start working again with full force. React code without jsx will be at least 4 times bigger than one with jsx.
That being said, currently I am working on a codebase where I am doing the exact thing, the previous code was in ejs, the new code is in react, and I had to setup everything required for the new shiny react client. I remember when I said that it will take at least 2 weeks to rebuild the client, the manager exploded because it cannot possibly take that long just to do this and that, right? Yet, it is still taking that huge time because that’s how it is.
I hope you learned at least something from the story above and it helps you in your journey.
Regards.
Yes thansk for your story. So basically are you suggesting buildng each view as you go? ie some pages are EJS templating and others are react? Or is the whole project of yours not working until the react is complete? Thanks for your help and for re-reading it all.
The Frankenstine - Submarine-car is alive! Yes, I’m learning a lot, I installed react, babel, browserify, and am able to build the JSX and inject it into my EJS.
This “may” be as far as I need or want to go as proof of concept at the moment, but i’ve successfully replaced my EJS navbar partial with a react component that accesses the current user via a cookie. It sure seems like once enough react components are in place, it will just be a react app.
Call me naive about it, but so far I’m able to get React/JSX components showing inside of my EJS views.
That’s kind of cool.
I’m not saying it’s good development, but at least I think I can go to sleep tonight.