最近、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>
);
}
}
あなたは今リアクト使用してポリマー成分のレンダリングを開始する準備ができています+タイプスクリプト。
- 1. ReactアプリをFlaskアプリに統合
- 2. ExpressとTypescriptの統合
- 3. RedisをNode.js(TypeScript)に統合しようとするとアサーションエラーが発生する
- 4. CodeMirrorとAngular2(typescript)の統合
- 5. Facebookとアプリを統合するには?
- 6. React-NativeアプリをSwiftに統合する3
- 7. ReactとD3を統合する
- 8. Typescript Node.jsアプリのguid/uuid
- 9. node.js/beanstalkdとの統合
- 10. node.jsとのGULPの統合
- 11. AWSの背後にあるNode.jsアプリのSSL統合ELB
- 12. React Starter KitとReact Router Bootstrapの統合
- 13. ReactVRを既存のReactアプリに統合する最も良い方法は?
- 14. jQueryとReact jsの統合方法は?
- 15. React-nativeとバックエンドサーバーを統合するには?
- 16. React NativeとDreamfactory REST APIを統合するには?
- 17. Ember.jsとNode.jsの統合(Express + Tower.js)
- 18. Google +とアプリを統合する方法
- 19. マージWebとReact-Nativeプロジェクトを1つに統合しますか?
- 20. Node.jsとAngular 2のアプリケーションを統合
- 21. ZbarとAndroidアプリの統合
- 22. iPhoneムービーとビデオレンタルをiPhoneアプリに統合
- 23. PV(protein viewer)とReactとの統合
- 24. ASP.NET - Reactとtypescriptをインストール
- 25. Angular2、TypeScript、npm、gulpの統合
- 26. 現在のFirebase node.jsプロジェクトにAngularを統合する方法は?
- 27. React.JsとPolymer CSS
- 28. 私のアプリをiosの `Facebook`アプリに統合する方法は?
- 29. iphoneアプリにビデオを統合する
- 30. Node.jsとMS Exchange EWSの統合
ポリマー+反応はうまくいきませんが、使用してから2年が経過しました。 –
ええ、私はあなたに完全に同意します。しかし、私が働いているチームは、私がこれをやって欲しいと思ったので、ここに素早くPOCを投稿したいと思った:) – Marquistador