Tips for writing better React code — 1. Use Callback Syntax of State Updation When the next state of a component depends on the previous state, always pass a function to the setState and don’t set the state directly. Here’s some code showing you why: Component breakdown We have a state variable count count can be incremented by two buttons The Increment button…

Tips for writing short, concise, and clean JavaScript code — You must have seen the guy in the picture above. He simplifies everyday things — and that’s exactly what we are going to do with JavaScript in this article. JavaScript has a lot of cool features that most beginner and intermediate developers don’t know. I’ve picked out 10 hacks that…

Build, test, and publish React libraries — Today I am announcing Create React Package. A new tool that makes it significantly easier to create, build, test, and publish React Libraries. Many developers struggle with installing and configuring the React build for a library, though there are many tools out there for React applications. With Create React Package…

Take your asynchronous code to the next level — Promises are great for handling asynchronous operations in JavaScript. Understanding and using them correctly is an essential skill to perform asynchronous operations efficiently. I would like to share 4 promise methods that I use in my day-to-day tasks. Before moving on to the actual methods, it’s important to understand how…

All you need to know about Object/Array destructuring in JavaScript — Destructuring assignment is a handy syntax for extracting properties from objects or values from arrays into variables. Array Destructing Array destructuring is a simplified method for unpacking values from arrays and assigning them to variables. For example, instead of doing this const fruits = ['Apple', 'Orange', 'Watermelon']; const apple = fruits[0];

Master all the way from creating a basic package to CI/CD and ES6 support — NPM makes code sharing and reusability easy in the javascript ecosystem. NPM packages let you share code between your private projects too. So, you don’t have to copy/paste and maintain code on multiple projects. This tutorial will help you out whether you’re creating your first package or want to enhance…

The most powerful client-router for React yet — React-router is probably the most used package with React. Recently, a new stable version 6 is released with many new features. And personally, I think that this is the best version of react-router so far. Installation $ npm i react-router-dom@latest Switch Is Replaced With Routes The first major change in v6 is that the Switch component…

Developers that go a mile ahead — When it comes to a good software developer, there are many qualities that you can count on. But there are a few things that make self-taught developers better than just developers. By a self-taught developer, I mean someone who doesn’t have a degree in a computer-related field or someone who…

Essential concepts for React developers — Many developers know how to build complex UIs with React, but few of them know about the internals of React. Learning these concepts is very important in order to use React to its full potential. Let’s start with the Virtual DOM. Virtual DOM It is a virtual representation of the UI (copy…