初めてのReact Studio #001

2018年4月10日

スクリーンショット 2018-04-10 17.24.31

★ React Studio の 導入 ★

今回、実際の開発プロジェクトで、React Studioを利用して、iOSのWebViewアプリを開発する機会がありました。 その際に、React Studioがとても便利でしたので、今後の開発プロジェクトでも利用して行く可能性が高いため、少しずつ記事にまとめていこうと思います。
※2018/04/10現在Mac以外では利用できません。

  1. React Studioをダウンロードします
  2.  以下のURLにアクセスして、アプリをダウンロードします。
     https://reactstudio.com/
    スクリーンショット 2018-04-10 17.27.56







  3. ダウンロードしたファイル「ReactStudio_v14_build323.zip」を解凍します

  4. 解凍された「React Studio」をアプリケーションフォルダ配下に移動します

  5. React Studioが起動することを確認します
  6. スクリーンショット 2018-04-10 17.32.17







  7. [About React Studio]を選択してReact Studioの情報を確認します
  8. スクリーンショット 2018-04-10 17.34.26 スクリーンショット 2018-04-10 17.45.00

























    ※本記事は、こちらに表示されているバージョン1.4(323)を対象としています。

  9. プロジェクトは、以下の3つのパターンから選択します
    • Mobile-First Web App
    • iPhoneなどの電話端末またはタブレットに最適化された、レスポンシブデザインで、Web上で簡単に共有・公開できるプロジェクトになります。

    • Custom-Size Web App
    • デスクトップPCやテレビなどの画面サイズが固定されたアプリに最適化したプロジェクトになります。

    • Component Pack
    • Reactのコンポーネント単位で画面開発し、ソースコードをエクスポートする際に利用します。

  10. [Create new project]をクリックして、Mobile-First Web Appプロジェクトを作成します
  11. スクリーンショット 2018-04-10 17.50.26

次回からは、React Studioの機能について、少しずつ紹介していきたいと思います。

最新の記事

初めてのReact Studio #002 ~ Screenの作成/プロジェクトのエクスポート

この記事を書いた人

tsutomu_sasaki

関連記事

おすすめの記事