reactjs
reactstudio

React Studioを使ってQiitaの記事一覧アプリを作成してみる

はじめに

前回の記事で大きな反響を頂いたので、本記事では、
簡単なQiitaの記事一覧アプリの作成を通して、手順を説明したいと思います。

完成版はこちら
https://neonto.cloud/u/yuxiotest/
Screen Shot 2018-01-21 at 7.01.13 PM.png

プロジェクトの作成

ReactStudioを開き、「Create new project」をクリックします。
1.png

プロジェクト画面が開かれます
Screen Shot 2018-01-21 at 6.18.01 PM.png

アプリのタイトルの設定をします
Screen Shot 2018-01-21 at 6.18.34 PM.png

アプリ全体のスタイルを決めます
Screen Shot 2018-01-21 at 6.19.15 PM.png

プロジェクトマップから「Screen」を選択します
Screen Shot 2018-01-21 at 6.19.57 PM.png

必要なコンポーネントをあてはめる

ナビゲーションバーを入れる場合、
nav barにチェックを入れます。
2.png

カードを入れます
3.png

コンポーネント化させます
1.png

コンポーネントさせると以下のようにプロジェクトマップに反映されます
2.png

カードのコンポーネントを選択し、
テキストとボタンを入れます
ダブルクリックして、
テキストに「記事のタイトル」
ボタンに「この記事を読む」と変更します
3.1.png

ボタンをクリックし、
Elementで色を変更します
Screen Shot 2018-01-21 at 6.30.25 PM.png

WEB上で一度確認してみましょう
「Open in Web Browser」をクリックします
5.png

ローカルサーバが立ち上がり、
コンパイルされたものが開かれます
Screen Shot 2018-01-21 at 6.32.48 PM.png

画面の要素の位置を整える 

画面の要素を真ん中や左や右に整えたい時は、keylineを使用します。
「add keyline」を選択します。

6.png

表示されたkeylineをクリックします
7.png
Fromの中から「Left」「Middle」「Right」を選択します。
今回は、真ん中に揃えたいのでMiddleを選択します。
8.png

その後、コンポーネントのカードをクリックすると
alignが出てくるので
「center on keyline」を選択します
9.png

ブラウザで確認すると真ん中になりました
Screen Shot 2018-01-21 at 6.35.52 PM.png

リストを作る

カードのコンポーネントを選択→「Make list」→「Create Data Sheet」を選択
カードがずれていたら、真ん中にドラッグして移動させて調整します

10.png

11.png

Screen Shot 2018-01-21 at 6.50.16 PM.png

プロジェクトマップのScreenに戻り、
リストがずれているので真ん中に戻し、
alignをクリック→「center on keyline」をクリックします

「open web in browser」で
ブラウザで確認すると以下のような感じです
Screen Shot 2018-01-21 at 6.38.35 PM.png

要素にデータを入れる

ReactStudioでは、値を取得して表示させることができます。
jsonでデータも取得できますが、今回は入力したデータを
取ってくるようにします。
プロジェクトマップに行き、「Data」を選択します
12.png

「list data 1」を選択
「add column」をクリックします
Screen Shot 2018-01-21 at 6.39.11 PM.png

columnをリネームします
今回は、Qiitaの記事を持ってくるので、titleとlinkという名前にします
Screen Shot 2018-01-21 at 6.39.59 PM.png

表示させたい記事のタイトルを入力します
Screen Shot 2018-01-21 at 6.44.20 PM.png

データを表示させる

Screen Shot 2018-01-21 at 6.46.05 PM.png
リストをクリックし
DataのList data 1であることを確認します

カードのコンポーネント(comp2)を選択します
14.png
「記事のタイトル」をクリック→「Data」→
「Text」をクリックし「title List data 1」を選択

ボタンをクリック「data」→「Enabled」→
「link list data 1」→をクリック

「Interact」を選択「Script」→「Edit Script」→
「Window.open・・・」のコードを入力
Screen Shot 2018-01-21 at 6.58.35 PM.png

プロジェクトマップから
List item1を選択
0TtZLh57.png

コンポーネントを選択し、
「Data」をクリック
その後、「title」に title List data 1
「Link」に link list data 1を選択します
Screen Shot 2018-01-21 at 10.02.17 PM.png

これで完成です!
Screen Shot 2018-01-21 at 7.01.13 PM.png

アプリのビルド

完成したものをビルドしましょう
「Publish to Web」をクリックします
Screen Shot 2018-01-21 at 9.44.50 PM.png

site name(URL)をつけます
Screen Shot 2018-01-21 at 7.00.12 PM.png

「Publish now」を選択します

Screen Shot 2018-01-21 at 7.00.50 PM.png
「Copy URL to Clipboard」をクリック→「OK」

完成品にアクセスします
Screen Shot 2018-01-21 at 7.01.00 PM.png

こんな感じに表示されます
Screen Shot 2018-01-21 at 7.01.13 PM.png

https://neonto.cloud/u/yuxiotest/

プログラムの確認

自動生成されたプログラムは、「Code glance」で見ることができます
Screen Shot 2018-01-21 at 9.51.44 PM.png

Screen Shot 2018-01-21 at 7.01.57 PM.png

コードをエクスポートする時は、「Export React Code」でエクスポートできます
Screen Shot 2018-01-21 at 7.02.19 PM.png

おわりに

慣れると30分でここまですることができました

サンプルがすでに用意されているのでこれを使えば、ポートフォリオをはじめ、色々なものが作成できます
Screen Shot 2018-01-21 at 9.54.50 PM.png
Screen Shot 2018-01-21 at 9.55.09 PM.png