All set to play around with React or React Native? A good IDE for React is the first thing you need to get started with React ecosystem. If you Google around, probably you have already done that, you will find that there are many React IDE and editors available out there in the wild, and down selecting one can be a time consuming task.
In this article, I will attempt to give you a fair idea of various available IDEs, free as well as paid, so that you can pick one that best fits your development needs.
Before getting to the serious stuff, let us see what a “newbie” should do if she (sorry he) just wants to get the hang of what this React stuff is. The option for beginners is to simply open one of the browser based online React editors like CodeSandbox, CodePen, Glitch or Repl.it and see the magic of React live.
The best thing is that online editors come with pre-created templates and starter apps. All you need to do is – run the code, see the output, change something, see the output changing and all. You know what I mean, have a look at the image below from repl.it–
If you are into serious stuff, and that is what we will focus here for the most part, then you need to setup a software like VS Code, Reactide, Webstorm, Sublime Text, Atom, Rekit, Deco IDE, and well there are many more.
VS Code is the choice of many developers for the simple reason that it is free, lightweight, loaded with features, ergonomically designed and is very intuitive to use. It happens to be my personal favorite as well.
“Course not to be missed (have a look for sure, 90% discount) – React – The Complete Guide (incl Hooks, React Router, Redux). Also check out – Modern React with Redux [2020 Update]
With Webstorm, we are moving into commercial space, it is a paid tool and nothing short of any other IDE discussed in this article. But well, you probably may not want to spend money given other free choices available, unless you are taking a purchase decision for an enterprise.
Many enterprises use webstorm for the simple reason that a small fee for one of the best enterprise grade tools doesn’t matter to them, and for that reason you get attention from the Webstorm developers in case you need any support etc.
Let us talk a bit more about the best React IDE and Editors, starting with VS Code –
1. VS Code
VS Code comes from the house of Microsoft and is available for free under open source MIT license. You can download and install/setup VS code on Windows, Mac, Debian, Ubuntu, Red Hat, Fedora, SUSE as well as get the insider build.
Developers love VS code for all kinds of programming needs these days, it is one of the most used free IDE and is loaded with tons of features. I personally use VS Code for developing mobile as well as web applications. Recently I installed Flutter (Google’s React Native alternative) and am trying my hands on with Flutter using VS Code.
Well, you may not need all the features of VS Code (which is highly unlikely if you are into serious stuff) and hence might want to choose something else, but this thing just works for me in all scenarios.
In Fact countless plugins is what you can use to transform the whole code editing experience and speed up web as well as mobile apps development.
Check out more about VS Code here at – VS Code IDE for React
2. Reactide (Reactjs, Web Development Only)
Well the name of the tool itself is ReactIDE, this one is a new kid on the block but is fast becoming popular among the community of react web app developers.
This IDE specifically focuses on web apps development using react and probably the only notable ide available which is dedicated just for react based application development.
You may also like – React Tutorials
Reactide is more of a one click setup that installs and runs a custom browser simulator, an integrated node server and offers hot module re-loading by default.
Because of the live reloading within the development environment, you do not need to do flip flop between code files and browser to check the changes made.
Reactide is cross platform, open source, free to use tool and can be downloaded for Windows, MacOS, Ubuntu and Debian.
Github link – React IDE for web development
Website link – https://reactide.io/
3. Webstorm (React IDE for Enterprises)
Webstorm is the product of a company named JetBrains which is developing such tools for the last ~18 years. The track record seems to be good around continuous product upgrades as well as customer support.
Talking a bit more about Webstorm, it is used by many large organizations and is an absolute productivity booster. Some of the features include option to put breakpoints right in the source code, setting watches, interactive console, test runners, build tools, Rest client.
For unit testing you can run tests with Protractor, Karma, Mocha with live status update in the editor. Other key features include very ergonomically designed UI to work with Mercurial, VCS, GitHub, Git, changes review etc. and much more.
Check out more about Webstorm here at – React Web Development Tool
With 50K plus github stars and more than 13k forks, Atom is one of the most popular open source text editors for modern day programming. Atom is built by GitHub folks, comes with embedded git control and fits seamlessly in the GitHub ecosystem.
Atom is truly hackable and can be customized using tons of Node.js based plugins to extend atom functionality to your needs.
You can read more about Atom here at – atom.io.
5. Sublime Text
Sublime is another powerful integrated development environment and there is a big fan base for developers who use sublime for development in various programming languages and frameworks.
I personally am not a great fan of using sublime for reactjs development, given that 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 is definitely a workable and great option, no need to scratch your head to find anything else.
Few notable and useful packages include names like – ColorSublime, react ES6 snippet, Babel, Pretty JSON, SublimeREPL, ColorPicker.BabelSnippets etc. and there are many more.
Sublime Text is supported on Windows, OSX and Linux.
Official website – sublimetext.com.
6. Rekit Studio
Rekit is another IDE focused specifically for developing apps using React, similar to Reactide that we covered earlier in this article. Rekit studio works as an IDE as well as a toolkit that can be used for developing scalable web apps using react, react router and redux.
Rekit studio runs on node server and is an npm package, and for that reason it runs in your browser. The only thing I like about Rekit is that every react app has its own Rekit studio, so things remain simple and controlled.
Rekit however is favorable solution only for individual and small scale developments. I wouldn’t recommend enterprise grade react js development using Rekit.
The basic features like refactoring, unit tests, code generation, support for Less and Sass, react router, command line tools etc. You can also extend Rekit functionality by developing your own plugins.
Check out more about Rekit here at – Rekit IDE for React
VIM is an old time classic but there is no dearth of developers who still love VIM, you can not bring something more modern like VS Code or Webstorm or reactide and argue them to leave VIM, they just love VIM.
The popularity of VIM can be gauged from the fact that Facebook engineers used VIM in early days, of course, then they created React and Nuclide and lot has happened thereafter.
VIM is your perfect option as a Linux React IDE cum editor. Initial configuration and setup can sound like a task but once up and running, it is nothing short of Atom, Sublime Text or may be even VS Code for react development.
Brackets is another open source IDE that can be used for Web development using react. Brackets is the product from the house of Adobe and is available under MIT license as free to use tool.
When it comes to react, there are plugins available to enhance Brackets functionality for speed development using React components.
I am personally not a great fan of Brackets, however, if you are new to react development but are already using Brackets for web development, I would recommend to configure it for react and see how it goes, should be fine.
However, if you are absolutely new to development itself or already using one of the IDEs mentioned in this article, you may be better staying away from Brackets. It is not a bad tool, just that IDEs like VS Code for react etc. and others are way too focused, get upgrades frequently and have better support for React development.
Check out Brackets here at – http://brackets.io/
9. Deco IDE
If you find Deco IDE as a recommendation on some websites, be careful! Deco IDE used to be one of the best IDE for react native development three years back, was supported on MacOS but is not getting regular updates anymore. As of writing this article, the last time this React IDE got an update was minimum 3 years ago.
It was originally a paid IDE but was made free and open source back in 2016 itself, you can check out the GitHub repo here – Deco React Native IDE for MacOS.
If you have done anything related to react, you might have heard of the Nuclide ide by now. Nuclide was the react ide created and supported by Facebook itself. However, Facebook has stopped development and maintenance of this ide and retired Nuclide couple of years back.
Though it is still available, and used by many developers, I wouldn’t recommend this one as it is not actively maintained or upgraded by the community anymore.
Website Link – https://nuclide.io/
React from Facebook is one of the most popular web development framework as of today and has fast replaced PHP, Ruby, Python and Angular in many areas as framework of choice. Apart from React, React Native too has made its way to one of the most used technologies for mobile apps development. Due to the vast popularity of the React ecosystem as a whole, most of the feature rich and popular IDE and editors have been upgraded to support React and React Native in the past couple of years.
Most of the editors and IDEs discussed here come with different look and feel and have their own unique abilities. The common goal that each of these tools strives for is speed development, multiple integrations, scalability and easy code management.
While we have listed IDEs in the order of our selection criteria, there is no single best for all scenarios, however, we hope that with this information, you can easily pick one react ide for Linux whatever your requirements are, or react ide Mac or Windows.
Let us know your experience with React & React Native programming and the React IDE of your choice via comments, cheers!!