This is the most important list of the shortcuts every developer should learn asap. I wish I knew them when I started my career as a developer so i could save my time on manual typing.

1. Alt + Up or Alt + Down: Move line

Pretty easy. Move line up and down.

For mac use Opt+Down or Opt+Up

2. Ctrl + Shift + I: Formats the entire file

You can format the whole active file or ask you to download a Formatter extension. I love to use Prettier extension to format JS code

For mac use Shift + Option + F

For Windows use Shift + Alt+ F

3. Ctrl+/ : Toggle line comment

You can easily toggle between comment and uncomment line behavior.

For…


When I want to visualize data on a web app, my preferred environment is using D3.js in a React application. But these two technologies are quite hard to combine. The reason is that they both want to handle the DOM.

Let’s start it!

Creating SVG elements

When we want to visualize data in the browser, we will most probably want to work with SVG elements because they are very expressive and are absolutely positioned.

To begin, we shall render a simple <svg> element.


Managing state in React with Redux can be extremely difficult. We have to deal with the heavy amount of boilerplate which can be a headache for the developers. The creator of Redux Dan Abramov describes the annoyance better than I:


Photo by Caspar Camille Rubin on Unsplash

React has been around since 2013. Building web applications with React has become difficult for developers that are coming from other frameworks or programming languages. For example if you have worked with Angular you could say that you have all the necessary features at your disposal.

React only helps us to develop Component driven UI with functional Components and props. React has some pre defined solutions like React Hooks for local state management and side effects. In the end we are dealing with Components in React.

In this article I am going to discuss complementary libraries that can help you…


In this article we are going to discuss how to do performance optimization of a React app. We usually do this by using pagination or visualization in our app, but the question is if we have an app in which we want to render a lot of Components and we don’t want to compromise on the performance and UX of it?

For the purpose of demonstration I am considering an app which will render 30000 squares on the screen and I will utilize React 17.0 and functional Components with hooks. Our app has two Components: <App /> and <Square />.


Your First Component

All the work that we’ve been doing has prepared us for building our own interface. Now let’s get started by putting together our first component. Now you’ve already seen a couple of components in our application.

If we take a peek at the index.JS file, which is the entry point for our application, you’ll notice that it doesn’t start outputting HTML to our page. Instead it calls a separate component called App right here.


Part 4: Installing Tailwind CSS in React

Installing Tailwind CSS in React

Tailwind CSS is a framework for building great-looking sites, with a utility first approach.

Now, this is super popular for libraries like React. So let’s take a look at how you go about installing it.

So, installing Tailwind CSS is a little bit different than most libraries. Part of the reason for that is that there is a problem with one of the libraries that it uses called PostCSS. And right now this Create React App doesn’t support PostCSS 8.


Using React icons components

In a real project, you will want to do all the work yourself. So, let’s take a look at how we can install a module that is external to help us add icons to our project. Now the one I’m going to be using is called React Icons, and it’s one of my favorite React Component Libraries.

To install it, we’re going to issue an npm install command, and use react-icons, and then save it as a dependency. Go into your terminal, in your project, and run the following command.

Once you’ve done that, you can use it in…


Part 2: Customizing your installs

Customizing your installs

The set-up for this project is a bit overkill. Let’s spend some time paring it down just a bit.

Here’s what we have so far:


Why is React so important?

There are two reasons why, if I had to learn only one JavaScript framework, it would be React.

Now first, the speed at which it’s dominated the industry is amazing. If I was looking for a job today as a frontend or full-stack developer, chances are it’s on the list of preferred skills.

But the second reason is more important. It’s a lot of fun to code in. React makes things that are annoying, like managing the virtual DOM, trivial.

I created this tutorial as a quick introduction to React that will teach you how it works in a practical…

Imran Farooq

i am front end developer and React Geek

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store