最近、React + TypeScriptを、多くの偉大なPolymer Components（Predix UI Starter）を含む既存のスターターアプリと統合する作業が行われました。私はこれがいくつかの人にとっては感覚的ではないように思えるかもしれません（結局のところ、Polymerをフレームワークとして使用するだけでアプリケーションの状態とロジックを提供することができます）。しかし、React ライブラリと、オブジェクト指向のTypeScriptの性質がたくさんありますので、ここで始めるためのヒントは何ですか？Polymer + Node.JS JavaScriptアプリをReact + TypeScriptと統合するには
Predix UI Starterとcreate-react-app starterを統合します。具体的には、反応コンポーネントがpx-dropdownポリマーコンポーネントをrender（）するようにします。このコンセプトと方法は、任意のポリマースターターアプリに適用できます。このはではありません。この2つのスターターを完全に統合するには、ONLY TypeScriptを使用してReact render（）メソッドでポリマーコンポーネントをレンダリングするPOCです。
これらの両方を複製してください。 Predix UIスターターから作業 - npm installとbower installを実行すると、これにはすべてのコンポーネントが含まれます。
Predix UIスターターでpackage.jsonが反応するアプリが含まれていることを依存関係とdevDependenciesのすべてが含まれていることを確認してください。 package.jsonファイルのscriptsオブジェクトで"start" : ...,を"start" : "react-scripts-ts start"に変更します。これはTypeScriptを使用してlocalhostにアプリケーションを提供します（これはtsconfig.jsonとtslint.jsonファイルが再生される場所です）。
tsconfig.jsonとtslint.jsonとtsconfig.test.jsonファイルをPredix UIスターターのルートディレクトリにコピーします。
Reactアプリケーションの命名規則に従って、serverフォルダの名前をsrcに変更します。 .bowerrcファイルではbower_componentsの前にpublic/を追加すると、public/index.htmlファイルでbowerによって生成されたポリマーコンポーネントをインポートできます。これを行うように設定されていない限り、public/index.htmlは、親フォルダのポリマー成分をpublicフォルダに読み込むことができません。 （ユーザーはpublic/index.htmlファイルを最初に提供するためにPredixスターターを設定する必要があります）。 Predixスターターに反応するスターターから
srcフォルダに
App.tsxと
index.tsxファイルをコピーし、（このファイルは、アプリケーションが最初に提供するものとなります）
publicフォルダに
index.htmlファイルをコピーします。
次の内容のルートディレクトリにglobal.d.tsファイルを追加することによって、反応成分の中でそれをレンダリングすることができるようにJSX名前空間にpx-dropdownコンポーネントを追加します。
declare namespace JSX { interface IntrinsicElements { 'px-dropdown': any } }を
あなたが今まで準備ができていますレンダリング（）px-dropdownコンポーネント。 public/index.htmlファイルにおいて、（<head>タグ内）次の2行使用してコンポーネントをインポート：
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="bower_components/px-dropdown/px-dropdown.html" />
を者がAppコンポーネントのpropsに一部itemsを通過させます。index.tsxファイルでは、App.tsxに次のコードが正常にpx-dropdownコンポーネントをレンダリングします<App items={'[{"key":"1", "val": "One"},{"key" : "2", "val": "Two"}]'}/>
のように見えるためにコンポーネントを描画する行を編集：
class App extends React.Component<any, any> {
constructor (props: any) {
super(props);
}
render() {
...
return (
<div className="App">
...
<px-dropdown
items={this.props.items}
sort-mode="key"
button-style="default"
display-value="Select"
disable-clear>
</px-dropdown>
</div>
);
}
}
あなたは今リアクト使用してポリマー成分のレンダリングを開始する準備ができています+タイプスクリプト。
ポリマー+反応はうまくいきませんが、使用してから2年が経過しました。 –
ええ、私はあなたに完全に同意します。しかし、私が働いているチームは、私がこれをやって欲しいと思ったので、ここに素早くPOCを投稿したいと思った:) – Marquistador