Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

Structorとは

React UI Builder改めStructor

reactのGitHub wikiでも取り上げられているStructor。
Structor:http://helmetrex.com/

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

Structorでできること

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

YouTubeにいくつか動画がアップされていて、概要を見ることができます。
YouTube:Speed designing of ToDo list with ReactJS and Redux

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

セットアップ

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 にアクセスします。
↓のような画面が表示されます。
スクリーンショット 2016-01-13 9.52.30.png

ボイラープレートの選択

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

今回はmaterial-ui-prepackを試しに採用してみます。
ボイラープレートの右上にある[Clone]をクリックします。
スクリーンショット 2016-01-13 10.06.37.png
Cloneすると、以下のようにちょっと待って状態になります。気長に待ちます。
(数分経っても終わらなかったら再読み込みしましょう。きっと終わってるはず。)
スクリーンショット 2016-01-13 10.07.53.png
Cloneが終わると、以下のような画面が表示されます。
スクリーンショット 2016-01-13 10.13.49.png

代表的なコンテンツ

ページ切り替え

ページの切り替えは、下図のように、画面左上のセレクトリストで行います。
スクリーンショット 2016-01-14 8.49.46.png

画面に追加できるコンポーネント一覧

画面に追加したいコンポーネントは画面右上にある、「+」ボタンをクリックし、コンポーネント一覧から作成したいコンポーネントを選びます。
スクリーンショット 2016-01-14 8.52.40.png
「+」をクリックすると、以下のようにコンポーネントグループが表示されます。
スクリーンショット 2016-01-14 8.54.37.png
追加する前にプレビュー的なこともできます。
スクリーンショット 2016-01-14 8.57.08.png

実際に画面に追加する場合は、まず、下図のようにコンポーネントを置きたい箇所近辺のコンポーネントをクリックして、コンポーネントのメニューを表示させます。
スクリーンショット 2016-01-14 9.01.17.png

そのコンポーネントの上に置きたいなら、「Before」、下なら「After」、という感じでお好みのボタンをクリックします。
「Before」をクリックすると、下図のように上に置かれました。
スクリーンショット 2016-01-14 9.06.04.png

コンポーネントのカスタマイズ

先ほど置いたコンポーネントの色などの属性を変更したい場合、下図のブラシボタンをクリックします。
スクリーンショット 2016-01-14 9.11.48.png
すると、画面右側にプロパティ画面が表示され、変更できるようになります。
スクリーンショット 2016-01-14 9.13.05.png
タイトルを変えてみました。
スクリーンショット 2016-01-14 9.16.08.png

コンポーネントのプロパティを見る

直接プロパティを編集したい場合は、まずコンポーネントをクリックします。上図のようにコンポーネント追加メニューが表示されている場合は、「Cancel」をクリックします。
スクリーンショット 2016-01-14 9.21.55.png
一番右の歯車ボタンをクリックすると、編集画面が表示されます。
スクリーンショット 2016-01-14 9.23.10.png
iconElementRight.props.labelを変更してみました。
スクリーンショット 2016-01-14 9.41.21.png

コンポーネントのソースコードを書き出す

歯車ボタンをクリックし、編集画面のComponentタブページを表示します。
スクリーンショット 2016-01-14 9.44.33.png
「Generate Component's source code」をクリックすると、以下の画面に切り替わりますので、Group名、Component名を入力し、「Next」ボタンをクリックします。
Groupは作成したコンポーネントをコンポーネント一覧で表示する際のグループで、新しく作る場合は一意の名前を入力します。
スクリーンショット 2016-01-14 9.47.10.png
次の画面で作成方法を選択します。
スクリーンショット 2016-01-14 9.50.34.png
どちらかを選択すると、コンポーネントプロパティの定義画面が表示されます。
スクリーンショット 2016-01-14 9.52.25.png
よければ、最終画面へ。
スクリーンショット 2016-01-14 10.12.46.png
「Save」をクリックすると、下図のように、コンポーネント一覧に表示されます(TestAppBar)。
スクリーンショット 2016-01-14 10.14.30.png

画面ソースを書き出す

プロジェクトのソースを書き出すことができます。
ハンバーガーメニューをクリックし、「Export Project」をクリックします。
すると、
スクリーンショット 2016-01-14 10.28.47.png
以下のディレクトリ(routes)にファイルがエクスポートされます。
スクリーンショット 2016-01-14 10.29.38.png

kuniken
React,Nodejs,Salesforceをよく使ってます。 ーー エンジニア募集中です! https://paiza.jp/career/job_offers/5412 システムに関するご相談はこちらより承っております。 https://solutionware.jp/contact.html
https://solutionware.jp/blog/category/kunitak/
solutionware
WEBサービスの開発・運営を通じてお客様の生産性向上を実現します
https://solutionware.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away