Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Javascript Library Articles
Page 5 of 18
HTTP REST API calls in ElectronJS
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 MoreHow to set an object key inside a state object in React Hooks?
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 MoreHow to set a background Image With React Inline Styles?
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 MoreHow to use Material-UI with Next.js?
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 MoreHow to solve "Process out of Memory Exception" in Node.js?
"Process out of Memory" is an error that occurs when a Node.js program tries to use more memory than the system has available. This can happen when the program grows too big or runs for too long and can cause the system to stop working properly. To prevent this error, we may need to limit the amount of memory our program uses or find ways to optimize its performance. In this tutorial, we will learn about the "Process out of Memory Exception" in Node.js, what causes it to occur, and how to solve it. We will also explore some ...
Read MoreHow to create Emoji Picker in NextJS?
Emojis have become an essential part of modern communication. In this tutorial, we will learn how to create an emoji picker in NextJS, a popular React-based framework for building server-rendered applications An emoji picker is a UI component that displays a collection of emojis and allows users to select one or more emojis for use in their text. A well-designed emoji picker can improve the user experience and increase engagement on your site. In this tutorial, we will create an emoji picker that displays a grid of emojis and updates the selected emoji in the state. Steps to create ...
Read MoreHow to show LinearProgress in ReactJS?
The linear progress bar is often used to show download and upload percentages in the application. We can show the upload or downloaded completion percentage using the linear progress bar. Also, it improves the UX of the application as it shows progress with animation. In this tutorial, we will learn to show linear progress using the Material UI progress bar and custom progress bar. Use the Material UI to show the LinearProgress bar in ReactJS Users can use the below command in the React application to install the Material UI library. npm install @mui/material @emotion/react @emotion/styled ...
Read MoreHow to use the handleChange() function in react component?
The handleChange() is not a built-in function in the React, but as its name suggests, we can define it to handle changes that users made in the input. In the react, we need to handle the input whenever a user enters some value in the input field to make it editable. Here, we will learn to use the handleChange() function with single and multiple inputs. Use the handleChange() function with functional components In react, we can define the components using the function keyword and call them functional components. We can use hooks to manage the input value while using the ...
Read MoreHow to use AppBar Component in Material UI?
The Material UI is a library containing various components with different styles and responsive designs. For example, Material UI contains an AppBar component, which we can directly import into the React component and use as a child component of other components. Also, the Material UI library contains different components like buttons, links, tab bars, pagination etc. Furthermore, we can manipulate every component by passing a prop while using the component. For example, we can make an AppBar responsive by passing the respected props. This tutorial will teach us to use the AppBar component in Material UI. Users should install the ...
Read MoreHow to set focus on an input field after rendering in ReactJS?
While working with the forms in React, sometimes we may require to focus on any input. For example, we want to enable the submit button only if the user enters some text in the input field. In such cases, we can focus on the input so that users know that they have to enter some text in the input field to enable the button. In this tutorial, we will learn multiple ways to focus on the input field after rendering in ReactJS. Use the autoFocus attribute with the input field We can use the autofocus attribute in HTML to focus ...
Read More