9 Open Source React and React Native IDEs

React is a JavaScript framework by Facebook for creating scalable  applications. It is used to create many popular apps that you use every day as Instagram, Facebook, Walmart, and Gyroscope.

The React Native is yet another React port for creating mobile apps for Android and iOS. It is used by dozens of global companies such as Skype, Facebook, Instagram, Airbnb, Wix, and Uber.

While many developers prefer to use agonistic IDEs, and code editors such as VS Code, and Atom, there are many React specific IDEs and code editor that come with a dozen of useful features and options.

In this post, we review some of these React IDEs, that will help developers speed up their production time, and enjoy their work on their React projects.

1- Reactide

Reactide is a free open-source React IDE that comes with a built-in Node.js server, a browser simulator and a powerful file manager.

It supports component visualization, and offers a a simple configuration manager to manage multiple configuration at once.

Reactide is available for Windows (7,8,10), Linux (Debian, Ubuntu, Linux Mint) and macOS (10.10+).

Reactide is an Open-source RAD React IDE

ReactIDE: an Open-source React IDE for Windows, Linux, and macOS

MEDevel.comHamza Mousa

2- Deco IDE

Deco IDE  is an old but fairly usable IDE for React Native development. It comes with a developer-friendly interface, and allows developers to run their app directly in iOS and Android simulators.

The IDE comes with a component manager which aid developer to search, find and use React Native components in secs.

Deco IDE: The Open-source Free React IDE for macOS, Linux, and macOS

Deco IDE is a free open-source IDE for React that allows developers to visually code, edit and build their React apps in a visual manner. It has been around for some time now, and it has many devoted users who are still using it, even though it did not receive

MEDevel.comHamza Mousa

3- Utopia

Utopia is a powerful React IDE that is based on VS Code, but comes with dozens of React-specific features. It allows designers and developers to design, edit and modify the components visually, without the need to touch the code.

We wrote a quick review about it here.

Utopia is an Open-source Real-time React Design and Coding Environment

Utopia is a free open-source React development and design environment that allows developers to enjoy a visual real-time coding and design within one platform. Utopia is a browser-based project that can run on a server or any local computer. It can be installed on Windows, Linux, and macOS. Utopia…

MEDevel.comHamza Mousa

4- React Studio

React Studio is not another React IDE, it is aiming to help designers build their React apps visually, with limited interaction to the code, but still it exports the project into a readable code that can be edited in any code editor.

React Studio is free to download for macOS 10.12+, but it is not yet available for Windows or Linux.

React Studio: A Real-time RAD Editor and Prototyping tool for React Developers and Designers

React Studio is a free IDE and RAD tool for designers and developers that allows them in designing, prototyping, and building production-ready React apps. The app is currently available for macOS 10.12 and later, it supports dynamic data, and comes with a rich and advanced visual layout editor. Re…

MEDevel.comHamza Mousa

5- Rekit and Rekit Studio

Rekit is a complete React framework that takes care of many tasks for developers, but it also comes with a powerful web-based React Studio that help developers manage their app, visualize their routes, events, and more.

The project is free and open-source, which anyone can download, and use totally free of charge.

Rekit: Create and Manage React App With a Modern IDE

Rekit is a toolkit for building scalable web applications with React, Redux and React-router. It helps you focus on business logic rather than dealing with massive libraries, patterns, configurations etc. Rekit creates apps bootstrapped by create-react-app and uses an opinionated way to organize f…

MEDevel.comHamza Mousa

6- React Proto

React Proto is not actually an IDE, it is a prototyping tool that utilizes React to produce functional React code.

React Proto is available for Windows, macOS and linux.

React Proto

7- VS Code

VS Code is an open-source code editor and IDE that has a vast ecosystem of extensions, plugins, and themes. React plugins have no shortage in the VS Code extensions directory, which turn your installation into a powerful React IDE.

Here is a tutorial by freeCodeCamp that will help you setup your VS Code for React development.

How to Set Up VSCode for Your React Projects

The ultimate tool you have when you’re developing your projects is your code editor. Which is why it’s so important to set it up properly. In this step-by-step guide, we will go from a completely new VSCode installation to a code editor perfectly prepared for your next React project. Let’s

freeCodeCamp.orgReed Barger

8- Reacto

Reacto is a free open-source React IDE with a package manager that support autocomplete, and comes with a powerful component editor.

Unfortunately, Reacto is no longer maintained by its developer, but it is released as an open-source project under the MIT license.

GitHub - eveningkid/reacto: A sweet IDE for React.js

A sweet IDE for React.js. Contribute to eveningkid/reacto development by creating an account on GitHub.

GitHubeveningkid

9- Nuclide

Nuclide is an IDE for React Native. It can be installed on Linux, and macOS.  It is built on top of the Atom-IDE and uses its package manager to manage its ecosystem.

However, the open-source version is retired, but it can be accessible through the Facebook Open Source Archive.

Retiring the Nuclide Open Source Project

Nuclide is built as a single package on top of Atom to provide hackability and the support of an active community. It provides a first-class development environment for React Native, Hack and Flow projects.

Nuclide

Recommendations

Our first recommendation is Utopia as it is easy to use and comes with many useful features for both designers and developers.

Utopia is an Open-source Real-time React Design and Coding Environment

Utopia is a free open-source React development and design environment that allows developers to enjoy a visual real-time coding and design within one platform. Utopia is a browser-based project that can run on a server or any local computer. It can be installed on Windows, Linux, and macOS. Utopia…

MEDevel.comHamza Mousa

Our second pick for developers is Reactide, which is a full-featured React IDE.

However, If you want to prototype something quick with React, we recommend React Proto, It came a long way to aid designers export a full functional React code from the design canvas.

For React Native, Deco IDE is a good choice, but you have to consider that even it is functional, it did not receive updates for some time.