React + Polymer = Polyreact
1. Polyreact とは
プロトタイプの実装に最適な、Polymer
Web アプリケーション開発に最適な、React
React + Polymer = Polyreact
Polyreact は、プロトタイプ実装を快適にしてくれます。
2. Polyreact をはじめる
2-1. 事前準備
React プロジェクト ( Sass + Redux + ルーティング ) を GitHub ページとして公開する方法 のプロジェクトを使用します。
# カレントディレクトリ : ~/.
git clone git@github.com:KoheiShingaiHQ/publish-react-project.git
cd publish-react-project
npm install
npm start
→ http://localhost:3000 を開くと、 publish-react-project
の内容が表示されます。
3. Polymer との統合
3-1. フォルダとjsファイルの作成 - polymer
# カレントディレクトリ : ~/publish-react-project
mkdir polymer
cd polymer
polymer init
❯ polymer-2-element - A simple Polymer 2.0 element template # ( これを選択 )
? Element name polyreact-element # ( 自由な名前を設定 )
? Brief description of the element React App with Polymer # ( 任意 )
3-2. シンボリックリンクの作成 - polymer → public
# カレントディレクトリ : ~/publish-react-project/public
ln -s ../polymer .
3-3. デモページの確認 - polymer-element
3-3-1. bower install
# カレントディレクトリ : ~/publish-react-project/polymer
bower install
3-3-2. URL のパスを bower_conponents へ書き換える
# ファイルパス : ~/publish-react-project/demo/index.html
- <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+ <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
- <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
- <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+ <link rel="import" href="../bower_components/iron-demo-helpers/demo-pages-shared-styles.html">
+ <link rel="import" href="../bower_components/iron-demo-helpers/demo-snippet.html">
# ファイルパス : ~/publish-react-project/polymer/polyreact-element.html
- <link rel="import" href="../polymer/polymer-element.html">
+ <link rel="import" href="/polymer/bower_components/polymer/polymer-element.html">
3-3-3. デモページの起動
# カレントディレクトリ : ~/publish-react-project/polymer
polymer serve
→ http://localhost:8081 を開くと、 polyreact-element
の内容が表示されます。
→ CodePen で見る : polyreact-element - Chrome のみ対応
3-4. React側 - index.html を編集
# ファイルパス : ~/publish-react-project/public/index.html
+ <script src="/polymer/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+ <link rel="import" href="/polymer/polyreact-element.html">
3-5. React側 - Featured.js を編集
# ファイルパス : ~/publish-react-project/src/container/Featured.js
return (
- <main><h1>Featured</h1></main>
+ <main><polyreact-element></polyreact-element></main>
);
3-6. デザイン調整
3-7. React の起動
# カレントディレクトリ : ~/publish-react-project/
npm start
→ http://localhost:3000 を開くと、 React + Polymer
の内容が表示されます。