Question

有没有人有最新（稳定）React的工作示例，使用最新的（稳定的）Typescript和Rails 4.2？

使用typescript-rails gem（https://github.com/typescript-ruby/typescript-rails）和Rails 4.2可以通过资产管道正常工作。

例如，这些例子都不起作用： http://blog.mgechev.com/2015/07/05/using-jsx-react-with-typescript/ http://staxmanade.com/2015/08/playing-with-typescript-and-jsx/

遇到的各种错误是:(基于哪个示例，以及您从https://github.com/DefinitelyTyped使用的DefinitelyTyped react.d.ts <）

/var/folders/ng/f_1__7m57x9bmprw7lvpz7180000gn/T/typescript-node20151114-27510-1dvq95y.ts(18,1):error TS2304：找不到姓名＆＃39; ReactDOM＆＃39;。

Answer 1

过了一天我发现了。

<强>制备

第0步。

确保您正确安装了typescript-rails gem并验证它是否可以使用Rails 4.2资产管道。（见：https://github.com/typescript-ruby/typescript-rails）

第1步。

带有-jsx反应的typescript-rails（0.6.2）gem中存在一个错误。要解决此问题，请创建gem文件的本地副本并将其保存到：

vendor/typescript-rails-0.6.2

然后通过gemfile告诉你的Rails应用程序直接包含它：

gem 'typescript-rails',  :path => "vendor/typescript-rails-0.6.2"

现在，我们从：

修改typescript-rails

# vendor/typescript-rails-0.6.2/lib/typescript/rails/compiler.rb
# 
# ... (line 69):
self.default_options = %w(--target ES5 --noImplicitAny)
# ....
#

要：

# vendor/typescript-rails-0.6.2/lib/typescript/rails/compiler.rb
# 
# ... (line 69):
self.default_options = %w(--target ES5 --jsx react)
# ....
#

第2步。

将以下反应文件复制到app / assets / javascript文件夹：

https://fb.me/react-0.14.2.js 和... https://fb.me/react-dom-0.14.2.js

更新你的application.js以包含这两个反应文件：

 // app/assets/javascripts/application.js:
 // ...
 //= require react-0.14.2.js
 //= require react-dom-0.14.2.js
 // ...

现在我们已完成初始设置（所有内容仍应使用上述更改）

<强>步骤

第0步。

从https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/react复制所有文件到app / assets / javascripts / typing（我之前缺少的关键步骤）

步骤1.使用内容创建文件app / assets / javascript / home.ts（由HomeController加载）：

/// <reference path="typing/react-global.d.ts"/>
/// <reference path="my_component.tsx"/>

步骤2.使用内容创建文件app / assets / javascript / my_component.tsx：

/// <reference path="./typing/react-global.d.ts" />

interface HelloWorldProps {
  name: string;
}

var HelloMessage = React.createClass<HelloWorldProps, any>({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

var mountNode = document.getElementById('id_of_mount_dom_element');
ReactDOM.render(<HelloMessage name="John" />, mountNode);

第3步。

确保你有一个文件home / index.html.erb文件一个带有id＆＃39; id_of_mount_dom_element＆＃39;的React root div元素。然后，您将在加载页面时看到组件装载（例如http://127.0.0.1:3000/home）

Hello John

完成

如何使用React 0.14和Typescript 1.6.2以及Rails 4.2获得完整的工作示例

1 个答案: