ExpressJS支持ejs和React前端的混合

如何解决ExpressJS支持ejs和React前端的混合

我目前有一个带有Express后端的NodeJS应用程序，并且所有前端都由EJS实现。当前的路由示例如下：

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 });        
        }
    });
});

我已经按照上面的示例路线实现了网站的许多页面。所以结构看起来像这样：

localhost:3000
-/courses
   -/show
   -/review
-/professors
   -/show
   -/rating
...

但是我最近参加了一个React课程，并想将React用于新页面，例如localhost:3000/groups

是否可以在某些页面上使用React，并且仍然拥有我目前拥有的EJS页面？还是我必须将所有EJS页面重写为React组件？我对Web开发人员仍然很陌生，因此任何建议都将不胜感激。

据我了解，我必须让React应用程序仅捕获某些请求/路由，但我不确定如何做到这一点。

解决方法

要彻底回答这个问题，我必须写一本小书，所以我只展示一个基本示例，其中代码是在客户端呈现的。我还假设您知道如何将jsx转换为js，所以我将把所有的react文件视为已经被编译（即所有<>都转换为React.createElement()）。

首先，您必须创建一个将由react（/groups）处理的路由，（我假设您将像示例中那样使用一些数据进行渲染）：

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        
        }
    });
});

假设您在index.js中有响应代码，则必须将其以及应用程序所需的数据添加到html代码中：

router.get("groups/:name&:term",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并仍然拥有我当前拥有的EJS页面？

是的，您的反应只是JavaScript。

您可以在单个页面上使用create-react-app，并根据自己的选择进行投放，但是请记住，这样做不会使您的前端成为SPA，您只会在做出反应特定路线上的应用程序。

一种更好的方法是不使用create-react-app，而是设置自定义Webpack构建过程以将jsx转换为javascript，编写一个最小的ejs模板，以将已转译的javascript代码包括到HTML中，并提供该模板从一条路线。

在使用SSR（服务器端渲染）时，Reactjs组件可以成为您的后端代码的一部分，这要复杂得多。或者，您可以使用Express静态服务器来服务准备部署的reactjs应用，然后express只会是简单的静态文件路由器。

ExpressJS支持ejs和React前端的混合

如何解决ExpressJS支持ejs和React前端的混合

解决方法

相关推荐