Reactrb 展示

2019-05-11 08:00:00 · 飞浪

在本分步免费教程中学习如何构建一个简单的 Rails 应用程序来展示 HyperReact。了解如何使用 Bootstrap CSS 显示视频等！

HyperLoop 展示

这是一个简单的 Rails 应用程序，展示了HyperReact（用于创建用户界面的 React.js 库的包装器）、Opal、NPM、Webpack、React-Bootstrap、HyperMesh（让您的HyperReact组件可以 CRUD 访问您的服务器端 ActiveRecord 模型并实现推送通知）和其他相关技术。

这个 Showcase 应用程序将混合原生 React 和HyperReact组件，通过 Bootstrap CSS 设置样式（使用 React-Bootstrap），显示视频（使用原生 React 组件），并使用HyperMesh处理事件提要应用程序的数据。

Showcase 应用程序将如下所示：

本展示应用中重点介绍的技术

Rails 5.0.1搭配Ruby 2.3.1作为后端。
NPM和Webpack用于管理前端资产。
HyperRails在 Rails 4.x 或 5.x 中安装HyperReact和 Opal。
HyperReact将React与 Rails结合使用，并以 Ruby 的优雅风格编写反应式 UI 组件。
React-Bootstrap展示如何在HyperReact中使用原生 React 组件。
Rails 模型和前端之间的HyperMesh ，并在所有连接的客户端之间神奇地推送更改的数据。
HyperReact Hot-Reloader 和 Opal IRB 为程序员带来乐趣并在开发过程中实现热加载。

介绍

HyperReact 简介

HyperReact 帮助和问题

Gitter.im用于一般问题、讨论和交互式帮助。
Stack Overflow标记reactrb以解决特定问题。
Github Issues，涉及错误、功能增强等。
本教程末尾有进一步的阅读内容。

与 Rails 一起使用 NPM 和 Webpack

Ruby 库以 gem 的形式分发，并使用 Gemfile 和 bundler 在你的 Rails 应用中进行管理。

在 JavaScript 世界中，事情仍在不断发展，但我发现管理 JavaScript 库的最简单方法是使用 NPM（节点包管理器）和 Webpack。如今，几乎每个前端库都使用 NPM 打包，因此很容易获得帮助，而且大多数东西都可以正常工作。

令人高兴的是，NPM、Webpack、Rails 和HyperReact都可以很好地协同工作。

本指南要求安装 Ruby、Rails、NPM 和 Webpack。请参阅其网站了解安装说明。

步骤 1：创建新的 Rails 应用程序

      rails new hyperloop-showcase
	cd hyperloop-showcase
	bundle install
    

更新数据库配置文件以便正确访问数据库：config/database.yml。

然后执行：

      rails db:create

你应该有一个空的 Rails 应用程序：

      bundle exec rails s

在您的浏览器中：

      http://localhost:3000/

您应该会看到 Rails Welcome aboard 页面。太好了，Rails 现已安装完毕。让我们开始一些有趣的事情。

第 2 步：添加 HyperReact 和 HyperMesh

有两种方法可以实现这一点：

使用HyperLoop安装生成器
手动

HyperReact 和 HyperMesh 的自动安装

添加HyperRails gem，它是一组可轻松配置其他Hyperloop gem 的生成器：

      #Gemfile

  gem 'hyper-rails'

然后运行：

      bundle install

现在让我们获取HyperRails生成器来安装Hyperloop：

      rails g hyperloop:install --all
bundle update
    

HyperRails将把所有必要的 Gem 和配置添加到我们的新 Rails 应用程序中。

我们还需要修改app/views/components.rb并添加两行require 'reactrb/auto-import'和require 'react/react-source'：

      #app/views/components.rb

require 'opal'

require 'reactrb/auto-import'
require 'react/react-source'
require 'hyper-react'
if React::IsomorphicHelpers.on_opal_client?
  require 'opal-jquery'
  require 'browser'
  require 'browser/interval'
  require 'browser/delay'
  # add any additional requires that can ONLY run on client here
end

require 'hyper-mesh'
require 'models'

require_tree './components'
    

如果您对生成器完成的步骤感兴趣，请参阅以下部分。

HyperReact 和 HyperMesh 的手动安装

步骤 2.1：添加宝石

在你的Gemfile中

      #Gemfile

	gem 'react-rails', '1.4.2'
	gem 'hyper-rails', '0.4.1'
	gem 'opal-rails', '0.9.1'
	gem 'opal-browser', '0.2.0'
	gem 'hyper-react', '0.11.0'
	gem 'hyper-mesh', '0.5.3'
	gem 'hyper-router', '2.4.0'
	gem 'therubyracer', platforms: :ruby
    

然后运行：

      bundle update

步骤 2.2：添加组件目录和清单

您的 React 组件将进入 rails 应用程序的app/views/components/目录。

您需要在app/views目录中创建一个components.rb清单。

app/views/components.rb中所需的文件将提供给服务器端渲染系统和浏览器。

      #app/views/components.rb

require 'opal'

require 'reactrb/auto-import'
<span class="

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

Reactrb 展示

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

#app/views/components.rb require 'opal' require 'reactrb/auto-import' require 'react/react-source' require 'hyper-react' if React::IsomorphicHelpers.on_opal_client? require 'opal-jquery' require 'browser' require 'browser/interval' require 'browser/delay' # add any additional requires that can ONLY run on client here end require 'hyper-mesh' require 'models' require_tree './components'

#Gemfile gem 'react-rails', '1.4.2' gem 'hyper-rails', '0.4.1' gem 'opal-rails', '0.9.1' gem 'opal-browser', '0.2.0' gem 'hyper-react', '0.11.0' gem 'hyper-mesh', '0.5.3' gem 'hyper-router', '2.4.0' gem 'therubyracer', platforms: :ruby