StructorでReactコンポーネント作成

# Structorとは
## React UI Builder改めStructor
reactの[GitHub wiki](https://github.com/facebook/react/wiki/Complementary-Tools#build-tools)でも取り上げられているStructor。
Structor:[http://helmetrex.com/](http://helmetrex.com/)

以前はReact UI Builderという名前でしたが、模様替えしてStructorというものに変わったようです。

## Structorでできること
Material-UIまたはReact-Bootstrapをベースとした、コンポーネントの作成がブラウザ上で行えます。コンポーネントのソースはファイルに保存して流用することもできます。ちなみにソースはES6ベースで作成されます。

YouTubeにいくつか動画がアップされていて、概要を見ることができます。
YouTube:[Speed designing of ToDo list with ReactJS and Redux](https://www.youtube.com/watch?v=PggnIYdaJFI&index=3&list=PLAcaUOtEwjoR_U6eE2HQEXwkefeVESix1)

まだまだ微妙なところがあったりしますが、試しにコンポーネントをサクッと作ってみたい、などの場合は役にたつかもしれません。

# セットアップ
## Structorインストール
Structorをnpmでグローバルインストールします。
`$ npm install structor -g`

インストールが完了したら、任意のディレクトリにStructor作業用のディレクトリを作成し、そこに移動して、Structorを実行します。

```
$ cd {Structor作業用のディレクトリ}
$ structor
````
すると、

```
Structor started successfully.
Please go to http://localhost:2222/structor
```
とターミナル上に表示されますので、http://localhost:2222/structor にアクセスします。
↓のような画面が表示されます。
<img width="1083" alt="スクリーンショット 2016-01-13 9.52.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/ca71604a-70a1-a209-47a7-8d1f1973fd4f.png">

## ボイラープレートの選択
Structorをブラウザで表示したら、作業を始めるためにページ上に表示されているボイラープレートを一つ選択します。

今回はmaterial-ui-prepackを試しに採用してみます。
ボイラープレートの右上にある[Clone]をクリックします。
<img width="482" alt="スクリーンショット 2016-01-13 10.06.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/c7fada9a-5612-507f-f29d-5b7a2d352617.png">
Cloneすると、以下のようにちょっと待って状態になります。気長に待ちます。
（数分経っても終わらなかったら再読み込みしましょう。きっと終わってるはず。）
<img width="1057" alt="スクリーンショット 2016-01-13 10.07.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/e03a028a-74ba-5c1c-9d56-23fe1664c055.png">
Cloneが終わると、以下のような画面が表示されます。
<img width="1081" alt="スクリーンショット 2016-01-13 10.13.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/cbe04c2e-4ca6-c6dd-b60f-6ac10d29c6b2.png">

## 代表的なコンテンツ
### ページ切り替え
ページの切り替えは、下図のように、画面左上のセレクトリストで行います。
<img width="290" alt="スクリーンショット 2016-01-14 8.49.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/75311a15-0ebf-101c-d5cc-2a47ff58511b.png">

### 画面に追加できるコンポーネント一覧
画面に追加したいコンポーネントは画面右上にある、「＋」ボタンをクリックし、コンポーネント一覧から作成したいコンポーネントを選びます。
<img width="142" alt="スクリーンショット 2016-01-14 8.52.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/02d21f87-342d-84e8-5ac6-3e67874614e6.png">
「＋」をクリックすると、以下のようにコンポーネントグループが表示されます。
<img width="252" alt="スクリーンショット 2016-01-14 8.54.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/036f58ee-c927-2bef-caf8-587c87936337.png">
追加する前にプレビュー的なこともできます。
<img width="1065" alt="スクリーンショット 2016-01-14 8.57.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/b924bb99-ae1a-adc0-d5b6-d3f8f48e028b.png">

実際に画面に追加する場合は、まず、下図のようにコンポーネントを置きたい箇所近辺のコンポーネントをクリックして、コンポーネントのメニューを表示させます。
<img width="771" alt="スクリーンショット 2016-01-14 9.01.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/c2405daf-5f4a-b7b8-8fa9-7af498850ee1.png">

そのコンポーネントの上に置きたいなら、「Before」、下なら「After」、という感じでお好みのボタンをクリックします。
「Before」をクリックすると、下図のように上に置かれました。
<img width="1076" alt="スクリーンショット 2016-01-14 9.06.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/03270cfa-a0c7-7584-5d1d-c7fce13db000.png">

### コンポーネントのカスタマイズ
先ほど置いたコンポーネントの色などの属性を変更したい場合、下図のブラシボタンをクリックします。
<img width="91" alt="スクリーンショット 2016-01-14 9.11.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/cda7da0c-7bc5-a97b-d55f-b80892087a2e.png">
すると、画面右側にプロパティ画面が表示され、変更できるようになります。
<img width="1067" alt="スクリーンショット 2016-01-14 9.13.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/80cbf093-8a00-5142-8f67-63de2f166a7e.png">
タイトルを変えてみました。
<img width="1035" alt="スクリーンショット 2016-01-14 9.16.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/8c031e94-fc2e-ba90-d02d-1a4d103b13c2.png">

### コンポーネントのプロパティを見る
直接プロパティを編集したい場合は、まずコンポーネントをクリックします。上図のようにコンポーネント追加メニューが表示されている場合は、「Cancel」をクリックします。
<img width="502" alt="スクリーンショット 2016-01-14 9.21.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/0bbbab07-6c0a-698f-5863-9fa7c5eea3bc.png">
一番右の歯車ボタンをクリックすると、編集画面が表示されます。
<img width="992" alt="スクリーンショット 2016-01-14 9.23.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/67b69f44-6fa8-d06e-cb6c-feda27d8814b.png">
iconElementRight.props.labelを変更してみました。
<img width="810" alt="スクリーンショット 2016-01-14 9.41.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/2f5029c1-f9a0-8f31-b2d0-8f75e2527ed2.png">

### コンポーネントのソースコードを書き出す
歯車ボタンをクリックし、編集画面のComponentタブページを表示します。
<img width="846" alt="スクリーンショット 2016-01-14 9.44.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/de6e63c8-c6bd-9a37-430b-83dd51e60b68.png">
「Generate Component's source code」をクリックすると、以下の画面に切り替わりますので、Group名、Component名を入力し、「Next」ボタンをクリックします。
Groupは作成したコンポーネントをコンポーネント一覧で表示する際のグループで、新しく作る場合は一意の名前を入力します。
<img width="927" alt="スクリーンショット 2016-01-14 9.47.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/f9e92bab-3c28-28db-7c9f-f7df1d284d0a.png">
次の画面で作成方法を選択します。
<img width="917" alt="スクリーンショット 2016-01-14 9.50.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/42d6a861-8393-22fd-9d91-4c5b121adf65.png">
どちらかを選択すると、コンポーネントプロパティの定義画面が表示されます。
<img width="963" alt="スクリーンショット 2016-01-14 9.52.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/7eedbcd1-d4d6-23c8-500b-fb7d3885b8f5.png">
よければ、最終画面へ。
<img width="929" alt="スクリーンショット 2016-01-14 10.12.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/f01793c1-ec61-d05e-95d7-9a98e76359f4.png">
「Save」をクリックすると、下図のように、コンポーネント一覧に表示されます（TestAppBar）。
<img width="244" alt="スクリーンショット 2016-01-14 10.14.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/a8c8e496-a71a-ee8e-f74d-97bd8f7a29f6.png">

### 画面ソースを書き出す
プロジェクトのソースを書き出すことができます。
ハンバーガーメニューをクリックし、「Export Project」をクリックします。
すると、
<img width="346" alt="スクリーンショット 2016-01-14 10.28.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/d87eb29b-e60a-57e1-e9b4-ff97a930f9f4.png">
以下のディレクトリ（routes）にファイルがエクスポートされます。
<img width="554" alt="スクリーンショット 2016-01-14 10.29.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/fdaaff05-eafd-e9de-dbc2-3a3dca252d76.png">