#javascript #node.js #reactjs #express #ejs
#javascript #node.js #reactjs #экспресс #ejs
Вопрос:
В настоящее время у меня есть приложение NodeJS с серверной частью Express и весь интерфейс, реализованный с EJS. Пример маршрута в настоящее время выглядит следующим образом:
router.get("/:nameamp;: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 });
}
});
});
У меня есть много страниц веб-сайта, уже реализованных в соответствии с приведенным выше примером маршрута. Таким образом, структура выглядит примерно так:
localhost:3000
-/courses
-/show
-/review
-/professors
-/show
-/rating
...
Но я недавно прошел курс React и хочу использовать React для новых страниц, таких как localhost:3000/groups
Есть ли способ использовать React для некоторых страниц и сохранить страницы EJS, которые у меня есть в настоящее время? или мне нужно переписать все страницы EJS для компонентов React? Я все еще новичок в веб-разработке, поэтому буду признателен за любой совет.
Насколько я понимаю, я должен был бы позволить приложению React перехватывать только определенные запросы / маршруты, но я не совсем уверен, как это сделать.
Комментарии:
1. Итак, вы хотите использовать маршрутизатор Express вместе с маршрутизатором React? Или просто добавить некоторые компоненты React в некоторые маршруты Express?
2. да, в идеале я хотел бы использовать маршрутизатор Express с маршрутизатором React. Я также хотел бы знать, как добавить некоторые компоненты React в существующие маршруты Express
Ответ №1:
Чтобы подробно ответить на этот вопрос, мне пришлось бы написать небольшую книгу, поэтому я показываю только базовый случай, когда код отображается на стороне клиента. Я также предполагаю, что вы знаете, как перенести jsx в js, поэтому я буду рассматривать все файлы react как уже перенесенные (то есть все, в которые <> преобразуются React.createElement() ).
Сначала вам нужно создать маршрут, который будет обрабатываться react ( /groups ), (я предполагаю, что вы будете использовать некоторые данные для рендеринга, как в вашем примере):
router.get("groups/:nameamp;: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
}
});
});
Предполагая, что у вас есть код react в index.js , вы должны добавить его в HTML-код, а также данные, требуемые приложением:
router.get("groups/:nameamp;: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>`);
}
});
});
Ваш App должен использовать данные следующим образом:
React.render(<App initialData={initialData}/>, document.getElementById("react-root");
Это должно заставить ваш код react работать. Идя дальше, вы можете использовать react-dom/server для предварительной подготовки html на сервере и смешивания файла ejs в качестве шаблона, в который вы вводите код react для использования вашей существующей кодовой базы.
Комментарии:
1. Могу ли я иметь что-то подобное
res.json(foundGroup)вelseинструкции и использоватьcomponentDidMountиfetchв компоненте React и использовать react-router в App.js файл для рендеринга компонента для/groupsмаршрутов? Если да, то как я могу это сделать с помощью хуков?2. @ph-quiett да, вы можете извлекать данные после рендеринга приложения, но это было бы пустой тратой времени пользователя — потребовалось бы два обхода: первый для страницы, а затем второй для данных после того, как приложение будет готово.
3. а, понятно, тогда как бы выглядел типичный код express-react, требующий только 1 отключения вместо 2?
4. @ph-quiett если приложению требуются некоторые данные с сервера для фактического маршрута, оно собирает данные и помещает их в глобальную переменную, т.Е.
initialDataкоторая затем используется приложением при первоначальном рендеринге.5. это делается с помощью redux? Я был бы очень признателен, если бы вы могли предоставить пример кода <3
Ответ №2:
Есть ли способ использовать React для некоторых страниц и сохранить страницы EJS, которые у меня есть в настоящее время?
Да, вы можете, react — это просто javascript.
Вы можете использовать create-react-app для одной страницы и обслуживать ее по выбранному вами маршруту, но имейте в виду, что ваш интерфейс не станет СПА-центром, делая это, вы просто будете обслуживать приложение react по определенному маршруту.
Несколько лучшим подходом было бы не использовать create-react-app , а вместо этого настроить свой пользовательский процесс сборки webpack для преобразования jsx в javascript, написать минимальный шаблон ejs для включения вашего перенесенного кода javascript в HTML и обслуживать этот шаблон с маршрута.
Ответ №3:
Компонент Reactjs может быть частью вашего внутреннего кода при использовании SSR (рендеринг на стороне сервера), что намного сложнее. Или вы можете использовать статический сервер express для обслуживания приложения reactjs, которое готово к развертыванию, тогда express будет всего лишь статическим маршрутизатором файлов.