Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
The easiest way to debug the JavaScript code is using the console.log(), which many developers use. Sometimes, we require to know the array's structure and stored values for the debugging purpose. In this tutorial, we will learn to view the array of structures. Various methods of JavaScript allow us to check the structure of the array. For example, we can know if the array contains an object, nested array, string, number or Boolean values. Use the JSON.stringify() Method The JSON.stringify() method allows us to convert the JSON objects into the string. An array is also an object ... Read More
In ReactJS, refs are used to referring any node of the document. Generally, we can pass the props to children elements to interact with children from the parent’s state. Still, sometimes the child component is out of the typical dataflow of components. For example, we have four components, and dataflow is second is a child of the first, third is a child of the second, and fourth is a child of the third component. To interact with the fourth component from the first component, passing props from every component is not good practice. So, we can use refs to interact ... Read More
We can use the progress bar to track how many percentage of a particular task is completed. Maybe you have seen the progress bar on many websites while uploading a file, and it is one of the best use cases of the progress bar to show the uploaded percentage of uploading the file. Another best use case of the progress bar is showing the download completion percentage. We can use different CSS styles for the progress bar to animate and improve user experience. In this tutorial, we will learn to create a progress bar using libraries and from scratch ... Read More
We can assume that you have used mobile devices to call someone and seen the contact list. Generally, when you open the phone book on most mobile devices, it will show you three sections. The first is a keypad to dial a custom number, the second is recent calls, and the third is saved contacts in the device. The recent contact section shows recent calls with names, numbers, and call duration. The normal contact list section shows your contact name with your contact number. Here, we will design a contact list in ReactJS using the basic functionalities of ReactJS. ... Read More
Image slider is crucial in any web application to show multiple images with good UX. Whenever we go on any prestigious site like amazon.com or cardekho.com, they show images in the slider, and these websites need to show multiple images for every product. Now, what if they show every single image without a slider, users can’t see the image properly, and it looks worst. So, in this tutorial, we will learn various approaches to creating an image slider in ReactJS. Use the react-simple-image-slider Npm package The react-simple-image-slider allows us to create an image slider in ReactJS. Users ... Read More
We can choose from various libraries like request, axios, or fetch to make requests to our HTTP REST API endpoint. Doing so allows us to interact with data from our API and display it in our ElectronJS application. ElectronJS is an open-source project actively maintained by the OpenJS Foundation and a community of contributors. With ElectronJS, we can build cross-platform desktop applications using web technologies such as HTML, JavaScript, and CSS. In this tutorial, we will learn how to use HTTP REST API calls in our ElectronJS application. Steps to use HTTP REST API calls in ElectronJS ... Read More
The React component can contain various states, and we can use state variables inside the return statement with HTML elements. Whenever the value of state variables updates, it also updates on the web page without refreshing the web page. This tutorial will teach us to use the objects inside the state variable. Whatever value like number, string, Boolean, or object we want to store in the state variable, we need to pass it as a parameter of the useState() hook. Use the objects in the React hooks This section will teach us to use an object as a ... Read More
In ReactJS, we can use the ‘backgroundImage’ property of CSS to set the background image for a component or particular HTML element like div. Here, we will learn to set the background image using the inline styles. Also, we will use the absolute and relative URLs to set the background image. Syntax Users can follow the syntax below to use the React inline styles to set the background image. Div content In the above syntax, we have used the ‘backgroundImage’ CSS property to set the background image for the div element. ... Read More
Material-UI is a popular React-based UI library that provides a wide2 range of UI components and design elements. Next.js is a React-based framework for building server-side rendered (SSR) and statically exported web applications. In this tutorial, we will learn how to use Material-UI with Next.js to create a user-friendly, modern and responsive user interface. Steps to integrate Material-UI with Next.js Users can follow the steps below to use Material-UI with NextJS. Step 1 − Start by creating a new Next.js project using the following command − npx create-next-app my-app Step 2 − Navigate to the newly created project ... Read More
Flexbox is a one-dimensional layout system used in React Native for arranging and aligning items in rows or columns, similar to how it's used in CSS on the web, but with some default differences. It is designed to help us create layouts that look good on different screen sizes. Using flexbox in React Native is like arranging objects on a shelf by placing books, pictures, and other items in different positions and orientations. This allows us to create responsive, flexible layouts that adapt to different screen sizes and orientations. In this tutorial, we will go through the basics of ... Read More