React.js Web和原生移动应用程序的体系结构？

我对我的Web服务服务器端渲染React.js感兴趣，但我遇到一个问题，试图从我的Web服务使用Express.js开发端口。目前，我的Web服务服2平台React.js Web和原生移动应用程序的体系结构？

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

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

下面，是我的终点APIS的例子使用REST：

/API /书籍
1. GET - 返回JSON与图书资料
2. POST阵列 - 发送一个JSON到服务器，添加新书信息

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

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

可能的解决方案：

我要补充一个新的URL集合，一个用于渲染（/书籍），第二个为JSON（/ API /书籍）？
服务器检测应用程序的类型（移动或web）并相应地服务？

更新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），这样我保持相同的路线handline HTML和JSON？

来源

2015-02-09 Tim

你有你的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));

你的事件监听器是绑定的，你从那里开始。

来源

2015-02-09 17:31:07 FakeRainBrigand

嘿！感谢您的信息发布！这有很大的帮助，我还有1个问题，并且我更新了我的文章 - 使用Express.js提供的内容管理，您怎么看？分开两条路线还是保持一条路线会更好？哪个更好？ – Tim 2015-02-10 01:12:45

我肯定会使用两条路线。 – FakeRainBrigand 2015-02-10 01:13:52

赞成和反对吗？ – Tim 2015-02-10 01:14:33

React.js Web和原生移动应用程序的体系结构？

回答

相关问题