React on Rails集成

Question

我正在寻找使用gem react-rails实现ReactJS作为我的Rails应用程序的视图.到目前为止,我只使用标准.erb在我的RoR应用程序中呈现我的视图,我想知道如何使用React做一些问题.

例如,当您想在RoR中为模型创建表单时,您只需使用以下命令创建表单:

<%= form_for(@product) do |f| %>
  <%= f.text_field :name %>
  ...
  <%= f.submit %>
<% end %>

而这个自动使用正确的路线,产生CSRF令牌,使用正确的CSS id和class等...

现在,如果我使用React,我必须照顾所有这些吗？并以老式的方式在渲染中创建JSX中的表单？

# My view .html.erb
<%= react_component 'Form', {} %>

# My js.jsx file
var Form = React.createClass({
render: function () {
  return (
    <form className="new_my_model" onSubmit={this.handleSubmit}>
      <input style={inputStyle} type="text" className="my_model_name" />
      ...
      <input type="submit" value="Post" />
    </form>
  );
}
});

没有像Ruby for React这样的"自动生成功能"？

我已经发现了一些ressources网上关于教程阵营与铁轨(1,2,3),但大多数时候,他们说不同的东西.有些人使用JSX,一些咖啡,而官方的React网站建议使用JSX.一些使用refs,其他人使用states,就像这一切!

是否有一个很棒的教程可以作为参考使用React构建我的应用程序的基础？

Answer 1

简短的回答是,您在JSX中编写的React组件与传统视图中编写的DOM元素分开.React需要完全控制它管理好的DOM元素才能正常工作,否则你将会全力以赴(虽然有限的使用可能会成功,但它可能很脆弱).

冒着我没有真正回答你的意思,这里有一些可能会有所帮助的想法:

• 首先,要意识到ReactJS还很年轻,并且与Rails的集成更年轻:最佳实践仍然被发现和决定,因此它选择一种方式并使其成功,因为它是关于选择一些最佳方式.
• 第二,关注点不完全分离的混合技术通常难以以易于扩展的方式进行组织和管理.ReactJS是一种视图技术,因此如果您尝试以无组织方式混合方法,分离视图机制会变得很困难,尤其是因为ReactJS如何处理DOM管理.此外,您正在处理两个不同的生态系统的交集,因此支持更薄.

• 你可能有三种主要方法:

  • 最小的JS(在JS增强视图的经典方式中使用RoR,
  • 使用最少的RoR视图构造将大部分视图移动到ReactJS,以及
  • 单独的服务层(使用RoR为AJAX提供API,使用单独的Web服务,呈现用ReactJS编写的UI(因此不将ReactJS直接集成到Rails中)

• 毫无疑问,这些主题有很多变化,但这些可能是主要的变化.

我只参与了几个这样做的应用程序,所以我的评论就是一丝不苟.不过,对于新的应用程序,我倾向于单独的服务层方法,因为工具更容易.我倾向于只在现有应用程序中使用ReactJS,如果我有一个特别是JS重要的视图部分并且该功能是有限的.

最小的ReactJS

在经典的Rails视图中,我们倾向于使用JS来增强具有客户端行为的视图:大多数视图计算都是在服务器端完成的,然后我们让JS只是为了某些目标而操纵DOM的各个方面.使用React可能会很困难,因为React负责其DOM的元素以保持状态更新.但是你仍然可以将ReactJS用于页面的元素,就像你在Rails中部分视图呈现一样,只要"部分"是有界限的.

使用React-Rails gem,只需让你的视图渲染一个React组件就像你要使用partial一样,然后让该组件直接处理它的组成元素,如果你在客户端使用期间需要更多来自服务器的话,可以使用AJAX调用.这会在您的视图中创建一个有限的,集中的关注点分离,您可以使用传统的JS技术来收集组件周围的其他页面DOM信息(尽管如果您执行的操作非常有限,可能会变得非常困难和混乱 - - 如果你做了很多,可能应该重新考虑一下).

这种方法的主要优点是您可以开始将ReactJS引入现有应用程序,并在您发现它有用时开始迁移功能.对于某些客户端密集型事物,比如说一些具有大量客户端交互的表单字段,但是这些技术是有限的,这种技术可能是一个很好的选择.

来自Rails的ReactJS视图

在这种方法中,我们可以使用Rails渲染视图布局(即HTML包装但没有内容),然后让特定视图为ReactJS或更传统的ERB/Haml/Slim视图.在这种方法中,Rails视图只是为页面建立一个主要的React组件,然后在ReactJS中完成其余部分来管理它自己的JSX中的那个部分(通常是整个内容窗格).通过这种方式,您的JSX仍然可以从您的资产管道中提供服务,但实际上您已经从React处理了页面的核心表示,并且只使用Rails来实现布局的最小目的,并允许一些视图基于ReactJS.其他人以Rails为基础.

正如我所描述的那样,我宁愿假设一个多页应用程序.如果您正在编写单页应用程序,这种技术可能只是以简单的方式使用Rails进行演示.

仍然有一些优点:

• 再次,您可以混合和匹配不同页面的技术,作为逐步将ReactJS引入应用程序的方法; 比方说,作为一种转换一些视图的方式,直到所有视图都是基于React的.然后,如果您愿意,可以更轻松地转移到单独的服务层方法.
• 您仍然可以使用视图在首次呈现时从控制器向ReactJS组件提供一些信息,因为您的视图仍将启动React组件.对于React处理其子组件后的任何其他信息,您仍然需要使用AJAX(与任何其他JS功能完全不同).
• 正如您所指出的,Rails仍在帮助您解决CSRF和那些应用程序范围的问题.

单独的服务层

这种方法完全将视图与后端服务分开.将您的Rails应用程序编写为完全呈现JSON的API服务器.所有核心逻辑仍然在控制器和模型中处理,因此设计的一部分基本上完好无损.实际上,您不需要经典的Rails.其他框架,如Grape或rails-api gem可能更合适,因为它们重量较轻,因为您不会呈现任何视图或需要这些帮助程序.

然后你编写一个单独的基于ReactJS的应用程序(记住ReactJS也可以是服务器端),它只关注表示,只使用你的RoR API服务来获取和发布信息.

对这种方法的考虑:

• 您可以非常明确地分离关注点:您的Rails(或其他)应用程序将重点放在数据/逻辑层即服务上,而您的ReactJS应用程序则侧重于演示.有一种趋势是以这种方式使用Rails,您可以采用另一种方式来横向扩展应用程序.
• 工具更容易,因为两者都更均匀(单独的自动化测试更容易).围绕RoR建立了一个已建立的生态系统,围绕JS和ReactJS应用程序存在一个生态系统,但这些生态系统的交叉点更为稀疏,因此您会发现自己在其他两种技术中更多地与工具作斗争.对于单独的图层,这不是问题.
• 适用于新应用程序,但转换现有应用程序可能要困难得多(您必须同时转换控制器和视图).

祝好运!

更新(2015年9月2日) 你可能会发现这篇博文有点照亮:http: //www.openmindedinnovations.com/blogs/3-ways-to-integrate-ruby-on-rails-react-flux by Blaine Hatab(3/2015年).该帖子概述了三种方法,这些方法与我上面提供的高级概述有些相似,但旨在更全面地了解如何进行.他们列出的三种方法是

• 方法1:使用反应轨道在Rails内部使用React
• 方法2:Rails中的React/Flux前端应用程序
• 方法3:分离的Rails API和React/Flux前端应用程序

您可能会发现此描述更有用,并提供参考以查看其他详细信息.