LoginSignup
4

More than 5 years have passed since last update.

Polymer でモックをつくる

Last updated at Posted at 2017-10-09

React + Polymer = Polyreact

1. Polyreact とは

プロトタイプの実装に最適な、Polymer

Web アプリケーション開発に最適な、React

React + Polymer = Polyreact

Polyreact は、プロトタイプ実装を快適にしてくれます。

this-is-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 の内容が表示されます。

見本 : koheishingaihq.github.io/publish-react-project

publish-react-app-screen-shot

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 の内容が表示されます。
publish-react-app-screen-shot

→ CodePen で見る : polyreact-element - Chrome のみ対応
codepen-polyreact-element-screen-shot

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 の内容が表示されます。
react-with-polymer

+ Bower とは
+ Polymer とは

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4