React 全栈架构：将 React front-end 添加到 node/express 应用程序时，React 的状态通常处理哪些方面？

Question

我有一个完全构建的 node/express 应用程序，我想向其添加 React，以便在全栈应用程序中实践这种关系。我之前在 React 和 Node 中构建过应用程序，但从来没有一起构建过，我对 React 如何适应 MVC 架构感到困惑。

在 react-node 全栈应用程序中，是否反应状态然后处理我之前传递到我的 ejs 视图中的所有数据？

我一直在浏览有关使用 node 和 react 的全栈应用程序的教程，但它们似乎只涉及 react 如何从后端获取数据或如何设置配置等问题，但我明白了那部分，我只是不明白反应在全栈应用程序中做了什么，node/express 后端应用程序的 model-controller-view 架构的哪一部分反应接管了？后端和前端之间的职责如何划分？

例如，我正在使用 reddit-clone 类型的应用程序，因此当您单击 post 标题以查看 post 时，我的控制器会在数据库中查询该 post 然后将其作为 {post}:

传递给视图

show(req, res, next){
        postQueries.getPost(req.params.id, (error, post) => {
            if(error || post == null){
                res.redirect(404, "/");
            } else {
                res.render("posts/show", {post});
            }
        });
    },

所以当我用 React 添加一个 front-end 时，那个 {post} object 会被 React 处理吗？所以 React 会获取该数据并在 post 组件中使用它来创建当前我的视图 show.ejs 文件？

Answer 1

So when I add a front-end with react, would that {post} object then be something handled by react? So react would fetch that data and use it in a post component to create what is currently my view show.ejs file?

是的。 show.ejs 将是 React view 或包含 component 的 page 来处理如何显示它。

简化：

React -- 是一个虚拟的 DOM，因此它将根据 events 交换 views/containers/components（就像单击一个按钮），这反过来将：检索、显示、操作 and/or 将数据发送到 API。在开发中，它与您的后端完全分开。所有路由都将由前端路由器包处理。在生产中，所有前端 src 代码都被编译到 dist 或 build 文件夹中，其中包含您的资产（图像、字体、css），最重要的是 bundle.js file(s) that are then served by express。

Express + 一些数据库 -- 将作为您的 API 根据前端请求对数据进行增删改查。如果您的应用程序是 MPA（多页应用程序），那么常见的做法是从您的 front-end routes with a /api/ prefix. In production, if express doesn't recognize the route (it's not a /api/ request), then it'll fall back into the front-end bundle.js file where it'll be handled by the front-end router.

中划定您的后端路由

在此处查看工作示例：https://github.com/mattcarlotta/fullstack-mern-kit（client 是前端，其他都是后端）

或

查看工作代码和框（我正在向 API returns json 发出 GET 请求):

对于上面的示例，您的 show 控制器只会将 JSON（或 string 消息）发送回前端（重定向将通过路由器在前端发生-- 比如 react-router-dom):

show(req, res, next){
        postQueries.getPost(req.params.id, (error, post) => {
            if(error || post == null){
                // res.status(404).send("Unable to locate posts.");
                res.status(404).json({ err: Unable to locate posts });
            } else {
                res.status(200).json({ post });
            }
        });
    },

您甚至可以使用 async/await:

简化以上内容

const show = async (req, res, done) => {
        try {
           const post = await postQueries.getPost(req.params.id);
           res.status(200).json({ post });
        } catch(err) {
           // res.status(404).send("Unable to locate posts.");
           res.status(404).json({ err: Unable to locate posts });
        }
    };

然后 React 前端处理响应。

React 全栈架构：将 React front-end 添加到 node/express 应用程序时，React 的状态通常处理哪些方面？

React fullstack architecture: When adding a react front-end to a node/express application, what aspects does react's state generally handle?

node.js

reactjs

redux

react-redux

react-fullstack