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 />.


In my previous article I discussed a key feature of Next JS which is built in file base routing. Now NextJS has more amazing features, but the last key feature, which I want to point out here, is the feature, which is most important for me labeling NextJS a full stack framework.

Because NextJS also makes it easy for us as a developer to add backend code to our react project. So to build a full stack react project, where we don’t just have the client side code maybe with service side pre rendering, but where we also have standalone…


In the previous article, we have split our components into multiple components. In this article Let’s have a closer look at the JSX we have coded in this learn React articles series.

As I mentioned before, earlier in this series, you can open up your developer tools, and there you’ll find the JavaScript code which is responsible for what you’re seeing on the page. And in there, you will also find all your component functions, like this app function:


How to Implement File Based Routing with NextJS

In the previous article, we talked about Next JS's remarkable feature, which is Server Side Rendering.

Another very nice feature added by NextJS is file-based routing. Now, what does this mean? In traditional React, you don’t even have a router. And just to be clear, routing means that we give the user the illusion of having multiple pages. When we navigate around and load different pages, that’s the job of a router. Typically we use React Router for that.

This router watches the URL. When it changes, it prevents the browser from sending a request to some backend server and…


Server-Side Rendering: A Key Features of NextJS

In a previous article, I explained what NextJS is. In this article, we will discuss a key feature of the NextJS server-side (Pre-rendering).

So let’s have a look at the NextJS key features and benefits. And whilst we go through them, it will also become clearer why I like to call NextJS a full-stack framework.

I would say the most important key feature NextJS adds is the built-in server-side rendering support. If it’s not clear what server-side rendering means, server-side rendering is all about preparing the content of a page on the server instead of on the client.

If you…


NextJS vs. React

So, what is NextJS? And why could learning NextJS be a good idea? And why could NextJS, in general, be helpful to us as a React developers?

If we visit nextjs.org, the official NextJS website, we learn that NextJS is the react framework for production.

Imran Farooq

React ecosystem enthusiastic. Connect with me @ https://www.linkedin.com/in/imran-farooq-0268523b/

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