React.js Web 和本机移动应用程序的架构？

Question

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

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

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

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

/api/books
1. GET - return JSON 含图书信息数组
2. POST - 发送JSOn到服务器，添加新书信息

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

进行通信

我当前的 Angular.js 项目，我把它们放在一个 public 文件夹中，它作为静态文件。

可能的解决方案：

我是否应该添加一组新的 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和[=保持相同的路由73=]?

Answer 1

你有你的 api 路线，你有你的页面路线。用户没有去 http://example.com/api/books to see a list of books, they go to something like 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));

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

React.js Web 和本机移动应用程序的架构？

React.js Architecture for web and native mobile application?

javascript

web-applications

express

reactjs

isomorphic-javascript