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 on 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.
If you are looking for a tool to edit and run react online, then check out this research article finding the best react online editor.
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.
Reactide is fast becoming popular among React-based web applications development, for the reason that it is dedicated just for react and react ecosystem only, including react, redux, JSX, Javascript, Typescript, and much more. It also happens to be the new entrant in the market which makes it modern, lightweight, and well – free too.
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 making 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 an 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 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.
VS Code and React – VS Code can be transformed into a very productive and efficient react IDE for speed development using plugins. Some of these plugins enhance javascript programming and there are many that specifically enhance the development experience with react, redux, react native, etc.
In Fact, countless plugins are what you can use to transform the whole code editing experience and speed up the 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 is probably the only notable ide available that 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 a flip flop between code files and browser to check the changes made.
Reactide is a 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)
This one is paid but arguably the most feature-rich IDE for developing applications around the entire javascript ecosystem. When I say javascript ecosystem, it includes reactjs, vue.js, angular, ionic, Cordova, React Native, Node.js, Electron, Meteor, the entire world of CSS, Typescript, and a lot more.
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 the 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 a 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
4. Atom
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 nodejs based plugins to extend atom functionality to your needs.
Atom is a desktop-based application and runs on top of Electron, which is used for building apps using web technologies like reactjs and everything javascript, node.js, Html, CSS, etc.
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 react js 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.
React is essentially a part of the whole Javascript ecosystem, so there are many plugins available to turn sublime into a feature-rich react ide, many plugins are specifically written to enhance the development experience with React.
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 on 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 a 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 a 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
7. VIM
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 the early days, of course, then they created React and Nuclide and a lot has happened thereafter.
VIM is more like a text editor with tons of features for fast code writing using a keyboard, well we all use a keyboard, but VIM developers tend to ditch the mouse altogether. VIM can be transformed into a powerful react editor using many available plugins for Javascript and React itself.
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 maybe even VS Code for react development.
Read more about VIM here at – Vim.org and check out this article to learn more about how to setup VIM for javascript and react development.
8. Brackets
Brackets is another open-source IDE that can be used for Web development using react. Brackets is a product from the house of Adobe and is available under MIT license as free 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 configuring it for react and seeing how it goes, should be fine.
However, if you are absolutely new to the 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 a minimum of 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.
10. Nuclide
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 the development and maintenance of this ide and retired Nuclide a 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/
Conclusion
React from Facebook is one of the most popular web development frameworks as of today and has fast replaced PHP, Ruby, Python, and Angular in many areas as frameworks 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 a 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!!
