クロスプラットフォーム

初めてのReact Studio #001

2018年4月10日

目次Category


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

★ React Studio の 導入 ★

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

    1. React Studioをダウンロードします
    2.  以下のURLにアクセスして、アプリをダウンロードします。

 

    1.  

https://reactstudio.com/
スクリーンショット 2018-04-10 17.27.56







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

 

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

 

    1. React Studioが起動することを確認します

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







    1. [About React Studio]を選択してReact Studioの情報を確認します

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

























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

 

    1. プロジェクトは、以下の3つのパターンから選択します
      • Mobile-First Web App

iPhoneなどの電話端末またはタブレットに最適化された、レスポンシブデザインで、Web上で簡単に共有・公開できるプロジェクトになります。

      • Custom-Size Web App

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

      • Component Pack

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

    1.  
    2. [Create new project]をクリックして、Mobile-First Web Appプロジェクトを作成します

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

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

最新の記事

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

この記事を書いた人

tsutomu_sasaki