LoginSignup
4
1

More than 5 years have passed since last update.

electronベースのreact用IDEエディタ Reactide

Last updated at Posted at 2018-12-16

2018.12.16 wrote

Reactide

Reactide

Kobito.YPHpoC.png

Reactide is the first dedicated IDE for React web application development. It’s a cross-platform desktop application that offers a custom simulator, making build-tool and server configuration unnecessary. Developers can render a project in the browser instantly with just a click of a button by opening a single file.

While React is still in active development, we’re keeping a weather eye on what they do have available. An integrated Node server and custom browser simulator eliminates the need for server config and build-tools. All projects developed in Reactide are build-tool agnostic. Reactide also offers a visual editing solution with a live-representation of the project’s architecture. There’s also a bunch of straightforward GUI controls that make it easier than ever to get immediate feedback in the browser simulation.

More information about Reactide is available here. Reactide is free and open source.

ビルド

git clone https://github.com/reactide/reactide.git

git checkout 2.0-release
npm install
npm run webpack
npm run electron-packager

実行

/release-builds/Reactide-darwin-x64/ に実行ファイルが出来ているのでReactideを実行する。
初期状態が起動すれば成功です。

スクリーンショット 2018-12-16 9.25.15.png

File → NerProject で作成してみます。

作成と同時にcreate-react-appが走り新しいReactプロジェクトが作成されました。

スクリーンショット 2018-12-16 10.05.29.png

src/index.jsを開いてみます。
右上にボタンが現れるので真ん中のボタンを押してみるとシミュレータが起動します。

スクリーンショット 2018-12-16 10.06.52.png

スクリーンショット 2018-12-16 10.08.52.png

ソースを変更するとリアルタイムにシミュレータに反映されます。

スクリーンショット 2018-12-16 10.10.33.png

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1