React 全棧架構：在 node/express 應用中添加 react 前端時，react 的狀態一般處理哪些方面？

Question

我有一個完全構建的 node/express 應用程序，我想添加 react 以便在全棧應用程序中實踐這種關系。 我之前在 react 和 node 中構建過應用程序，但從來沒有一起構建過應用程序，我對 react 如何適應 MVC 架構感到困惑。

在反應節點全棧應用程序中，反應狀態然后處理我之前傳遞到我的ejs視圖中的所有數據？

我一直在瀏覽有關使用 node 和 react 的全棧應用程序的教程，但它們似乎只涉及諸如 react 如何從后端獲取數據或如何設置配置之類的問題，但我得到了那部分，我只是不明白 React 在全棧應用程序中的作用，節點/express 后端應用程序的模型-控制器-視圖架構的哪一部分被 React 接管了？ 后端和前端之間的職責如何分配？

例如，我正在使用 reddit-clone 類型的應用程序，因此當您單擊帖子標題查看帖子時，我的控制器會查詢該帖子的數據庫，然后將其作為{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 的前端時，那個{post}對象會被 react 處理嗎？ 因此，react 會獲取該數據並在 post 組件中使用它來創建當前我的視圖show.ejs文件？

Answer 1

所以當我添加一個帶有 react 的前端時，那個 {post} 對象會被 react 處理嗎？ 因此，react 會獲取該數據並在 post 組件中使用它來創建當前我的視圖 show.ejs 文件？

是的。 show.ejs將是一個 React view或一個包含處理如何顯示它的component的page 。

為了簡化：

React -- 是一個虛擬 DOM，因此它會根據events （例如單擊按鈕）進出交換views / containers / components ，這反過來將：檢索、顯示、操作和/或向 API 發送數據. 在開發中，它與您的后端完全分開。 所有路由都將由前端路由器包處理。 在生產中，所有前端src代碼都被編譯到一個dist或build文件夾中，其中包含您的資產（圖像、字體、css）和最重要的bundle.js 文件，然后由 express 提供服務。

Express + 一些數據庫——將作為你的 API，它會根據前端請求 CRUD 數據。 如果您的應用程序是 MPA（多頁面應用程序），那么通常的做法是使用/api/前綴從前端路由中描述后端路由。 在生產中，如果 express 不識別路由（它不是/api/請求），那么它會回退到前端bundle.js文件中，在那里它將由前端 router 處理。

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

或者

查看一個有效的代碼和框（我正在向返回json的API發出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 前端處理響應。