Best IDE for Javascript React

by

Everybody’s talking about React these days, but many developers still don’t know which IDE they should use to write their apps.

There are multiple IDEs out there to choose from, so I decided to test out all of them and share my results with you.

Visual Studio

URL: https://visualstudio.microsoft.com/
Github: https://github.com/microsoft/vscode
Documentation: https://docs.microsoft.com/en-us/visualstudio
Price: Free
Languages: C, Python, .NET, Javascript, React through extensions
Platform: Windows, Mac, Linux
Extension or Plugins: https://marketplace.visualstudio.com/

react IDE
Image source: https://visualstudio.microsoft.com/

VS Code was released by Microsoft: the tool is available under the open-source MIT license. Thanks to its functionality and freeness VScode often wins the vote as the most popular IDE. Visual Studio Code IDE is available for Windows, Linux, and Mac operating systems. Not only does it support JavaScript and React, but it also supports Node.js, TypeScript, coming with a whole ecosystem of extensions for other languages including C ++, C #, Python, PHP, and (of course) .NET.

VScode is a great IDE to start up your work as it supports a lot of programming languages and has lots of features that will help you through your journey.

Top Features:

  • It has built-in support for IntelliSense code completion and also a very good understanding of semantic code.
  • Imported Modules;
  • Integration with GitHub;
  • Wide theme selections;
  • Integrated tools for testing the code;
  • Version controlling via extensions;
  • Built-in debugger;
  • Supports syntax highlighting;
  • Integrated terminal;
  • Go to Definition;
  • Peek definition;
  • You can also jump to any class definition;
  • Tooling for JSX/React, Html, JSON.

Pros

  • It’s Free;
  • Available for different platforms;
  • Over 20000 plugins in the marketplace;
  • Supports React.js IntelliSense; 
  • Low memory usage;
  • Multi Language;
  • Great customization;
  • It is an open source project so you can also contribute to the continuously developing community on GitHub.

Cons

  • Lags sometimes;
  • The code check feature is not that great;
  • Debugging features might be more helpful;
  • Including a built-in screen for package management;
  • Support is not great sometimes.

Notable Extensions

React.js Starter Kit is a react application front-end starter kit built with help of Bootstrap. It is a cross-platform project template powered by Node.js – based development tools like Gulp, Webpack, BrowserSync, Karma, Protractor to speed up React project initialization.

React Snippet Pack is, obviously, a snippet pack for use with the React JavaScript framework

WebStorm

URL: https://www.jetbrains.com/webstorm/
Github: –
Documentation: https://www.jetbrains.com/help/webstorm/meet-webstorm.html
Price: $129/year
Languages: Angular, React, Vue, Node.js, Ionic, React Native
Platform: Windows, Mac, Linux
Extension or Plugins: https://plugins.jetbrains.com/webstorm

react.js ide webstorm
Image source: https://www.jetbrains.com/webstorm/

The quality of Webstorm IDE is evidenced by the fact that it is used by the overwhelming majority of large organizations.

Features

  • In-built debugger support;
  • In-built testing capabilities;
  • Syntax error detection;
  • Integration with Git;
  • Integration with Mercurial;
  • The built-in web server helps to run projects online;
  • Code completion for React and JSX;
  • It has a Live Edit feature which allows you to immediately see the changes in the browser as soon as you change the code;
  • Version Control System;
  • Built in Terminal.

One of the best features is that by default WebStorm is configured to autosave files as you work on them, and when you switch to other IDEs, you feel the beauty of WebStorm. The other neat thing is that WebStorm has a built-in version control system that commits every time a file is saved. It’s separate from Git commits.

Pros

  • Native integration with source control systems such as GitHub, Git, as well as Subversion, Perforce, and Mercurial;
  • Flexibility of settings;
  • Good integration with Angular, TypeScript, Vue, React by default;
  • Large number of plugins;
  • Excellent indentation, tips on how to simplify the code and basic code validation for errors;
  • Very useful merge tool.

Cons

  • Not great in terms of performance;
  • Slow working with lots of projects;
  • Relatively complex settings;
  • It is not open-source.

If you are looking for a mature platform, this might be the right option because it is known for its outstanding development features for the last 15 years.

In terms of React development there are the following features:

  • WebStorm comes with over 50 plugins to make React development easier;
  • Navigates through JSX tags using breadcrumbs and colorful highlighting for the tag tree
  • Integrates with linters, such as ESLint, for JSX code

We consider WebStorm to be the best-paid IDE on the market for React development, thanks to its many features, plugins, and good documentation.

Reactide

URL: https://reactide.io/
Github: https://github.com/reactide/reactide
Documentation: –
Price: Free, open-source
Languages: React
Platform: macOS, Windows, Ubuntu
Extension or Plugins: none

react ide reactide
Image source: https://reactide.io/

Reactide is one of the few and the first IDEs dedicated to React development only. It’s a cross-platform desktop application that offers a custom simulator, making build-tool and server configuration unnecessary.

Features

  • Seamless browser integration;
  • Live visualization;
  • Build tools inside;
  • Integrated node server;
  • Integrated terminal.

Pros

  • Live view of components inside IDE;
  • Thanks to live reloading within the development environment, you do not need to flip flop between code files and browser to check the changes made; 
  • Cross-platform tool.

Cons

  • No plugins;
  • No community in comparison with other tools.

If you want to quickly develop a React project or change it, then there is no better tool than ReactIDE. The tool works quickly and has a number of features useful specifically for React development.

Atom

URL: https://atom.io/
Github: https://github.com/atom
Documentation: https://atom.io/docs
Price: Free, open-source
Languages: Mostly Javascript
Platforms: Windows, Linux, macOS
Extension or Plugins: https://atom.io/packages

atom react ide
Image source: https://atom.io/

If you are developing a web application on Github, then there is no better IDE for you than Atom. This open-source editor was developed by GitHub and is therefore closely linked to the platform. Atom is also a completely normal Javascript editor, with the help of which web projects can be implemented. Atom has vast community support that listens and works on the feedback. It is available on Windows, Linux, and macOS and has a huge package repository to cater to the developers’ needs.

Features

  • Ease of use with excellent navigation UI;
  • Collaborative support for multiple developers;
  • In-built auto-complete and suggestion feature;
  • Syntax highlighting;
  • Atom has a built-in package manager which keeps on updating packages; you can also search for packages or start creating your own packages as well;
  • It also has a feature in which you can drag and drop a module of your file or whole file in a different file;
  • Cross-platform editing;
  • Find, preview, and replace text as you type in a file or across all your projects.

Pros

  • Completely free to use;
  • A large number of packages available for every need;
  • Cross-platform;
  • Instant file switching;
  • Packages. Atom has a built-in CoffeeScript package manager;
  • The built-in package manager is great;
  • Straightforward interface to learn and use;
  • Git Integration.

Cons

  • The atom is slow to start;
  • Files over 10-15 MB may cause crashes;
  • Documentation is not great;
  • Lack of Code Execution;
  • Slower than other top editors;
  • Based on Electron – therefore speed issues.

Atom is truly hackable and can be customized using tons of Node.js-based plugins to extend atom functionality to your needs. Due to so much support from different communities and an awesome UI interface and features it has attracted a lot of developers.

Packages

  • zenchat-snippets – It is a collection of snippets for react-native, redux and ES6.
  • language-babel – This package includes Language grammar for all versions of JavaScript including ES2016 and ESNext, JSX syntax as used by Facebook React, Atom’s etch and others.

GNU Emacs Editor

URL: https://www.gnu.org/software/emacs/
Github: https://github.com/emacs-mirror/emacs
Documentation: https://www.gnu.org/software/emacs/documentation.html
Price: Free
Languages: Language agnostic
Platform: GNU, GNU/Linux, FreeBSD, NetBSD, OpenBSD, MacOS, MS Windows and Solaris
Extension or Plugins: https://github.com/emacs-tw/awesome-emacs

GNU emacs editor, react ide
Image source: https://www.gnu.org/software/emacs/

GNU Emacs is a text editor that comes with a basic user interface, but very useful functionalities. The tool belongs to the text editors family known for their extensibility. GNU Emacs will be very familiar to those who know how to work with the Vim editor. This editor can be called the most simplistic editor available that, however, misses none of the important features.

Features

  • Well documented references available;
  • Supports Unicode files;
  • Capabilities to install and download the extensions;
  • It can do a lot more than React Native app development.
  • Full Unicode support;

Pros

  • High-speed coding environment;
  • Syntax highlighting;
  • A lot of useful tutorials;
  • Theme customization;

Cons

  • Difficult to get used to;
  • The initial setup time is very long;
  • Lots of features: discovering them might take a long time.

As for React, Emacs does require a bit of work and plugins to really get it to work efficiently.

Extensions

web-mode.el – It is an autonomous emacs major-mode for editing web templates. It is compatible with many languages including JSX (React).

Spacemacs Editor

URL: https://www.spacemacs.org/
Github: https://github.com/syl20bnr/spacemacs
Documentation: https://www.spacemacs.org/doc/DOCUMENTATION.html
Price: Free
Languages: Almost language agnostic
Platform: Windows, Mac, Linux
Extension or Plugins: –

spacemacs editor react ide
Image source: https://www.spacemacs.org/

Looking for the best combination of Emacs and Vim, this is the editor that will provide you the best services. Spacemacs is a community-driven Emacs distribution, thus the best editor that takes the best from Emacs and Vim.

Features

  • A great user interface, one of the best features here in comparison to Vim;
  • Well organized key bindings;
  • Git integration;
  • Simple query system to quickly find available layers, packages and more.

Pros

  • Available on several platforms;
  • The documentation provided here is more than enough;
  • Spacemacs has a great community meaning you will never be stuck on a problem for long;
  • Great if you already are a massive Emacs or Vim fan;
  • Can configure eslint support;
  • Can use prettier.js for formatting files on save.

Cons

  • The CPU usage is not very optimized;
  • The tool gets stuck sometimes.

Emacs relies on community-written open-source packages for basically every IDE feature for every language. We think it’s great: you can develop the package for yourself. There’s definitely a learning curve, but also there are some really nice tools to help orient yourself in emacs.

Extensions

React layer – ES6 and JSX ready configuration layer for React. It will automatically recognize .jsx and .react.js files. One package layer for React integration.

Sublime Text

URL: https://www.sublimetext.com/
Github: https://github.com/SublimeText
Documentation: https://www.sublimetext.com/docs/
Price: from $0 – $99
Languages: Almost language agnostic
Platforms: Windows, Linux, macOS
Extension or Plugins: there no one directory, but there are many plugins

sublime text react ide
Image source: https://www.sublimetext.com/

Sublime Text is a powerful text editor for almost every language. It’s lightweight, feature-rich, and supported on popular platforms. Users only need one license to use Sublime Text on any computer. The tool is fast, integrated with multiple tools, and supports React and React Native and all the web programming languages. The Sublime Text provides great plugin support to enhance the capabilities of the editor. It is currently available on Windows, Mac, and Linux. 

The functionality of the Sublime text editor can be expanded and adapted using plugins. In practice, many JS plugins help turn Sublime Text into an elegant Javascript IDE.

Sublime Text uses a custom UI toolkit optimized for speed and beauty, taking advantage of native functionality on each platform.

Features

  • Sublime Text supports auto completion of codes and also the variables created by the user;
  • The command palette helps in setting the syntax of your code;
  • A great library of API and packages is beneficial for developers;
  • Supports setting key binds and macros for easier coding;
  • One of the awesome features of the editor is showing a condensed preview of your long code which helps you to move through your code faster.

Pros

  • Easy to navigate;
  • Possible to expand functionality;
  • Multi-line editing possible;
  • Beginner-friendly;
  • Great keyboard shortcuts and multi-selection options;
  • You can quickly go to the definition of class or method.

Cons

  • Not open source;
  • Large files are slow to load;
  • Not a complete IDE;
  • Not free – a big issue for a lot of developers;
  • The free mode has a lot of annoying notifications.

We are not great fans of using Sublime for react development, because there are other better and free options available. If you are already using Sublime in your organization and want to include React in your project, this definitely might be a good option, no need to scratch your head to find anything else. 

Packages

react-native-snippets – It is a collection of Sublime Text Snippets for react-native

babel-sublime – Syntax definitions for ES6 JavaScript with React JSX extensions.

Rekit Studio

URL: https://rekit.js.org/
Github: https://github.com/rekit/rekit
Documentation: https://rekit.js.org/
Price: Free
Languages: React
Platform: Web
Extension or Plugins: https://rekit.js.org/docs/plugin.html

rekit studio react ide
Image source: https://rekit.js.org/

Rekit is an IDE focused specifically for developing apps using React. Rekit studio works as an IDE as well as a toolkit that can be used for developing web apps using React, React router and Redux. Rekit studio runs on a node server and is an npm package, and for that reason, it runs in your browser. Developers can utilize many features with Rekit Studio, including code editing, code generation, dependency diagramming, refactoring, building, unit tests, and an easier way to navigate code. The main feature we like about Rekit is that every React app has its own Rekit studio, so things remain simple and controlled.  However, we wouldn’t recommend Rekit for enterprise-grade React js development.

Features

  • Refactoring;
  • Unit tests; 
  • Code generation; 
  • Support for Less and Sass; 
  • React router; 
  • Command line tools; 
  • You can also extend Rekit functionality by developing your own plugins. 

Brackets

URL: http://brackets.io/
Github: https://github.com/adobe/brackets
Documentation: http://brackets.io/docs/current/modules/brackets.html
Price: Free
Languages: JS, Ruby, Python, Perl etc.
Platforms: Windows, Linux, macOS
Extension or Plugins: https://registry.brackets.io/

brackets react ide
Image source: http://brackets.io/

Brackets is a very lightweight and lightning-fast web development IDE, but looking more like a source code editor. Brackets is one of those IDEs built mostly for web developers. Brackets has got huge plugin support and is entirely free to use. Created by Adobe Systems, this open-source software can help you build code in all the web programming languages out there. Brackets is available for Mac, Windows, and Linux. Function finding and quick project switching are some notable features it offers.

Features

  • Live Preview that allows you to get a real-time connection to your browser; whenever you make a change, you immediately see the changes on the screen;
  • Support for the preprocessor;
  • In-built JavaScript debugger;
  • Tons of plugin support;
  • Quick-Edit features enabled;
  • Available for Windows, Linux, and Mac OS;
  • Allows collaborative working on the code for multiple developers;
  • Includes code-folding and syntax highlighting;
  • Inline editors.

Pros

  • Extension in Google Chrome. The main feature of the Brackets editor, highlighted by many developers, is real-time communication with Google Chrome. With this mechanism’s help, the developer can immediately observe how all these changes will be displayed in the browser after a change is made;
  • Widely developed hotkey system;
  • The main feature that distinguishes Brackets from other JS editors is the Extract function. The extraction function allows you to extract information directly from the PSD – such as fonts, colors, and dimensions, with pure CSS and no contextual code references;
  • Code Minification.

Cons

  • Few extensions compared to other editors on the market;
  • Lack of support for server-side languages;
  • Difficult Project Management;
  • Low Performance while working with large files.

When it comes to react, there are plugins available to enhance Brackets functionality for speed development using React components.

Brackets is the best web IDE if you are looking for an editor that understands web design. It comes with a great set of visual tools, such as website form creators or other preprocessor supports. It has been created by web designers for web designers.

Note: On September 1, 2021, Adobe will end support for Brackets. If you would like to continue using, maintaining, and improving Brackets, you may fork the project on GitHub.

Vim Editor

URL: https://www.vim.org/
Github: https://github.com/vim/vim
Documentation: https://www.vim.org/docs.php
Price: Free
Languages: Almost all
Platform: Linux, macOS
Extension or Plugins: https://vimawesome.com/

vim editor react ide
Image source: https://www.vim.org/

Vim is a very old IDE. Well, at least as an IDE. It is a very advanced text editor, and you’ll never make the developers who love it leave it and force them to switch to VScode or WebStorm. It is very well-known among developers because of its configuration properties. It is free and highly customizable.

Vim has search and syntax highlighting features and is super lightweight. Thus, it can handle very, very large files. However, it will take a very long time to set up Vim. The tool has a graphical interface, but – you might have guessed – it needs to be customized. Even for the mouse to work, you need to sweat. By default, Vim is controlled by keyboard and keyboard shortcuts. Vim can be a great IDE if you customize it and become familiar with it inside and out. But if time is tight, this is probably not the best choice.

Features

  • It takes very little space on RAM to run efficiently;
  • Different tabs and windows can help work on different projects at the same time;
  • Extensive plugin system;
  • Support for hundreds of programming languages and file formats;
  • Powerful search and replace.

Pros

  • It is possible to install on a very large number of operating systems; 
  • Deep editor settings, you can customize it all as you need;
  • The code editing process is speedy.

Cons

  • Due to the fact that it is terminal, it is very fast but very difficult to learn;
  • It takes a long time to get used to the user interface;

An important detail in favor of Vim is that a huge number of engineers in top corporations use VIM, such as Facebook.

Notable Plugins for React Development

vim-jsx – Syntax highlighting and indenting for JSX.

vim-react-snippets – A set of snippets for Vim to work with Facebook’s React library.

vim-babel – Another set of snippets for Vim to work with Facebook’s React library.

Conclusion

I have researched all the popular code editors for React, including Atom, WebStorm, Brackets, Visual Studio Code, and others. These are my top picks based on popularity, community activity, plugins, and available features.

Leave a Comment