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.
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.
Top comments (32)
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.
Appreciate the feedback Erick! Please share as we just launched today.
Does it support hooks?
Yes it does! React hooks and Context API
Can I test 3.0 now? Or is it private
It's officially launched! Check out the website -> reactide.io
Wasn't the first one Nuclide by Facebook?
If you're talking about Nuclear IDE, that was a project based off Reactide 1.0.
Looks amazing! Great job. Will this work when using Typescript?
Yes it should!
Will this work with Preact too? :-)
I am not too sure as I have never used Preact personally but you can definitely try!
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
What step was it frozen? It may just be loading
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!
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 :)
Is it cloud-based?
It is not cloud based
Bummer. Are there any plans to make it cloud-based later?
We are currently looking into it as a possibility
React native?
Haven't tested but I'm thinking it should work. Try it out and let me know how it goes!
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?
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!
Wonderful! Will try it tomorrow
Let us know how it goes!