I currently have a NodeJS application with an Express backend and all the frontend implemented with EJS. An example route looks like this currently:
router.get("/:name&:term", function(req, res) {
Course.find({ courseName: req.params.name, courseTerm: req.params.term }).populate("students")
.exec(function(err, foundCourse) {
if (err) {
console.log(err);
} else {
console.log(foundCourse)
res.render("courses/show", { course: foundCourse });
}
});
});
I have a lot of the pages of the website already implemented following the example route above. So the structure looks something like:
localhost:3000
-/courses
-/show
-/review
-/professors
-/show
-/rating
...
But I recently took a React course and want to use React for new pages like localhost:3000/groups
Is there a way to use React for some pages and still have EJS pages that I currently have? or do I have to rewrite all the EJS pages to React ponents? I'm still very new to web dev so any advice would be highly appreciated.
From my understanding, I would have to let the React app catch only certain requests/routes but I am not quite sure how to do that.
I currently have a NodeJS application with an Express backend and all the frontend implemented with EJS. An example route looks like this currently:
router.get("/:name&:term", function(req, res) {
Course.find({ courseName: req.params.name, courseTerm: req.params.term }).populate("students")
.exec(function(err, foundCourse) {
if (err) {
console.log(err);
} else {
console.log(foundCourse)
res.render("courses/show", { course: foundCourse });
}
});
});
I have a lot of the pages of the website already implemented following the example route above. So the structure looks something like:
localhost:3000
-/courses
-/show
-/review
-/professors
-/show
-/rating
...
But I recently took a React course and want to use React for new pages like localhost:3000/groups
Is there a way to use React for some pages and still have EJS pages that I currently have? or do I have to rewrite all the EJS pages to React ponents? I'm still very new to web dev so any advice would be highly appreciated.
From my understanding, I would have to let the React app catch only certain requests/routes but I am not quite sure how to do that.
Share Improve this question asked Aug 16, 2020 at 7:27 ph-quiettph-quiett 5412 gold badges7 silver badges21 bronze badges 2- 1 So you want to use the Express router alongside with the React router? Or just sprinkle in some React ponents in some Express routes? – madflow Commented Aug 16, 2020 at 9:08
- 1 yes, ideally I would like to use the Express router with the React router. I would also like to know how to add some React ponents in the existing Express routes as well:) – ph-quiett Commented Aug 16, 2020 at 10:06
3 Answers
Reset to default 3 +25To answer this question thoroughly I'd have to write a small book, so I only show a basic case where the code is rendered client-side. I also assume that you know how to transpile jsx to js, so I'll treat all react files as already transpiled (that is all <> are converted to React.createElement()).
First, you have to create a route that will be handled by react (/groups), (I assume that you'll use some data for the rendering as in your example):
router.get("groups/:name&:term", function(req, res) {
Groups.find({ groupName: req.params.name, courseTerm: req.params.term }).populate("students")
.exec(function(err, foundGroup) {
if (err) {
console.log(err);
} else {
// here will be the react rendering code
}
});
});
Assuming that you have react code in index.js, you have to add it to the html code as well as data required by the app:
router.get("groups/:name&:term", function(req, res) {
Groups.find({ groupName: req.params.name, courseTerm: req.params.term }).populate("students")
.exec(function(err, foundGroup) {
if (err) {
console.log(err);
} else {
res.send(`<html>
<head>
<script>
const initialData=${JSON.stringify(foundGroup)};
</script>
</head>
<body>
<div id="react-root"></div>
<script src="index.js"></script>
</body>
</html>`);
}
});
});
Your App should consume the data like this:
React.render(<App initialData={initialData}/>, document.getElementById("react-root");
This should get your react code up and running. Going further, you can use react-dom/server to prerender html on the server, and mix-in ejs file as a template in which you inject react code to utilize your existing codebase.
Is there a way to use React for some pages and still have EJS pages that I currently have?
Yes you can, react is just javascript.
You can use create-react-app for a single page and serve that from the route of your choice but keep in mind that your front-end won't bee a SPA by doing this you'll just be serving a react app on a certain route.
A somewhat better approach would be to not use create-react-app and instead setup your custom webpack build process to convert jsx to javascript, write a minimal ejs template to include your transpiled javascript code into the HTML, and serve that template from a route.
Reactjs ponent can be part of your backend code when using SSR(server side rendering) which is much more plicated. Or you can use a express static server to serve reactjs app which is ready to deploy, then express will only be a simple the static file router.