Top 5 IDEs and text editors for React
We’re doing something a little different today! Instead of looking at the best IDEs for a specific language, we’re going for the best IDEs for a library.
Here’s our usual disclaimer: this list is a matter of personal preference. We can’t cover every IDE and text editor out there. This week, we’ve gone to some lesser known, library-specific IDEs to avoid another top 5 list of the usual suspects. However, if we’ve forgotten your absolute favorite IDE for React, let us know in the comments below!
In no particular order, here are our top 5 IDEs for React!
We’re starting off with something fresh and new. Rekit Studio is an IDE and toolkit for building scalable web applications with React, Redux and React-router. Designed to be an all-in-one solution for React app development, Rekit lets developers focus on business logic without sweating the small stuff. More importantly, gives developers an integrated overview to manage their projects.
Rekit Studio is technically an npm package that runs in your browser. However, because it is in every project, it means that every React app has its own Rekit Studio to avoid compatibility problems. 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.
More information about Rekit can be found here. Rekit is open source.
SEE ALSO: A developer’s introduction to React
We’ve talked a lot about Atom here on this IDE series. It’s a hackable and extremely customizable IDE that allows developers to tinker to their heart’s content. As such, Nuclide is built as a single package on top of Atom for a first-class development environment for React Native, Hack and Flow projects.
Nuclide has built in support for React Native. This way, developers can take advantage of the wide set of components and extensions to easily write native apps. Nuclide offers features like remote development, a debugger, a task runner, quick open, working sets, an outline, context view, health statistics, and even an integrated terminal. All the React Native features are currently available from the Command Palette.
More information about using Nuclide for React Native is available here. Nuclide is a free, open source project.
WebStorm 2018.2 comes with a few new React features, including a way to refactor your React component into two. No more need for copy pasta; just select the JSX code in the render method and use Refactor – Extract Component. Additionally, with the new intentions, developers are able to convert React class components into functional components and back again. Plus, A new collection of over 50 code snippets for React development.
More information about WebStorm can be found here. There is a free 30-day trial.
We talked a little about Emacs in the Kotlin IDE list, but this week we’re going to take a closer look at this extensible and free/libre text editor. While it may be an interpreter for Emacs Lisp, its customizable nature makes it a good text editor for all kinds of languages and frameworks. That said, it does require a bit of tweaking and plugins to really work with React.
However, the rewards are worth it. Emacs offers a number of features like content-aware editing modes, including syntax coloring, for many file types. Emacs offers an entire ecosystem of functionality beyond text editing, including a project planner, mail and news reader, debugger interface, calendar, and more. Beginners can take advantage of the tutorials and complete built-in documentation. It’s very customizable, so developers can use Emacs Lisp code or a graphical interface.
More information about Emacs is available here. Emacs is free under a GPL License.
Reactide is the first dedicated IDE for React web application development. It’s a cross-platform desktop application that offers a custom simulator, making build-tool and server configuration unnecessary. Developers can render a project in the browser instantly with just a click of a button by opening a single file.
While React is still in active development, we’re keeping a weather eye on what they do have available. An integrated Node server and custom browser simulator eliminates the need for server config and build-tools. All projects developed in Reactide are build-tool agnostic. Reactide also offers a visual editing solution with a live-representation of the project’s architecture. There’s also a bunch of straightforward GUI controls that make it easier than ever to get immediate feedback in the browser simulation.
More information about Reactide is available here. Reactide is free and open source.
Of course, we couldn’t finish this list without some of our evergreen IDEs. Eclipse offers a number of React plugins that makes developing with the popular open source IDE a breeze. IntelliJ IDEA integrates with React providing assistance in configuring, editing, linting, running, debugging, and maintaining your applications. NetBeans has made it possible to develop with React. And of course, VS Code editor supports React.js IntelliSense and code navigation out of the box.