Top 10 IDEs for React.js Developers in 2021

Are you a React developer feeling frustrated by using that same old code editor every day and now want to explore some new and unheard editors? 
Using a code editor or an IDE that has a sufficient amount of features you need and that fits perfectly into your own workflow is important for the entire work. In this article, we have compiled the top 10 IDEs and editors on which you can get your hands as a React developer with ample support for the JavaScript ecosystem and the features they provide.
 Enjoy the read!

1. Visual Studio Code (VS Code)

What is it?

• Visual Studio Code(VS Code) is a free source-code editor made by Microsoft for Windows, Linux and macOS.

It has integrated Git version control and Terminal. It has a very large plugin ecosystem where you can find thousands of helper tools that work best for your tech stack and project.
Chances are you are already using and loving this editor. In the Stack Overflow 2021 Developer Survey, VS Code was ranked the most popular developer environment tool.

Top features:

1. IntelliSense: it provides you with a better and smart code completions based on variable types, function definitions, and imported modules.

2. Debugging: you can directly launch the debugger with break points, call stacks, and more without ever leaving the editor.

3. Git integration: you can easily review diffs, stage files, and make commits right from the editor. 

4. Extensible and customizable: with its extensions gallery you can add new languages, themes, debuggers, and connect to additional services. 

2. WebStorm

What is it?

• WebStorm is a full-blown IDE made by JetBrains for web, JavaScript and TypeScript development.

With WebStorm, you can expect everything and more of what an IDE should provide to a React developer. It runs dozens of code inspections as you type your code and detects potential problems in it.
It has smart code completion, on-the-fly error detection, powerful navigation, and refactoring. This comes with built-in support for all web-related technologies like JavaScript, TypeScript, React, Vue, Angular, Node.js, HTML, or style sheets, etc.

Top features:

1. Smart code refactoring: it autocompletes your code, detects and suggests fixes for errors and redundancies.

2. Powerful dev tools: it comes with all the linters, build tools, terminal, and HTTP client to test and debug your web applications.

3. Code navigation: in just one place you can look for files, classes, or symbols, and review all the code  matches.

4. Collaboration support: you can easily onboard you team members and other developers. WebStorm supports real-time code collaboration with sharing code styles, settings and even joining on a call!

3. Atom

What is it?

• Atom is a free and open-source ‘hackable’ code editor for customising almost anything without touching its config file. It was made by GitHub.

It has a highly customizable environment and ease of installation. So if you are someone who wants to quickly set up a new React project without worrying about multiple steps of installation etc, then Atom may be a good choice.

Top features:

1. Teletype: this is one of the highlight features of Atom as it allows you to share your entire workspace and edit code together in real time.

2. Full GitHub support: as it’s already bundled so you get to create new branches, stage and commit, push and pull, resolve merge conflicts, view pull requests etc right out of the box!

3. Built-in package manager: whether it’s about searching for your favourite package for that code library or if you want to be a pro by making your own, Atom has it all!

4. File system browser: with this, it becomes easy to open your main file while browsing all of the existing ones from a single window.

4. Sublime Text

What is it?

• Sublime Text is a popular commercial code editor which natively supports many programming languages.

No code editor talk can be finished without the mention of Sublime Text. It’s one of the most used editors in the world thanks to its slick interface, amazing features, and top-notch performance.
All the projects in Sublime Text capture the full contents of the workspace, including modified and unsaved files. 

Top features:

1. Split panes and navigation: use a simple modifier when performing actions thatwill split the interface to show multiple tabs at once. 

2. Code definitions: it comes with features like Goto Definition, Goto Reference and Goto Symbol by which you can explore the full definition in a small popup.

3. Multiple selections: use keyboard shortcuts like ⌘+D to select the next occurrence of the current word, ⌘+K, ⌘+D to skip an occurence.

4. React/JS file support: TypeScript support comes by default with syntax-based features for all React and JS/JSX files.

5. Reactide

What is it?

• Reactide(or React-IDE) 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. Now you can simply reply on a single window for all of your code, browser preview, and more.
If you get carried out while writing the React JSX code along with multiple browser windows then Reactide is here to help. It combines everything in one single place so that all the focus is on writing and reviewing the code.

Top features:

1. Intuitive interface: this is probably one of the biggest strength of Reactide when compared with others. It runs an integrated Node server and custom browser simulator and you can continually track changes through live reloading directly in the development environment.

2. State flow visualization: it comes with a visual component tree that dynamically loads and changes based on components within the working directory while giving information about props and state at every component.

3. Integrated Terminal: the built-in Terminal can be used for running commands in bin/bash for Unix, and cmd for Windows.

4. Streamlined configurations: to start, just input your .js and .html entry points inside Reactide’s universal configuration and then run npm run reactide-server to kick off your project.

6. Emacs

What is it?

• GNU Emacs is an extensible, customizable, free/libre text editor. It was created by the GNU Project.

One of the very highly adopted editors in the GNU world, Emacs has an interpreter for Emacs Lisp, a dialect of the Lisp programming language with extensions to support text editing.
It supports a plethora of programming languages and other faculties of text editing. This also comes with a good and robust set of extensions and other features like Git integration, syntax highlighting, etc.

Top features:

1. Content-aware editing modes: this includes syntax coloring, for many file types.

2. More than code editing: you can use the project planner, mail and news reader, debugger interface, calendar, IRC client, and more.

3. Extensive extension support: comes with a packaging system for downloading and installing extensions.

7. Rekit Studio

What is it?

• Rekit is a toolkit for building scalable web applications with React, Redux and React-router. It’s an all-in-one solution for creating modern React apps.

It provides you with the capability for code generation, dependency diagraming, refactoring, building, unit tests, and a meaningful way to navigate code. 
Rekit creates applications bootstrapped by the Create React App tool and has the capability to scale, test, and maintain easily.

Top features:

1. It helps you focus on business logic rather than dealing with massive libraries, patterns, configurations etc.

2. Comes with powerful tooks like Rekit Studio which is the real IDE for React/Redux development and command line tools to create/rename/move/delete project elements like components, actions etc. 

3. Rekit can do code generation, dependency diagraming, refactoring, building, unit tests, and a meaningful way to navigate code.

4. It’s highly capable of recognising which files are components, which are actions, where routing rules are defined, and so on.

8. Vim

What is it?

• Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. 

It’s a free and open-source, screen-based text editor program for Unix. The good part is Vim is designed for use both from a command-line interface and as a standalone application in a graphical user interface. 
Vim has 12 different editing modes, 6 of which are variants of the 6 basic modes. Some of the common ones are Normal, Visual, Insert, Cmdlibe, etc.

Top features:

1. Key mappings: you can execute complex commands with “key mappings,” which can be customized and extended. 

2. Recording: this allows for the creation of macros to automate sequences of keystrokes and call internal or user-defined functions and mappings. 

3. Extensive: it comes with a persistent, multi-level undo tree along with an extensive plugin system.

4. Support: Vim supports hundreds of programming languages and file formats. It can also be integrated into various other tools easily.

9. NetBeans

What is it?

• Apache NetBeans is a development environment, tooling platform and an application framework.

NetBeans IDE allows applications to be developed from a set of modular software components called modules. It was originally used for making Java applications but now has extensive support for all major tools and technologies including PHP, C, C++, HTML5 and JavaScript.
The IDE provides editors, wizards, and templates to help you create applications in Java, PHP, and many other languages.

Top features:

1. Fast and smart editing: it highlights source code both syntactically and semantically, lets you easily refactor code, with a range of handy and powerful tools.

2. CSS editor: this comes with code completion for styles names, quick navigation through the navigator panel, displaying the CSS rule declaration in a List View and file structure in a Tree View.

3. Modular: each module provides a well-defined function, such as support for editing, or support for the CVS versioning system.

4. JavaScript editor:it has syntax highlighting, refactoring, code completion for native objects and functions, generation of JavaScript class skeletons, generation of Ajax callbacks from a template.

10. Notepad++

What is it?

• Notepad++ is a free source code editor and Notepad replacement that supports several languages.

It’s written in C++ and uses pure Win32 API and STL which ensures a higher execution speed and smaller program size. It supports tabbed editing, which allows working with multiple open files in a single window. 
It features all the common editing tools like syntax highlighting, code folding and limited autocompletion for programming, scripting, and markup languages, but not intelligent code completion or syntax checking. 

Top features:

1. Collaborative editing:this allows multiple developers to work on the same file simultaneously while on different computers.

2. Selection methods: it has support for various methods for text selection like block selection, column selection , and non-linear selection.

3. Macros: for recording a sequence of editing commands to be executed repeatedly. 

4. Other notable features include; advanced find and replace, split-screen editing/viewing, support for bookmarks and a plugin system.

We hope you liked this set of IDEs and editors for React development. Let us know which one are you currently using and which one you will use after reading this article. Happy coding!

How to Use Material UI (MUI) Icons in React

Whether it’s about a simple landing page, an e-commerce app platform or your company’s internal dashboard, using a library of pre-made icons and components is highly beneficial. There are many other icon libraries out there which can ease your work but one of the largest and the most popular one is the Material UI (or recently named MUI) icon library.

If you are new to Material UI library, it provides you with a robust, customizable,  accessible and advanced components, enabling you to build your own design system and develop React applications faster. That includes a huge list of Material icons.

Material UI icons or MUI currently have over 1900 icons based on Material Design guidelines set by Google. So let’s see how to use them in a React application. Let’s begin!

Getting started with Material Icons in a React app

Let’s get our hands dirty with some actual coding where our React app uses the Material Icons (MUI) package.

What we will be making?

Our demo will be a very basic one. Basically, a component where we display three of the common items found in a typical webpage; 

 As you can see, we have three items:

1. The “More” dropdown item.
2. The “Menu” hamburger item.
3. The “Cart” icon.

Here we are using the Material Icons alongside the texts. 

Step 1: Start a New React Project

Make sure you have Node.js installed on your system and then run the following commands:

npx create-react-app mui-demo
cd mui-demo
npm start

This will bootstrap a new React application and run the default app on http://localhost:3000/ in your default browser thanks to the Create React App tool.

Step 2: Install Material UI(MUI) package

Before we start adding these icons, we need the core MUI package because all these icons uses the MUI SvgIcon component to render the SVG path for each icon. For each SVG icon, we export the respective React component from the @mui/icons-material package.

Run the following command from your terminal:

npm install @mui/material @emotion/react @emotion/styled

Or if you are using Yarn:

yarn add @mui/material @emotion/react @emotion/styled

Step 3: Install Material Icons Package

Now we can install the icon package with the following command

// with npm
npm install @mui/icons-material

// with yarn
yarn add @mui/icons-material

Step 4: Start Using MUI Icons!

Simply head over to the app.js file and delete all the existing code. We will be writing everything from scratch.
Let’s start with the responsive Grid layout component which will contain all of our elements inside. This is useful for different screen sizes and orientations which uses CSS Flexbox under-the-hood.
So under the return() method, we should have <Grid> component. This can have its props or custom styles attached to it:

<Grid container></Grid>

Now we need six new child <Grid> components to hold our icons with the text lables (one for each of the three). Make sure you pass in the item prop to each of them.

<Grid item xs={1}></Grid>

Within each of these, we have a <Typography> component holding the text label

<Typography>More</Typography>

As for the actual MUI icon component we will create a duplicate child <Grid> item but the only thing changed here will be the actual icon component name. By now we should have the following code:

import * as React from "react";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";

export default function App() {
  return (
    <Grid container sx={{ color: "text.primary" }} >
      <Grid item xs={1}>
        <Typography>More</Typography>
      </Grid>
    </Grid>
  );
}

Let’s see how to find icons we need from the MUI website:

1. Head over to the Material Icons webpage.
2. Here you will see a list of icons:

As you can see it has 5 types of icons: Filled, Outlined, Rounded, Two tone, and Sharp. For this demo we only want to use the Outlined one. 

3. Now let’s search for the four icons by name let’s say the menu icon:

4. If you click on the selected icon you will be greeted with the following popup:

Here you get the icon component’s name along with some variants. 

5. Finally, let’s copy the import statement you see in the modal above so that we can use it on our React application.

Inside the second child <Grid> component we can now safely add the selected icon component as:

import MenuIcon from "@mui/icons-material/Menu";

<Grid item xs={1}>
  <MenuIcon />
</Grid>

Other icon components used for the above demo are: ExpandMoreOutlinedIcon and ShoppingCartIcon.
If you implemented the above steps successfully, you should have the following code:

import * as React from "react";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import ExpandMoreOutlinedIcon from "@mui/icons-material/ExpandMoreOutlined";
import MenuIcon from "@mui/icons-material/Menu";
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";

export default function SvgMaterialIcons() {
  return (
    <Grid container sx={{ color: "text.primary" }} style={{ margin: "10rem" }}>
      <Grid item xs={1}>
        <Typography>More</Typography>
      </Grid>
      <Grid item xs={1}>
        <ExpandMoreOutlinedIcon />
      </Grid>
      <Grid item xs={1}>
        <Typography>Menu</Typography>
      </Grid>
      <Grid item xs={1}>
        <MenuIcon />
      </Grid>
      <Grid item xs={1}>
        <Typography>Cart</Typography>
      </Grid>
      <Grid item xs={1}>
        <ShoppingCartIcon />
      </Grid>
    </Grid>
  );
}

And that should do it! If you followed the above steps carefully, you can see in your browser that React is rendering the corresponding MUI icons as needed.

One of the benefits of using Material UI icons other than the fact that it’s huge with multiple variants is that it is supported by all major platforms, as well as browsers and if you ever get stuck you can definitely check out their GitHub repo. If that’s not enough, they have an entire page dedicated to support.

So go ahead and try to use some other icons available in your project. Hope this short guide helped.

Or you can also browse some of our pre-built react templates that are fully-responsive, interactive, and are loaded with all the important Material UI Icons.