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
React JS Articles
Found 165 articles
How to Use Google Fonts in React?
Google Fonts is a widely used library of open-source web fonts that provides a vast collection of typefaces to enhance the visual appeal of web applications. It allows developers to easily integrate high-quality fonts into their React applications. In this React Google Fonts article, we will cover three different methods to add custom fonts (Google font) to your React application. Before adding custom fonts to your project, you should be familiar with the following concepts: NPM & Node.js, React.js, and Styled Components. Why Use Google Fonts? Google Fonts offers several benefits: Wide ...
Read MoreHow to force composer to reinstall a library?
Composer is a dependency management tool for PHP that is widely used in PHP projects to manage and install libraries. At times, you may need to force Composer to reinstall a library to ensure it has the latest version or to fix any corrupted or missing files. Below is a step-by-step guide on how to do this. Steps to Force Reinstallation Composer doesn't have a built-in "reinstall" command, but you can achieve reinstallation using the following methods: Method 1: Remove and Reinstall the Library Remove the Library The simplest way to reinstall a library is to first remove ...
Read MoreDifference between super() and super(props) in React
When working with React class components, one often encounters the super() and super(props) calls inside the constructor. These methods are crucial for initializing a class component and inheriting properties from React.Component base class. While they may look similar at first glance, they serve different purposes depending on how you intend to use props. In this article, we’ll explore the difference between super() and super(props) and help you understand when to use each. Introduction of super() and super(props) in React super(): The super() function is used to call the constructor of the parent class. In ...
Read MoreHow to customize Chip in Material UI?
In this article, we are going to learn how to customize chips in Material UI. Chips are small components that stand in for input, an attribute, or an action. With the aid of chips, users can input data, select options, filter content, or start processes. The chip can also be customized in the MUI in React. Customization of the chip may include, changing chip colors, custom deleting icons, adding avatars, or creating a chip using its root property. We will see everything in this article. To work with chip in MUI, we need to understand their API and its related ...
Read MoreHow to create discrete sliders in Material UI?
Developers can easily implement sliders thanks to the Slider component provided by Material UI. In the Material UI, sliders can either be continuous or discrete. While discrete sliders limit the selection to particular, predefined values, continuous sliders let users choose any value within a given range. In this article, we are going to learn how to create discrete sliders in Material UI. What are Discrete Sliders? The discrete slider allows the user only to select the value in a particular range as compared to the other sliders. To use the discrete sliders in React, we can adjust the slider to ...
Read MoreHow to create controlled switches with form groups in Material UI?
Switches in React MUI are a type of input element that allows the user to choose any one state, commonly an on or off state. These are commonly used to adjust settings on mobile devices. It is simply a check type button that helps toggle one of the two pre-defined states. In this article, we will learn how to create controlled switches with form groups in Material UI. The reason for using FormGroup is that it provides a wrapper that allows grouping the selection control components and provides an easier API. Steps to create controlled switches Below are the steps ...
Read MoreHow to create a slider with input in Material UI?
React developers can easily add or use sliders in React thanks to the Slider component provided by Material UI. In the Material UI, apart from using normal sliders, we may also define an input to provide a custom value that can be entered by users manually. In this article, we are going to learn how to create sliders with input in Material UI. What is a Slider with Input? A user interface element called a Slider with an input field combines two input techniques for choosing a numerical value from a predetermined range. Usually, it has a slider element and ...
Read MoreHow to create complex buttons in Material UI?
Within web applications, buttons are essential for enabling user engagement. Sometimes we are in need of providing custom interaction to the users using their applications or websites. You can create complex buttons with cutting−edge features, unique styles, and interactive behavior in addition to the simple buttons with standard features that Material UI offers. To provide the custom interaction in the buttons, we can use a really cool API given in the Material UI, i.e., the ButtonBase component API. In this article, we are going to learn how to create complex buttons in Material UI. Before going further in the article, ...
Read MoreHow to create animations for the Floating action button in Material UI?
A floating action button is a shape, with an icon at the center that appears in front of all screen content. Material UI is a known React component library that offers a range of pre designed and customizable UI components. Among these components the Floating Action Button (FAB) is quite popular. To enhance the user experience, we can add animations to the FAB making it more visually appealing and engaging. In this article, we will explore how to create animations for the Floating Action Button in Material UI. What is a Floating Action Button? Now let's understand what a Floating ...
Read MoreHow to autocomplete in ComboBox input in Material UI?
Autocomplete functionality within ComboBox inputs has become a widely favored feature due to its ability to enhance the user experience by offering suggested options while typing. Material−UI, a renowned React UI framework, presents an elegant and straightforward solution for implementing autocompletion in ComboBox inputs. In this article, we'll explore the step−by−step process of setting up and utilizing the Autocomplete component in Material−UI, all while maintaining a desirable level of perplexity and burstiness. What is ComboBox Autocomplete? Autocomplete in a combo box entails enhancing a normal text input with a panel of suggested options. This feature proves useful in two main ...
Read More