Join 37,052 other Developers as we Learn, Build, and Grow Together.

Connect with fellow developers and gain access to tools that will help you build a profitable SaaS 🚀

Sign Up

React

React posts, videos, courses, and more

React Hooks Cheatsheet

React Hooks Cheatsheet

React hooks are great additions to React which has completely changed how we write code. Hooks were introduced in React starting with version 16.8.0. Before React hooks, there was no way of using state and lifecycle methods in functional components, and that’s why the functional components were called Stateless Functional Compon...

Yogesh Chavan

4 days ago

4
Select One:
State and React router - Shorts

State and React router - Shorts

React Router is the standard routing library for React. It has a simple API with all the powerful features like lazy code loading, dynamic route matching and location transition handling built-in. It allows us to create a multi-page feel in a single page application. Let's see an example to understand the basic usage of React ro...

Rahul

4 days ago

3
Select One:
An Introduction to RxJS - Shorts

An Introduction to RxJS - Shorts

RxJS (Reactive Extensions for JavaScript) is a library for receptive programming utilizing observables that makes it simpler to make nonconcurrent or callback-based code. There is a lot to it, this post is the only introduction to RxJS. Creating applications with RxJS would enjoy many benefits and it would give you extraordinary...

Rahul

1 week ago

2
Select One:
Modern JavaScript – Imports, Exports, Let, Const, and Promises in ES6+

Modern JavaScript – Imports, Exports, Let, Const, and Promises in ES6+

Over the past few years, there have been many updates to the JavaScript language. And these updates are very useful if you want to improve your coding. ​Keeping abreast of the newest developments in the language is really important. It can help you get a higher paying job, keep up to date with the latest trends, improve your cod...

Yogesh Chavan

1 week ago

3
Select One:
React.Fragments in React - Shorts

React.Fragments in React - Shorts

⁣⁣⁣⁣When working with React, there are times when you'll need to pass around gatherings of React components. ⁣⁣ And keeping in mind that it used to be that doing as such expected you to add futile holder parts or befuddling arrays.⁣⁣ Respond settled this by presenting Fragments — a basic way of collecting components without addi...

Rahul

1 week ago

3
Select One:
Importance of JavaScript Exec Method In JavaScript

Importance of JavaScript Exec Method In JavaScript

Regular expressions are great for finding patterns in a string for a particular match. They help us to convert complex logic into short and easy-to-understand code. Today we will see one such great method for pattern matching in JavaScript which is the exec method. We will also see some code examples where exec is really helpful...

Yogesh Chavan

1 week ago

4
Select One:
Integrate Auth0 with React JS - A step by step tutorial

Integrate Auth0 with React JS - A step by step tutorial

Auth0 is a drag-and-drag solution for integrating authentication and authorisation into your apps.In this article, we will take a look on how to integrate auth0 into a react app Creating a react app The first step is to create a simple react app which you can do just by running the command below in your terminal. npx create-reac...

Suhail Kakar

1 week ago

7
Select One:
How to Easily Add Google Map to Your Webpage

How to Easily Add Google Map to Your Webpage

On most of the company websites, you will find locations or contacts page that displays that company location in that country or state in a google map along with the company address. This is a pretty common requirement even for food or hotel business-related websites. So in this article, we will see how to add a google map with...

Yogesh Chavan

2 weeks ago

5
Select One:
Speed Up Your Coding Using Emmet - A Really Powerful Tool

Speed Up Your Coding Using Emmet - A Really Powerful Tool

In this article, we will explore all about Emmet. A very popular and highly useful tool that is built into almost every IDE out there like Visual Studio Code, Sublime Text etc. If you're using Codepen, then you might be happy to know that Emmet is also available in CodePen. So you can type abbreviations to generate code in Code...

Yogesh Chavan

2 weeks ago

4
Select One:
Best Way to Format And Manipulate Numbers In JavaScript

Best Way to Format And Manipulate Numbers In JavaScript

Today we will see a very popular and easy-to-use library that allows us to convert and manipulate numbers. Many times we need to display numbers like 1400 to 1.4k, 1000000 to 1M which may be numbers of views, likes or comments. Sometimes we need to add commas in long numbers to easily understand it. It's very difficult to handle...

Yogesh Chavan

3 weeks ago

4
Select One:
How To Easily Understand Any Regular Expression In The World

How To Easily Understand Any Regular Expression In The World

Today we will see how can we easily understand any JavaScript regular expression or write your own regular expression easily. To do this, navigate to this website. The UI looks like this: Consider, we want to check if the input contains digits so we will add the \d in the regular expression search box section and the input for...

Yogesh Chavan

3 weeks ago

4
Select One:
The Ultimate Guide to Web 3.0 -  Everything you need to know about Web 3.0 before learning it

The Ultimate Guide to Web 3.0 - Everything you need to know about Web 3.0 before learning it

You've probably heard about Web3 unless you've been living under a rock. Web 3.0 is the next step in the web's growth, and it aims to make the internet more intelligent. Before learning more about Web3, let's understand the evolution of the web first. Over the last few years, the World Wide Web has developed, bringing with it ne...

Suhail Kakar

4 weeks ago

9
Select One:
Most Useful VS Code Shortcuts To Improve Your Productivity

Most Useful VS Code Shortcuts To Improve Your Productivity

Visual Studio Code is the most widely used and most loved code editor for application development. So in this article, we will see some of the widely used shortcuts which make developers' life easy and coding faster. So let's get started. 1. Quickly Search File On Mac Cmd + P : Search file by name On Windows Ctrl + P : Search fi...

Yogesh Chavan

1 month ago

6
Select One:
How CSS Specificity Works? A Really Important CSS Topic

How CSS Specificity Works? A Really Important CSS Topic

CSS stands for Cascading Style Sheet. This means that the styles flow through the entire application and are applied to elements with the matching identifiers. Since CSS is a global styling mechanism, we must learn how browsers determine what style to apply when there are conflicts. Cascade means resolving the conflict between...

Yogesh Chavan

1 month ago

6
Select One:
Top Free React Dashboards to Use for Your Next Project

Top Free React Dashboards to Use for Your Next Project

It is not necessary to spend a lot of money to create a professional-looking dashboard for your website or app. That's why, in this post, we will look at some of the great react admin panels that you can utilize in your next project. This selection of the top free admin templates will assist you in launching your project with a...

Suhail Kakar

1 month ago

6
Select One:
Getting started with React Ink

Getting started with React Ink

Have you ever wondered if you can use React for the command-line interface (CLI)? Yes, you can!!! React is not only used for web development but also for making Android and iOS apps (React Native) and VR Apps (React 360) and a lot more!!! React Ink is used to build CLI apps with React and it is very easy to get started so let us...

Anish De

1 month ago

6
Select One:
The Most Important Thing You Don't Know About Promises

The Most Important Thing You Don't Know About Promises

In this article, we will see the most important thing about promises which you might not know but it's important to have knowledge about it to avoid creating bugs in the application. So let's get started. Take a look at the below code: const promise = new Promise((resolve, reject) => { resolve(); }); promise .then(() =&g...

Yogesh Chavan

1 month ago

4
Select One:
Most Useful Features of Chrome Developer Tools That You Must Know

Most Useful Features of Chrome Developer Tools That You Must Know

Chrome developer tools are an essential part of web development. Following are some of the tips and tricks of chrome developer tools to make your life a lot easier during development. Take Screenshot Of The Entire Page Right click anywhere on the page and select inspect option to open the Chrome developer tool Open command menu...

Yogesh Chavan

1 month ago

7
Select One:
Redux Middleware – What it is and How to Build it from Scratch

Redux Middleware – What it is and How to Build it from Scratch

In this article, we will explore what is a middleware in Redux, why it's used, and how you can create your own middleware from scratch. So let's get started. Want to learn Redux from scratch and build a full-stack food ordering app with stripe payment integration? Check out my Mastering Redux course. What Is Redux Middleware?...

Yogesh Chavan

1 month ago

7
Select One:
When It's Not Good to Use React State

When It's Not Good to Use React State

In React, whenever we are working with any data, we always use the state for storing that data which may be a string, number or any complex object. This is fine if you are using that state while rendering the component or If you want to do something when the state value changes but If you are using that state just for storing d...

Yogesh Chavan

1 month ago

3
Select One:
Develop a RedwoodJS URL shortener application

Develop a RedwoodJS URL shortener application

Introduction What is RedwoodJS Redwood is is built on React, GraphQL, and Prisma, Redwood works with the components and development workflow, but with simple conventions and helpers to make your experience even better, this is opinionated. To keep it simple, let's use the tag line which they go by. "Bringing full-stack to t...

Rohith Gilla

1 month ago

4
Select One:
How to Add Type Checking in React

How to Add Type Checking in React

React is a Javascript library and Javascript is a loosely typed language so by default it does not provide any type checking because of which it's very easy to create bugs in your application when we pass the wrong type of data and it will easily crash your application. There are various static type checkers used in larger appli...

Yogesh Chavan

1 month ago

5
Select One:
400+ Free resources to learn to code in 2021

400+ Free resources to learn to code in 2021

You only need this post to become a Front-end Developer because this post has nearly unlimited amount of every type of resources covering everything you will need. Blog your Journey Hashnode - Hashnode is the easiest way to start a developer blog on your personal domain 🌏 for free and connect with the readers through our glo...

Dev Bookmark

1 month ago

6
Select One:
How To Create A React App From Scratch Using Webpack 5 + Babel

How To Create A React App From Scratch Using Webpack 5 + Babel

The easiest way of creating a react application is using a create-react-app tool. This is good to use when you have just started learning React but it hides a lot of details regarding: What happens under the hood What configuration is needed to work with the latest features How does the conversion from ES6 to ES5 happen Also,...

Yogesh Chavan

1 month ago

8
Select One:
How to Configure ESLint For Your Project From Scratch

How to Configure ESLint For Your Project From Scratch

ESLint is a linter that helps to improve the code quality and fix bugs beforehand to avoid them from coming at runtime. It also helps to avoid hard to debug issues in the future. Knowing how to use ESLint is very important as most companies are actively using it. There are also other linters available like jslint, jshint but ESL...

Yogesh Chavan

1 month ago

8
Select One:
The Most Surprising Behavior of JavaScript Regular Expression

The Most Surprising Behavior of JavaScript Regular Expression

JavaScript regular expression objects are stateful when they have the /g or /y flag in the pattern to match. When we create a regular expression that has the /g flag, it maintains the lastIndex property which keeps track of the index where to start finding for the next match. So next time when we start testing using the same...

Yogesh Chavan

2 months ago

5
Select One:
Why You Should Use async And defer Attributes In a Script Tag

Why You Should Use async And defer Attributes In a Script Tag

Do you know the importance of defer and async attributes in the script tag? This is one of the most popular interview question asked in JavaScript interviews. When we load any webpage in the browser, the browser generates a DOM(Document Object Model) by parsing the document. When there is no attribute(defer or async) to the scri...

Yogesh Chavan

2 months ago

3
Select One:
How to Write Better React Components

How to Write Better React Components

JavaScript added many useful features starting with ES6 and nd these changes help developers write code that is short and easy to understand and maintain. When you use create-react-app to create a React App, you already have support for these changes. This is because it uses Babel.js to convert the ES6+ code to ES5 code which al...

Yogesh Chavan

2 months ago

4
Select One:
Understanding the React useRef() Hook

Understanding the React useRef() Hook

Introduction In this post, we'll look at the useRef() hook that provides a way to directly access a DOM node. We'll also look at scenarios where we can use the value of the reference returned by the Ref hook that is persisted between component re-renderings. Prerequisites An understanding of the useState() and useEffect() Hook...

Raunaq

2 months ago

4
Select One:
Open any Github Repo in VS Code

Open any Github Repo in VS Code

Introduction GitHub has added built-in support to open your repository in Visual Studio Code easily. Previously, we either need to use octotree extension to browse files or use github1s to view in Visual Studio Code. But github1s was opening just a read-only editor where you can't make any modifications to files. Now, with GitHu...

Yogesh Chavan

2 months ago

7
Select One:

Loading More Content