Suraj Sharma's Blog

Jan 3, 2021

How to autofocus an input element in React using useRef() hook

Learn to focus JSX elements in React function component using the useRef() hook

#react #reacthooks

Jan 3, 2021

How to write React function components in Typescript

Learn to write strongly type React function components in TypeScript

#react #typescript

Jan 3, 2021

How to pass arguments to onClick event handlers in React

Learn to pass multiple arguments to onClick event handlers in React

#react #material-ui

Dec 21, 2020

How to do a 301 server side redirect in Next.js

Do a server side redirect in Next.js and React using the nodeJS response.writeHead() method

#nextjs

Dec 20, 2020

How to get query string params using Node and Express

Get the query string params in express using the Request.query property

#nodejs #expressjs

Dec 14, 2020

How to sort an array of strings and numbers in JavaScript

Sort an array of alphanumeric values in JavaScript using the String.localeCompare() method

#javascript #array

Dec 7, 2020

How to convert ASCII code to a character in JavaScript

Convert ASCII code to sting and character and vice versa in JavaScript

#javascript

Dec 5, 2020

Call parent component method in a child component in React and Typescript

How to call a parent component method in a child component in React and Typescript

#react #typescript

Dec 2, 2020

How to embed a Youtube video in React

Embed a Youtube, Facebook, Twitch or any other external video on your React app using react-player

#react

Nov 29, 2020

How to pass props to the makeStyles API in React Material UI

Learn how to pass a component props to the makeStyles API in React Material UI that dynamically change the style property

#react #material-ui

Nov 29, 2020

How to pass React components as props in TypeScript

Learn how you can pass an entire component as props in React and TypeScript

#react #typescript

Nov 26, 2020

How to get the last element of an Array in JavaScript

In this tutorial, I have discussed 2 ways to get the last element of an Array in JavaScript

#javascript #array

Nov 25, 2020

How to scroll to the bottom of JSX elements in React

How to scroll to the bottom of a JSX element using useRef() hook

#react

Nov 22, 2020

How to scroll to top of the page in React

Scroll to the top of the page in React using useEffect() react hook

#react

Nov 22, 2020

How to detect dark mode theme in React Material UI

You will learn to apply React material ui useMediaQuery() hook to detect dark mode theme

#react #material-ui

Nov 20, 2020

How to detect if dark mode is enabled on a browser using JavaScript

In this tutorial, you will learn how you can check if dark mode is enabled on your browser using the window.matchMedia() method

#javascript

Nov 18, 2020

How to check if an array is empty in JavaScript

Learn the easiest way to find whether the given array is empty or not

#javascript #array

Nov 17, 2020

How to remove the first element of an array in JavaScript

Learn to use Array.shift() method and array destructuring to remove the first element of an array in JavaScript

#javascript #array

Nov 16, 2020

How to check if an object is an array in JavaScript

Learn how you can use Array.isArray method to check if an object is an array in JavaScript

#javascript #array

Nov 15, 2020

How to add an element at the beginning of an array in JavaScript

In this tutorial, you will learn how you can add a new element at the beginning of an array in JavaScript using unshift() method and array destructuring

#javascript #array

Nov 15, 2020

How to submit a login form in React using React hook

Learn how to submit a controlled login form in React using html form onSubmit attribute

#react

Nov 14, 2020

How to remove a particular substring from a string in javascript

Learn to use the replace() and the split() method to remove a substring from a string in JavaScript

#javascript #string

Nov 14, 2020

How to achieve conditional routing in React using react router dom

In this tutorial, learn how you can conditionally route in React when a user login into a react app using PrivateRoute component

#react

Nov 10, 2020

How to pass state data in react router dom

Learn how you can pass data between the routes using react-router-dom

#react

Nov 8, 2020

How to show and hide components in React using React Hook

Learn to conditionally show and hide components in React using useState hook

#react

Nov 7, 2020

How to import CSS from the public folder in React

Import a css file from the public folder in React

#react

Nov 7, 2020

How to make React Material UI Typography bold

Learn to change the font-weight of the React Material UI Typography component to bold

#react #material-ui

Nov 2, 2020

How to change font family of typography in React Material UI

Learn to change the font family of React Material UI Typography

#react #material-ui

Oct 3, 2020

How to get query params of a current URL in React

Learn to create a custom hook to get query params of a URL in React

#react #react-router-dom

Oct 2, 2020

How to add an item to a list in React

Learn to add an item to a state Array in React using the spread operator and the concat method

#react

Oct 2, 2020

How to render a list of items in React

Learn to render a list of items in React using the Array.map() method

#react

Sep 30, 2020

How to convert a boolean to a string in JavaScript

Learn to convert a boolean to a string in JavaScript

#javascript

Sep 27, 2020

How to convert a string to a boolean in JavaScript

Learn to convert a string to a boolean in JavaScript

#javascript #string

Sep 26, 2020

How to set a background image from the public folder in React

In this tutorial, I have discussed what the best way to set a /public folder image as a background image in React JSX

#react

Sep 24, 2020

How to remove the last character of a string in JavaScript

In this tutorial, you will learn to remove the last character of a JavaScript string using the substring() and the slice() methods

#javascript

Sep 24, 2020

How to handle an error in async await in JavaScript

In this tutorial, you will learn to handle an error in JavaScript async await

#javascript

Sep 24, 2020

How to break out of the Array forEach method in JavaScript

In this tutorial, you will learn to break out of the array.forEach method in JavaScript

#javascript #array

Sep 24, 2020

How to get the first element of an array in JavaScript

In this tutorial, I have discussed 3 ways to get the first element of a JavaScript array

#javascript #array

Sep 21, 2020

How to get the current URL and pathname in React

In this tutorial, I have discussed different ways to get the current URL and pathname in React - uselocation hook and window.location object

#react #react-router-dom

Sep 17, 2020

How to check if a value exists in an Array of Objects in JavaScript

2 JavaScript Array methods to check if a value is present in an array of objects; some() and find() methods.

#javascript #array

Sep 16, 2020

How to deploy a create React app to Github pages for free

A practical guide on how to deploy or host your React app on Github Pages for free using 6 simple steps.

#react #github

Sep 16, 2020

How to Disable a Button when an Input field is Empty in React

In this tutorial, I have discussed how you can use disabled attribute of a button element to disable the button when an input field is empty in React

#react

Sep 15, 2020

How to add google analytics to a Next.js website

In this tutorial, I have discussed how you can add google analytics to your Next.js website

#nextjs

Sep 14, 2020

How to check if a String starts with a Substring in JavaScript

In this tutorial, I have discussed 4 ways to check if a JavaScript string starts with a substring

#javascript #string #es6

Sep 12, 2020

How to add a custom font in React Material UI

In this tutorial, I have discussed how you can add a custom font and override the React Material UI font.

#react #material-ui

Sep 12, 2020

How to check if an Array includes a value in JavaScript

In this tutorial, I have discussed 5 ways to check if an JavaScript array includes a value

#javascript #array

Sep 10, 2020

How to convert a Decimal to a Hexadecimal in JavaScript

I have discussed how you can convert a decimal to a hexadecimal and a hexadecimal to a decimal number using toString and parseInt methods respectively.

#javascript

Sep 9, 2020

How to build a dark mode theme in React Material UI

A practical guide on how to create a custom ThemeProvider component to switch between light mode and dark mode theme in React material UI

#react #material-ui

Sep 9, 2020

How to build a React Login Form with Typescript and React hooks

A practical guide on how you can create a react login form and form validation with Typescript, React hooks and Material UI

#react #typescript

Sep 8, 2020

How to check if a string contains a substring in JavaScript

In this tutorial, I have discussed how to check if a sting contains a substring in JavaScript using includes() and indexOf() methods

#javascript #string #es6

Sep 7, 2020

How to merge two or more arrays in JavaScript

In this tutorial, I have discussed two ways to merge two or more arrays in JavaScript

#javascript #array #es6

Sep 7, 2020

How to change the default port of a Svelte.js app

I have discussed two ways to change the default port of a Svelte app

#svelte

Sep 7, 2020

How to uppercase the First Letter of a String in JavaScript

Uppercase the first letter of a sting in JavaScript using slice() and toUpperCase() methods

#javascript #string #es6

Sep 6, 2020

How to dynamically set Meta Title Tag in React

Created a custom React component with React Helmet to dynamically set a page meta title tag.

#react #react-helmet

Sep 5, 2020

How to Repeat a String in JavaScript

4 best ways to repeat a string for N number of times in JavaScript, using Array.join(), string.repeat(), for loop, and recursion

#javascript #string #es6

Sep 3, 2020

How to convert an Array to a String in JavaScript

4 different ways to convert an array to a string in JavaScript - forEach, join, reduce, and toString methods.

#javascript #string #array

Aug 29, 2020

How to conditionally render React components using React hooks

You will learn 3 ways to conditionally render components in React

#react

Aug 27, 2020

How to conditionally apply class names in React JS

A couple of approaches to condtionally apply class names in React JS

#react #clsx

Aug 26, 2020

How to loop through an array of objects in React

for-of loop and array.map() method, a practical guide on how to loop through an array of objects in React

#react #array

Aug 21, 2020

4 best free website hosting sites for Javascript developers (no credit card required)

From Github Pages to Netlify, 4 best free websites hosting sites for Javascript developers.

#javascript

Apr 12, 2020

Personal Blog Built using Nextjs and TypeScript

Things to consider when building a personal blog website with React

#react #nextjs #typescript