用于 Web 和原生移动应用程序的 React.js 架构？答案

【问题标题】：React.js Architecture for web and native mobile application?用于 Web 和原生移动应用程序的 React.js 架构？
【发布时间】：2015-02-09 01:56:06
【问题描述】：

我对使用 React.js 为我的 Web 服务进行服务器端渲染很感兴趣，但是我在尝试从使用 Express.js 开发的 Web 服务移植时遇到了一个问题。目前，我的网络服务服务于 2 个平台

网络（Angular.js 客户端）
Android（本机应用程序 - 用 Java 开发）

我当前的架构是我的所有客户端都使用 JSON 连接到我的服务器。因此，我的客户端将向我的服务器发送一个 HTTP GET/POST 请求，我将返回 JSON。我的服务器不提供 HTML 页面。

以下是我使用 REST 的端点 APIS 示例：

/api/书
1. GET - 返回带有书籍信息数组的 JSON
2. POST - 发送一个 JSOn 到服务器，添加新书信息

我应该如何更改我的服务器端以包含 React？由于 React 使用服务器端渲染而不是使用 JSON 进行通信？

我当前的 Angular.js 项目，我将它们放在一个公共文件夹中，它用作静态文件。

可能的解决方案：

是否应该添加一组新的 URL，一个用于呈现 (/books)，第二个用于 JSON (/api/books)？
服务器检测应用程序的类型（移动或网络）并相应地提供服务？

更新 1

另一种可能的解决方案

res.format({
    'text/html': function() {
        var html = React.renderToString(React.createElement(BooksPage, {books: books})); 
        res.render('main-layout', {
            html: html, 
            data: JSON.stringify({books:books})
        });
    },
    'application/json': function() {
        res.send({
            book: books
        })
    }
})

是使用 Express.js 内容协商（res.format），这样做我为处理 HTML 和 JSON 保持相同的路线？

【问题讨论】：

标签： javascript web-applications express reactjs isomorphic-javascript

【解决方案1】：

你有你的 api 路由，你有你的页面路由。用户不会去http://example.com/api/books 来查看书籍列表，而是去http://example.com/books/ 之类的地方来查看书籍页面。

当您收到对 /books/ 之类的页面的请求时，您将提供 html。您的 api 仍然可以在客户端使用。

做到这一点的最简单方法是制作非常精简的控制器，并将大部分逻辑保留在普通函数中（带有承诺的示例，但不重要）。

function getBooks(){ return /* database thing returns promise */ };

app.get('/api/books', function(req, res){
  getBooks().then(function(books){ res.send(books); });
});

app.get('/books/', function(req, res){
  getBooks().then(function(books){ 
    var html = React.renderToString(React.createElement(BooksPage, {books: books})); 
    res.render('main-layout', {
        html: html, 
        data: JSON.stringify({books:books})
    });
  });
});

假设你的主布局模板最终生成了这个：

<html><head></head>
<body>
  <div id="root">
    <!-- output of renderToString -->
    <div data-reactid="0">...</div>
  </div>
  <script>
    /* output of the JSON.stringify */
    var __initial_data = [{"id": ...}];
  </script>
  <script src="client-side-code-bundle.js"></script>
</body>
</html>

您使用与服务器相同的数据在客户端获取渲染：

React.render(React.createElement(BooksPage, __initial_data));

您的事件侦听器已绑定，您从那里开始。

【讨论】：

嘿！感谢您的信息性帖子！这很有帮助，我还有 1 个问题，我已经更新了我的帖子 - 使用 Express.js 提供的内容管理，你怎么看？分开2条路线还是保留一条路线会更好吗？哪个更可取？
我肯定会使用两条路线。
单一路由的缺点是它令人困惑，并且可能不适用于所有浏览器。两条路线的优点是没有缺点:-)
谢谢！ ;) 你太棒了！单一责任原则！