DEV Community

loading...
Cover image for The First Dedicated IDE for React Web Applications is Finally Here - ReacTide 3.0 Beta

The First Dedicated IDE for React Web Applications is Finally Here - ReacTide 3.0 Beta

ep36 profile image EP ・2 min read

In addition to the teams behind Netflix, eBay, Airbnb, Dropbox, Instagram, and Facebook, there are currently over 1.3 million websites and applications built on React, making it one of the most powerful and ubiquitous frameworks of all time.

React has quickly become the first-approach solution for developers to build web apps, mobile apps, desktop, and even VR. Now coupled with the innovations being rolled out with React Hooks, the growing need for integrated developer solutions is on the horizon.


A Call for Web-Simplicity

Sophie Alpert, a React core engineer stated at a previous React conference:

We've lost a lot of web-simplicity… What we'd like to have is the ability to create a single file for your app and just run that without having to set anything up… We need the community to build tools more like this."

The Reactide team has responded to this challenge by approaching the developer community for more insight. We talked to dozens of React developers at various ReactJS New York events and identified primary pain points in React development:

  • Custom React boiler-plating requires hours of configuration and JavaScript fatigue, even for quick prototyping.
  • Current developer tools are separated into specialized cases and do not offer cross-utilization.
  • React applications have grown to have up to thousands of components, making component management nearly prohibitive.
  • Long component chains make state flow difficult to follow and debug.

We started on a journey to address these pain points so that developers can get back to the business of coding.


We are thrilled to introduce the world's first dedicated IDE for React web development - Reactide.

Alt Text

An Extensible Developer Environment in a Single Click

Reactide is a cross-platform desktop application that offers a custom simulator, making build-tool and server configuration unnecessary. This brings development back to the days where opening a single file instantly renders the project in the browser. Now developers can achieve the same simplicity with a single React JSX file while still utilizing the power of React.

Navigable, Editable, Live Visualization

We are also excited to announce an innovative visualization tool that allows developers to navigate and edit code live via Reactide's custom-built component tree renderer. This makes managing state flow visual, direct and, most of all, intuitive.

Synchronized Properties

To accelerate the React development flow even further, Reactide offers synchronous GUI controls of component properties and styles. The cumbersome process of having to wait and transpile every minor edit to a project, is now instant.

It has been a long journey, and the team behind Reactide 3.0 - Juan Hart, Khalid Umar, Rocky Liao, and myself -  are finally pleased to call for beta testers. Reactide is available for Mac, Linux, and Windows.

Please visit Reactide.io and star us on GitHub for updates and to be a part of the official launch of Reactide!

Discussion

pic
Editor guide
Collapse
cutiko profile image
Erick Navarro

Why is this not getting more attention? The tooling for React can surely improve and this nail it.

Android Studio used to be a pain 4 years ago, is still under optimized (your computer could easily heat a small room), having good tooling makes your work comfortable. This is the AS equivalent for React.

If you need more people on the team there is a project called PlayCode 1 dev 1 designer, they have build an amazing sandbox for js and ts, you should at least talk with them.

Collapse
ep36 profile image
EP Author

Appreciate the feedback Erick! Please share as we just launched today.

Collapse
seanmclem profile image
Seanmclem

Does it support hooks?

Collapse
ep36 profile image
EP Author

Yes it does! React hooks and Context API

Collapse
seanmclem profile image
Seanmclem

Can I test 3.0 now? Or is it private

Thread Thread
ep36 profile image
EP Author

It's officially launched! Check out the website -> reactide.io

Collapse
giancastle profile image
Giancarlos C.

Wasn't the first one Nuclide by Facebook?

Collapse
ep36 profile image
EP Author

If you're talking about Nuclear IDE, that was a project based off Reactide 1.0.

Collapse
jpadilladev profile image
Jorge

Looks amazing! Great job. Will this work when using Typescript?

Collapse
ep36 profile image
EP Author

Yes it should!

Collapse
mindplay profile image
Rasmus Schultz

Will this work with Preact too? :-)

Collapse
ep36 profile image
EP Author

I am not too sure as I have never used Preact personally but you can definitely try!

Collapse
povilasc profile image
Povilas Ciplis

it froze after launching it on macOS 10.14.5. am I only one?

edit: after 2 minutes waiting its working back but its not as responsive as VS Code for example

Collapse
ep36 profile image
EP Author

What step was it frozen? It may just be loading

Collapse
povilasc profile image
Povilas Ciplis

it was frozen during the first "new project" launch, but around after 2 minutes it was responsive again. thanks for asking 😊
P.S. thanks for the article also!

Thread Thread
ep36 profile image
EP Author

That makes sense, "New Project" takes a bit to load up because it is installing CRA under the hood. Please take some time to give us a star on GitHub. All support is appreciated :)

Collapse
johnnyosullivan profile image
Johnny O'Sullivan

Is it cloud-based?

Collapse
khalid050 profile image
Khalid Umar

It is not cloud based

Collapse
johnnyosullivan profile image
Johnny O'Sullivan

Bummer. Are there any plans to make it cloud-based later?

Thread Thread
khalid050 profile image
Khalid Umar

We are currently looking into it as a possibility

Collapse
varoondev profile image
Varoon S

React native?

Collapse
ep36 profile image
EP Author

Haven't tested but I'm thinking it should work. Try it out and let me know how it goes!

Collapse
ytjchan profile image
ytjchan

Would you recommend the IDE for React beginners like me? Or should I stick to text editors until I have gotten a hang of it?

Collapse
seemsrocky profile image
Rocky Liao

We encourage you to try it out! Because if you simply start with opening a new project, it'll bring you up to a default React app right away and you'll be able to start playing around with react and it skips the process of switching between your browser and your code editor. It would definitely be a good way to start learning react!

Collapse
sparkedx profile image
Sparkdex

Wonderful! Will try it tomorrow

Collapse
ep36 profile image
EP Author

Let us know how it goes!

Collapse
ziademadmohammed profile image
ziademadmohammed

The ide only supports debain based linux .
It would be awesome if you provide it as a snap.
Or providing instructions on building from source on the docs

Collapse
ep36 profile image
Collapse
francisco profile image
Francisco M. Delgado

This is an awesome project!

Collapse
progapanda profile image
Khaled Alba.

Amazing idea!
But i wonder why would you be just for react when you can do the same thing for every framework.. Why make the scope so concentrated.

Collapse
ep36 profile image
EP Author

We wanted to cater to the community (React) that have led us to the growth we've experienced as software engineers. We are not trying to compete with giants like VS Code, moreso just optimizing for a specific framework. I would love to see a Vue or Angular dedicated IDE, we decided on React.

Collapse
phatdang profile image