Edited at

ドラッグ&ドロップでReact製のWEBアプリがつくれるReactStudioがやばい

More than 1 year has passed since last update.

react_studio1.JPG


ReactStudioを使ったアプリの作り方はこちら

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


はじめに

reactというとJSXの書き方、props、stateの挙動等を覚える必要があるため、

学習コストが割りと高めであったり、環境を構築するのに一手間かかったり等、

まだまだとっつきにくさが否めないライブラリです。

しかし、今回は、そんなReactをドラッグ&ドロップでアプリが

作れてしまうツールがあったので紹介したいと思います。


※尚、Windowsはなく、Macのみで使用できるツールでございますので、予めご了承下さい。


公式サイト

公式サイトへのURLはこちら。

React Studio

https://reactstudio.com/


ツールの使い方

ReactStudioでコンポーネントをデザインします。

react_studio2.JPG

その後、コードが自動生成されます。

react_studio3.JPG


無料で使える

Macのみ使用でき、無料でインストールすることができます。

react_studio4.JPG


ReactStudioの強み

react_studio5.JPG

従来のプロトタイピングツールでは、テキストや画面サイズが異なった場合、

上手く実装に反映することができませんでした。

しかし、ReactStudioを使うと、デザインからコードが生成されるため、そのまま使うだけで済みます。

このようにコードとデザインとデータの3輪を上手くかけあわせ格段に

生産効率性をあげたのがこのツールの最大の特徴であり強みです。


ReactNative版のIDEツール「DECO」もある

ReactStudioのようにIDEでReactNativeアプリが作れるツールもあるようです。

(だがしかしmacに限る)

公式サイト

Deco

https://www.decoide.org/

deco01.PNG

deco02.PNG

ダウンロードと使い方はこちら

https://www.decoide.org/download

deco03.PNG


おわりに

ぜひMacでReact使っている方は、試してみてはいかがでしょうか。